Y2S2 WORK

PLEASE NOTE: Some of the 'PDF' documents supplied on this page take a long time to load due to the amount of work included and these may need to be refreshed quite a few times in order for them to load fully.

Before Deciding on a brief

Before deciding on a brief, I decided to undertake a few small tasks in preparation for when the client visited our lecture in week two. This included gaining some background research, preparing questions and thinking of methods of how development could be implemented into the 3D projects shown above as this was something that the group was interested in. I also thought of some ideas of how the current website could be improved if the client would be willing for a redesign of the website.

Initial Research/Inspiration

After realising that the website was currently in the process of being updated, the group decided to choose the two 3D projects which involved creating 3D models for both a loom and waterwheel. I decided to first of all undertake research to understand products which already existed with regards to 3D models and activities. These can be viewed below. Throughout the project(s), I ensured that I considered a variety of target audiences as, for both projects, these included audiences such as schools and professional academics which meant that the outcomes had to be usable by different age ranges.

As is evident above, there were many examples which demonstrated how a user could interact with 3D models online. I understood that with regards to the 3D models from both 'Sketchfab' and 'Animagraffs', these could be rotated and that information was also provided to help explain the processes being shown. With regards to the jigsaw research, this was to understand how the user would be able to drag and drop pieces of a puzzle into place and from personal experience, there was an activity where the user would be assigned the task of completing a puzzle to put different parts of a train together under a time limit in a specific order and this was digital. This is relating to the STEAM Museum as shown above.

Research of Current Technologies

As well as researching current examples of outcomes, I also researched the types of technologies which could be used to allow for interaction with 3D objects. WebGL was a good example of this and a few examples of this can be viewed below.

The first example allowed the user to type the amount of jelly fish they wanted to appear on the web page. This then created that many jelly fish on the web page. The second was a Rubik's cube which allowed the user to interact with it and the final example allowed the user to select a car type and a colour which would then appear on the web page. The car would rotate allowing for viewing of different angles.

Initial Ideas for the 3D Loom Brief and Inspiration for the Ideas

After undertaking research, I then decided produced some ideas for the 3D loom brief. The sketches can be seen below.

The first idea, which is situated on the left-hand side of the first sketch, was where there would be a 3D model of the loom either on a web page or application. The user would be able to select different buttons labelling different parts of the loom and this would take them to a specific part of the loom where they could view a video, animation or interact with the model as well as being able to read information about that part. The second idea was the concept of the user being a camera which could be controlled by using either keys for a web page or swiping with a finger on an application. Whilst navigating through the loom as the camera, the user would see constant animation of the loom and when the user would look directly at a part of the loom, information would pop up about that part. This was similar to virtual reality without the virtual headset. The final idea included an old-fashioned worker of the mill which would guide the user through different aspects of the loom explaining what each part would do. The final idea was inspired by the images below the sketches.

Initial Ideas for the 3D Waterwheel Brief

I also then produced some ideas for the 3D waterwheel brief for the group and the sketches can be seen below.

The first idea, situated on the left-hand side of the first sketch, was exactly the same concept as the first idea for the 3D loom. The user would be able to interact with the 3D model by clicking on buttons labelling different parts and this would take them to that specific part of the waterwheel where they could view a video, animation or interact with it as well as being able to read information about that part. The second idea was a similar concept to that of the activity in the STEAM museum, as previously mentioned. There would be a transparent image of the waterwheel which the user would have to place different parts of the waterwheel together on top of this transparent image. When hovering over each part, information would appear about it. Once the user is finished, they would have the option to either push a button or pull a lever which would operate the waterwheel which would allow the user to understand how it animates. The final idea for the brief would allow the users to rotate the 3D model and either hover or click on highlighted parts to read some information about their purpose/function. There would also be a quiz afterwards which would solidify understanding of how the waterwheel works with the amount of correctly answered questions determining the performance of the waterwheel.

Choosing the Final Ideas

After producing some ideas for both briefs, I then analysed the advantages and disadvantages of each idea to help the group and myself choose two ideas, one being for each brief.

The client was then emailed with the ideas to gain feedback as the outcome would be for them. The ideas which were suggested were the two first ideas of each project. The client responded and liked the idea suggested for the interactive model of the 3D loom. However the idea for the interactive 3D waterwheel was required to be more interactive. Therefore the idea that was suggested wasn't chosen. The chosen ideas were the first idea for the 3D loom project and the second idea for the 3D waterwheel project. This was due to the fact that they were ideas which could be achieved within the timescale of the projects but also ideas that were simple but effective. With regards to the 3D waterwheel idea, we believed this to encourage learning through a gamification aspect in a simple but effective way. Please note that as the project developed, the other developer adapted the 3D waterwheel idea to suit the chosen 3D loom idea and also implemented a quiz aspect. Proof of the emails would have been included but because of Data Protection, they haven't been included. Instead, the client wrote a couple of paragraphs to prove there was contact and this can be viewed in the portfolio document at the bottom of this page as well as the bottom of this section.

Further Research

After deciding on which ideas to make into outcomes for each project, I then undertook further research to understand more ways of allowing for interaction which related to our chosen ideas. This research can be viewed below.

The two images to the left above are further research of 'Cells Alive' which demonstrates the fact that the part of a cell is highlighted when hovering over it and then once clicked it would take the user to a separate screen explaining to the user information about this particular part. With regards to the two images on the right-hand side, this is 'Amplifon' which allows the user to interact with different parts of an ear, both the outer and inner and when the user hovers over a part of the ear, information then appears explaining what the function of this part is. The user also has the opportunity to view the journey of how sound passes through the ear and into the brain, viewing animations with information when travelling through the ear.

At this stage of the project, the group then divided into two smaller groups of two to work on the two separate projects. It was my task to undertake the development for the project outcome for the 3D loom brief.

Wireframes for 3D Loom Project

Due to the fact that the group as a whole had divided into two smaller groups and that I would be working in the 3D loom project group, I therefore decided to produce some wireframes for the 3D loom project as can be seen below.

The first four ideas related to how the web page would appear on a desktop. The first idea would have the navigation situated across the top of the page with the title and instructions of what to do underneath. Then there would be the interactive 3D model of the loom placed to the right-hand side of the page with buttons that the user would select to go to that specific part of the loom. With regards to the second idea, the only difference from the last would be that the title with instructions and interactive 3D model with its buttons would be placed in a vertical format. The third idea shows the web page when clicking on a part where the user would be taken to that part to watch a video or animation with information placed underneath. Likewise, the fourth idea is the same. However, the user would be able to interact with the model rather than watching a video. The fifth wireframe relates to how the web page would appear on a mobile device with the 3D model being placed at the top with the instructions and buttons placed underneath but also with the buttons surrounding the 3D model and the instructions underneath. There would also be a responsive navigation menu placed in the top right. The final two wireframes relate to how the web page would appear on a tablet device. The responsive navigation menu would appear in the top right corner with the title to the left. The first wireframe shows the fact that the instructions would be situated at the top with the interactive 3D model and buttons placed below whereas the second wireframe demonstrates the fact that the instructions and buttons would be placed below the interactive 3D model.

Sitemaps for Both Projects

During the earlier stages of the project, I produced a couple of sitemaps, one for each brief for the group to analyse how the navigation would work. Although the ideas did change later on in the process, this was still beneficial as a starting point. The sitemaps were simple but because not many pages were going to be included, this was why.

The first sitemap shows the web page for the 3D loom project. The user would navigate to the 3D loom page where they could then select any part to go to that specific part of the loom. Then they would be able to view a video/animation of that part with information to read as well. At this stage, I hadn't thought about interacting with the 3D loom model so this is the reason why this hasn't been included. The second sitemap shows the web page for the 3D waterwheel project. The user would navigate to the 3D waterwheel page where they could then select each piece of the wheel and read information about that piece whilst placing the pieces together. Then once finished, the user would select either a lever or button which would cause the wheel to animate it, explaining how it operates.

Flowcharts

I then created a couple of flowcharts for the 3D loom project, one which was the original and one which had been improved after having a lecture of creating flowcharts. This was because I realised I hadn't thought about the users interactions very much. I also viewed some inspiration before making the flowcharts which is also evident below.

The first flowchart displays that the user would first of all navigate to the 3D loom page and then they would be taken to that page. After this, they would then select any part of the loom which they would either interact with or not. If they do interact with the model, they would click and drag which would cause the model to move around. If not, they would either then click on the animation or video or not. If they do, then they would click to either animate the model or play the video causing the model to animate or causing the video to play. Once finished, or indeed if they didn’t click on the animation or video, they would close down the modal where this would be situated and then either exit the web page or continue onto another part of the loom. The improvements which are evident on the second flowchart show the fact that there is a more detailed process which includes aspects such as navigating to the actual website and reading the information on the web page.

User Inputs/Interactions and Guidelines

After creating a couple of flowcharts, I then decided to create a sketch which identified the potential ways in which the user could interact with the 3D loom page. This was influenced by another team member of which I saw included interactions such as 'left click' in their flowcharts. Some of the information was also found from a book which will be referenced in the portfolio document at the bottom of this page. As advised, I also viewed the Web Content Accessibility Guidelines (WCAG) to understand how the web page could be accessible and usable for everyone. I understood that the use of 'alt' text with images and allowing for assistive technology to be used were important as well as other areas to acknowledge.

Research of Mobile Coverage and Broadband Width in the area of Whitchurch

After thinking about the users and user experience, I then undertook some research on the mobile coverage and broadband width within the area of Whitchurch to understand how this could potentially affect both outcomes of the projects, as advised by the lecturer. This can be seen below.

I understood that the mobile coverage was very good at the mill as it showed that there is good coverage for the majority of networks with the exception of 4G for Three. This meant that if the visitors wished to view the web page on a mobile device which provided either 3G or 4G, they could. With regards to the broadband width research, I understood that it depended on the package as to how much speed would be provided. However, some speeds were exceptionally good with BT and TalkTalk displaying good examples above. I understood that it depended on whether the silk mill had an Internet package and if so, to what speed would be provided. This would therefore have an effect on the overall loading time of the web pages both projects would produce. This was the last stage I undertook before beginning the development process.

Proof of Contact with the Client

As mentioned previously the client had written a couple of paragraphs to prove there was contact and this can be viewed below.

“We have been in regular communication with Daniel and his team working on the 3D Loom project for the new digital interpretation that will be installed in Whitchurch Silk Mill. Throughout our correspondence Daniel maintained a professional and polite manner to any staff member he has been communicating with, and his emails have always been clear and sincere. Daniel’s attention to detail, and especially his commitment to complying with the client’s wishes is clearly displayed within the various emails requesting information to help with the creation of the 3D Loom project.”

“I was particularly impressed that Daniel had produced a project precis for us, the client, outlining the requirements of the 3D loom brief, research (including a bibliography) and drawings, as well as possible problems and solutions that might emerge when completing the project. Based on the correspondence between himself and the Mill, I feel assured that the end product Daniel and the team have produced will be of a high standard.”

Please note that although I didn’t place the precis together, I did collect the majority of the information for the contents of it.

What would I do Differently next time?

For this project, I thought it was very successful and was very proud of the fact that I had managed to get a 3D model to appear on a web page with controls after trying for a considerable amount of time. If I were to do this project again, I would try and implement a game aspect to the outcome, perhaps by encouraging the user to gain a high score of clicking on different points of a 3D object in a specific time period. Overall, I was pleased with the outcome(s) the group had produced as a whole.

DEVELOPMENT WORK AND FINAL OUTCOME SUBMISSIONS ARE BELOW AND REFERENCES ARE INCLUDED IN THE PORTFOLIO DOCUMENT SITUATED AT THE BOTTOM OF THIS PAGE AS WELL AS THE DEVELOPMENT DOCUMENT JUST BELOW

My Individual Development work can be viewed here

Final Individual outcome for 3D Loom Project (Website link)

Final Group outcomes (Website link)

Web Page Files can be Downloaded here for the whole group

Web Page Files can be Downloaded here for my contribution

The License for the use of Three.js can be Viewed here

The place of Download for Three.js can be Viewed here

Initial Ideas/Research

To begin this project, I brainstormed some ideas of different aspects which would need to be included in the social media campaign as influenced by some research as well. As is evident below I focused on the areas that had been mentioned in the module brief such as content and objectives.

Key Research Influencing the Campaign

After I had established my objectives of attracting potential employers/industry specialists, persuading more people to view my website, promoting myself as a developer and teaching people who are interested in development, especially website development, about my current experience and what aspects I have discovered as well as useful things I have learnt, I then undertook a variety of research. A more detailed process can be viewed in one of the action plans placed at the bottom of this section of the web page. I undertook research on the audience and demographics which can be viewed below. All references are included in each of the action plans and portfolio document on this page.

My target audiences included industry specialists/potential employers, especially in the website industry and also those interested in learning about development, especially website development. The two age ranges of my target audience included 18-29 years and 30-49 years. This was due to the fact that the research above suggested that the average age of a developer is aged at 28 years old and that companies often employ younger and more inexperienced programmers, promoting the older programmers to a more senior role (Eadicicco, 2015)(Eadicicco, 2014). The expertise of both the older and younger developers would have therefore become essential to me in gaining more experience.

With regards to the social media channels, I chose three which were Facebook, Twitter and LinkedIn. Key demographic research included the fact that 82% aged between 18 and 29 online use Facebook with 79% aged between 30 and 49 years using it and 56% of people aged 65 years or older using it (Fontein, 2016). I also found that 32% of Internet users aged 18-29 years use Twitter with statistics decreasing to 13% for 50-64 year olds and even further to 6% for those aged over 65 years (Newberry, 2016). For LinkedIn, I found that the majority of users are aged between 30 and 64 years old at 61% with almost 25% of users aged between 18-29 years old (Fontein, 2017). For more research and detail, either view the portfolio document at the bottom of this page or one of the social media action plans at the end of this section. The objectives I had set for Facebook were to obtain at least 20 followers and 20 likes for the Facebook page, for Twitter I wanted to obtain at least 25 followers and for LinkedIn, I wanted to achieve at least an increase of six connections by the end of the campaign.

After undertaking some audience and demographic research I created a few personas to help me understand how the campaign would benefit a variety of audiences. These can be viewed below and references are included in both the action plans and portfolio document at the bottom of this page.

I also viewed current competitors or potential influencers and what content they were distributing. Some of the main ones I viewed were 'Stack Overflow', 'Mark Zuckerberg', 'Fruit Studios' and 'David Karp'.

I understood that a range of techniques were used for content. This included sharing articles, promoting blogs, retweeting other content, using hashtags, regular content delivery, promoting others and showing emotive content, sharing personal content, using of quotes, utilising lots of visuals, promoting events, connecting with followers, showing ongoing projects and also their own content.

Additionally, I undertook research on previous social media campaigns to understand how they were successful and to influence how I could undertake my campaign. These can be viewed below.

The first campaign was called 'Know Your Lemons' which raised awareness of the signs of breast cancer amongst women in a light-hearted manner. It also provided them with the opportunity to share stories with each other and a Facebook page was established to allow people to read news updates on a regular basis, give donations and converse about the issue at hand. The visual approach was very effective as it could be understood by anyone (Hughes, 2017). The second campaign was 'Avoracle' which involved predicting football matches of Euro 2016 with an avocado due to the fact that they have a stone inside that is unpredictable with regards to what side it will be on. They painted two hands reflecting who was playing against who and whatever side the stone was on, this would have predicted the winner for that match. Posts appeared in real time during each match which allowed for comments on each match. There were over 440,000 interactions, it reached out to over 50 million people and there were over 18 million video plays proving that it was a successful campaign (Sukhraj, 2017).

The final piece of key research I undertook was some research relating to content posting which advised how many times to post on each channel as well as when to post. This can be viewed below.

Final Preparation before Launching the Campaign

Before making the social media campaign live, I had produced several items to help me stay organised which are viewable below. These were inspired by material provided to myself by the lecturer.

The gantt chart above helped me to understand the different processes that the campaign would travel through which therefore helped myself to know what tasks would be undertaken at what specific times. With regards to the table of tasks, this helped me to understand what would need to be completed to fulfill the social media campaign from the very beginning. I also created both a weekly content schedule plan and a responding schedule plan to help me understand what I would be posting and at what times and so that I would know when I would respond to actions by followers and how. As the campaign progressed, the content schedule did change due to time constraints and the responding schedule wasn't used as I understood that I received interactions at different times. This meant that when responding, I did this at various times as well. Both of these schedules couldn't be included visually on this web page unfortunately, so to view these in more detail, I have provided them at the end of this section. These can be viewed under the links called 'View my Social Media Content Schedule here in Preparation for the campaign' and 'View my Social Media Responding Schedule here'.

Brand of the Campaign

With regards to this aspect, I included aspects which would reflect a couple of my aims which were to promote myself as a developer and build up my brand as well as promoting my website. The branding that was utilised attempted to reflect the style of my current website which is this website.

As is evident above, I implemented the same brand on both Facebook and Twitter but on LinkedIn I produced a profile that showed me as a person as this is a social media platform designed to show skills of yourself even though there are company pages which can be created. The name of the brand was ‘DHW Development’ for both Twitter and Facebook but the '@dhwdevelopment' was utilised for Facebook whereas the '@DHWDevelopment' was utilised for Twitter. I included the description on the bio for Twitter as the description for the Facebook page as well to explain about the purpose of each item. The first two images above both show the logo included and colour scheme used. The third image above relates to the design used for both cover pages on Facebook and Twitter.

The day Before the Campaign went Live

Before the day the campaign went live, I released a post across all different platforms notifying those who were following me to inform them that my campaign would be going live the following day. This can be viewed below.

Types of Posts - Articles based on Different Areas of Website Development

I released many different types of posts with some being curated content from others. Although stated before that I would focus on different areas of development, I focused on website development as this was an area I had a passion for and something that I was confident in showing during the campaign. I had set myself some SMART objectives for different types of content such as achieving ten likes with at least five comments and three retweets on posts showing examples of my work. To view the full set of these SMART objectives, simply view one of the action plans situated at the bottom of this section. One of the types of post I released was website development articles which covered a range of different topics including best practices, interesting things to do with HTML, interesting things to do with CSS and trends of website design. This was a type of post curation that I undertook in order to display my passion as well as interests but to also share articles which I believed my followers would find interesting as well. As the campaign developed, I also shared websites as well as interesting areas I had found with regards to work. This was to try and change the content so it wouldn’t be as predictable.

Types of Posts - Fill in the Blank Activities/Brain Teasers

I posted fill in the blank activities to engage my followers to encourage them to learn about code through posting their thoughts of answers of what was missing from a line of code to make it work. This was first of all based on Twitter but I broadened this to Facebook in the later stages of the campaign as a technique to encourage more interaction. I also occasionally posted brain teasers which had the same concept but asked users to post answers on what they believed a piece of code to do that had been written on the post. Both post types can be viewed below.

As is evident above, I always tried to respond to any answers given by followers to show that I cared about their thoughts and to make them feel involved. Most of the time I didn’t manage to release the answers due to the fact that I didn’t receive any interaction on some posts. When I had received interaction, I liked the participants comments and responded to their comments as well.

Types of Posts - Information about Current Projects

Occasionally, I would release updates or information on some of the projects I was undertaking at the current time. This would include screenshots of the work I had been making as well as interesting aspects I had found or learnt whilst undertaking the projects. This can be viewed below.

As is evident above, I tried not to include too many images within the post to allow for the followers to gain a basic understanding of the types of work I was undertaking. This was also due to the fact that LinkedIn only allowed for posting of one image in one post at a time so therefore I tried to make this consistent across all platforms.

Types of Posts - Made Examples of CSS Animations

A few times during the campaign I released web pages made with the help of resources such as ‘w3schools’ which demonstrated the interesting things one could do with CSS animations through the use of ‘@keyframes’. This was to attempt to show my knowledge and understanding of code but to also make it interesting for the followers to view. This can be viewed below.

The first example shows the fact that the text will resize, becoming smaller and then bigger continuously. The second example would also continuously loop but this time the colour of the text would change rather than the size. The last image shows the CSS code relating to all pages in order for the animations to function properly.

Types of Posts - Miscellaneous Posts

There were a few times during the campaign where posts were released by inspiration. These can be viewed below.

The first post was to help with a case study I was currently undertaking at the time as I thought I could receive some feedback from industry professionals on the user experience of a prototype I had made last semester for the RSA project. This would have also showed some work I had done previously as well which would show the areas I have been learning about whilst undertaking my degree or work in general. The second miscellaneous post was sharing an event which stated when 'Transmedia 2018' would occur. This was to help promote the event and this was shared through Facebook. I also then followed 'Transmedia 2018' on Twitter to help promote the event.

Physical Collateral Method/Marketing Method

As well as posting content on each social media platform, I also had to undertake a physical method for one of the weeks. This involved finding a company/agency in Winchester which would be of interest to myself and thinking of something which I could either give to them in person or send in the post. This was to help improve my status within Winchester as well as improving my social media campaign. The purpose was to persuade them to visit my social media pages as well as my website in order to gain interest. I decided to choose ‘Fruit Studios Ltd’ because I had noticed that they specialised in both websites and apps, of which website development is of a serious interest to me. I decided to send a screenshot of a HTML page which described and explained about myself and my social media campaign, demonstrating I have knowledge of code as well as showcasing my skills. As can be seen below I included special techniques such as including each section with a ‘div’ ‘id’ that would indicate what the section explained. For example, the 'information_about_me' 'div' related to details about myself, including the purpose of the physical method for the social media campaign. This can be viewed below.

As advised by the lecturer, I also had to follow the company on LinkedIn as well as connecting with the people in that organisation as this would allow for meeting them at possible networking events in the future. This would then promote my status even more. As of yet, this method hadn't had any impact on the social media campaign but at least I had promoted myself.

Thanking Followers and Asking for Feedback

Although this isn't included in the types of posts section, I also released a weekly post which would thank followers for following and interacting with the campaign as well as asking for what types of content they would prefer to see in the following week. I thought this would add a more personalised tone to the campaign. This was done on a Sunday even though my campaign started on a Tuesday as this was the end of the week for my followers. I also provided a link to my website to persuade them to visit it and view my work which would attempt to increase the amount of views received upon my website as this was one of my objectives. This can be viewed below. During some of the weeks, this wasn't undertaken due to time constraints.

Creation of Weekly Content Plans

I always ensured I had a weekly content plan to follow so that I would know what I would be posting at specific times on different platforms. When possible, this was completed on a Sunday because this was the end of the week where I would have more time available to create these plans. These have been included as 'Microsoft Excel' documents as it was difficult to include each one for every week due to the fact that there were multiple screenshots for each one.

View my Social Media Content Schedule here for week 2 of the live campaign

View my Social Media Content Schedule here for week 3 of the live campaign

View my Social Media Content Schedule here for week 4 of the live campaign

View my Social Media Content Schedule here for week 5 of the live campaign

For week 2 of the campaign, I decided to change the content schedule to implement some aspects I had learnt such as rearranging some of the times to suit the optimal posting times as seen previously as I didn't believe I was receiving much interaction at the time on some posts. Examples are included below. I also removed the fact that I would undertake Question and Answer sessions and join group discussions on LinkedIn as it proved difficult to be able to undertake everything on the schedule.

I then created another content schedule for week 3 of the live campaign as from peer advice and evidence on the social media platforms, I believed I was posting too much. I wasn’t receiving much interaction at all and thought that if I tried to post less, this would help increase the interaction as well as attempt to increase my followers as I had noticed that my followers had decreased and were continuing to decrease on Twitter. To counteract this, I attempted to show an interest in other people’s posts/work by liking and retweeting this content. Also on other platforms, I invited more people to like my Facebook page as well as connecting with more people on LinkedIn. This all can be viewed below.

Although I didn’t manage to create a schedule at the time, for week 4 I did utilise the previous schedule as I thought this was the best way to undertake my campaign at this stage due to the fact that I could manage with releasing the amount of posts per day as well as due to the fact that I was gaining some more interaction on Twitter. Although the interaction didn’t change considerably with Facebook and LinkedIn, I still thought that I would remain with this strategy to see if it would eventually increase the interaction on the posts.

For the final week of the campaign, I utilised the same content schedule again as the previous week. Unfortunately, I wasn't able to release many posts at all during the last week due to submission deadlines where other work had to take priority. All of these schedules can be viewed above.

Most and Least Successful Posts Weekly Across Different Social Media Platforms

Below you will be able to see examples of posts which were most successful and least successful for every week across Facebook, Twitter and LinkedIn.

Week 1 - Most Successful Post Examples

Week 1 - Least Successful Post Examples

Week 2 - Most Successful Post Examples

Week 2 - Least Successful Post Examples

Week 3 - Most Successful Post Examples

Week 3 - Least Successful Post Examples

Week 4 - Most Successful Post Examples

Week 4 - Least Successful Post Examples

Week 5 - Most Successful Post Examples (Only Posted twice due to Workload)

Week 5 - Least Successful Post Examples (Only Posted twice due to Workload)

Example of Scheduling Utilising 'Buffer'

At the beginning of the campaign, I didn’t use the scheduling software ‘Buffer’ even though mentioned in the action plan but I did intend to use it. Then after a few days of the campaign, I then used ‘Buffer’ to help and sometimes I would schedule the posts in the evening for the following day or in the morning of the day the posts would be released. Examples of how I achieved this can be seen below.

First of all, I would select which social media platforms I wanted to release the posts to. The profiles first of all had to be configured with 'Buffer' for this to happen. In order to choose which social media profiles to release the posts to, I had to select the icons at the top. Then I would write the content for each post of which I could customise for each platform if I wished. After I had written the content I would then schedule what time the posts would be released by selecting the arrow next to the ‘Add to Queue’ section and then selecting a time. Normally this would relate to an American time zone of which I researched was approximately seven or eight hours behind the time in the United Kingdom which meant that I had to calculate the times for each platform. Once this had been completed, I then selected ‘Schedule Posts’.

Before and After Statistics

Below are the main statistics for the start of the campaign (before campaign had gone live) and the end of the campaign and how this has changed during the few weeks. For a full report of statistics with explanations, please select the 'Weekly Statistics Report' link situated at the bottom of this section. These statistics were for Facebook, Twitter, LinkedIn, webmail/emails and Google Analytics.

Before the Campaign had gone Live

After the Campaign (Final Week)

User Engagement

Below you will be able to see examples of user engagement figures for each social media platform utilised. For a full set of statistics with explanation, view the 'Weekly Statistics Report' at the end of this section. The first two images show Facebook, the second two show Twitter and the final two show LinkedIn. The first images for each show an early stage of the campaign and the second images display statistics towards the final stages of the campaign.

LinkedIn Posts (Before and After)

With regards to LinkedIn, because likes, comments and shares haven't been displayed for this platform, below you can view some examples both during the early stages of the campaign (first two images) and towards the latter stages as well (last two images). As will be seen below, I didn't receive much interaction on the posts. To view all posts released for each social media platform, simply click on the social media links provided at the bottom of this section.

The Best Followers Obtained

Below you will be able to see the people I had attracted with the content I released with regards to the best that can relate to the industry of website development.

Did I achieve my Goals?

Overall, I did achieve the targets I had set myself for each social media platform, achieving a total of 16 connections for LinkedIn when I wanted to gain at least six and achieving a total of 24 page likes and 23 page followers for Facebook when I had set myself a target of obtaining at least 20 for each. However, with regards to Twitter I did want to have at least 25 followers of which I did at one stage of the campaign but overall, I only managed to gain 21 followers. I wanted to also increase the amount of views on my website and as is evident I did attract different interest. However, I would have liked to have had higher statistics at certain stages. With regards to the SMART objectives for different types of content, which can be viewed in one of the action plans situated at the bottom of this section, I didn't achieve what I had hoped to with engagement and actions remaining at low levels throughout the campaign. This was most likely because I was posting too much and not including enough visuals. Overall, the campaign performed better in some areas compared to others.

What would I do Differently next time?

If I could undertake this module again, I would post less regularly and try and implement more images to attract more interest to the posts. I would also include more retweets of content from others and like the content of others as well across all social media platforms. This, in my opinion, would attract more interest towards my accounts and as a result increase the amount of interactions, followers and website views. I would also join discussions using the 'Groups' feature on LinkedIn to attract more interest from industry professionals/specialists.

THE INITIAL CONTENT SCHEDULE, ACTION PLAN (IN DIFFERENT FORMATS), RESPONDING SCHEDULE AND WEEKLY STATISTICS REPORT CAN BE VIEWED BELOW - SOME REFERENCES ARE INCLUDED IN THE PORTFOLIO DOCUMENT SITUATED AT THE BOTTOM OF THIS PAGE AS WELL AS IN THE ACTION PLAN (BOTH FORMATS)

ADDITIONALLY, THE LINKS TO MY SOCIAL MEDIA PLATFORMS HAVE BEEN INCLUDED BELOW AS WELL

View my Social Media Action Plan here (Word Version)

View my Social Media Action Plan here (PDF Version)

View my Social Media Content Schedule here in Preparation for the campaign

View my Social Media Responding Schedule here

Weekly Statistics Report

Link to Social Media Platform - Facebook

Link to Social Media Platform - Twitter

Link to Social Media Platform - LinkedIn

Initial Ideas

As this was a group project, I contributed an idea to the brainstorming process. This was a digital idea as the idea had to be digital or have a digital element and it was to have an app which would encourage people to eat fruit and vegetables or eat more healthily. The user would earn a specific amount of coins for every fruit, vegetable or healthy food that they would eat and these coins could then be utilised to unlock a character which would animate around the app/screen. The method to obtain money would be to include in-app purchases which would provide the user with coins after paying which they could then utilise to unlock more characters at a faster rate. However, this would have eliminated the idea of trying to eat more healthily.

The Chosen Idea

As we as a group had to all choose an idea as soon as possible to help us start undertaking research for the submission of the business plan, a poll was produced on a Facebook group. This allowed each individual to vote for which idea/ideas they liked the most. It was decided that the idea we would be using as the business idea was an idea of utilising gamification in helping to encourage recycling. This was then developed to the idea of installing a series of sensors onto bins in several locations amongst universities, businesses, schools, colleges and local communities where each bin would have its own sensor to detect which organisation is recycling the most but to also detect if an item is recyclable through flashing lights before being placed into the bin. The performance of each institution would be represented on leaderboards on an application.

The Chosen Business Idea Name

As the theme was recycling, the name therefore had to reflect this and a document was created on a shared 'Google Drive' where each team member placed their ideas. Another poll was undertaken on the Facebook group to vote for the name to choose. I contributed quite a few names to be considered.

As is evident above, the chosen name decided by the group was 'Recycle+' of which I voted for as one of the options because I believed it to be simplistic but effective and memorable.

The Business Plan

After deciding the idea and name, during the same process various research was undertaken covering a variety of different areas such as analysing competitors and thinking of marketing strategies. The whole business plan can be viewed below but to view the actual business plan more easily, simply click on the link called 'Final Group Business Plan' placed at the bottom of this section. For the business plan, I undertook the majority of the research whilst writing the majority also. I also contributed a couple of sketches for the 'creative approaches' section. The business idea also had to be presented at 'Transmedia 2018' to a pitching panel which would have contained some, if not all the information shown below.

THE FINAL GROUP BUSINESS PLAN CAN BE VIEWED IN MORE DETAIL BELOW AND REFERENCES ARE INCLUDED IN BOTH THE PORTFOLIO DOCUMENT SITUATED AT THE BOTTOM OF THIS PAGE AS WELL AS IN THE FINAL GROUP BUSINESS PLAN BELOW

Final Group Business Plan

Before Deciding on a brief

Before deciding on which brief I would choose, I brainstormed some ideas first of all as well as undertaking research and noting down some of the positive aspects for examples for the briefs which I was considering to base the project on. These were aspects I noticed as well as some aspects mentioned in the videos I was viewing.

I decided to choose to base my project on an infographics video as is evident with the brief title at the top of this project. This was because I believed it to be something that would be achievable but also something which I could find lots of information from research about a topic and I thought it would be the most interesting brief to undertake. Also, I didn't feel confident enough to produce a title sequence where I would have to film my own footage.

Inspiration/Research

As I had now chosen a brief to base my project on, I decided to undertake research on infographics videos which currently existed. These were some that had been mentioned in lectures as well as others I had found myself.

From the research above, I soon realised that a variety of topics were chosen in a fun and interesting manner. It was also understood that clear statistics and imagery were used to explain topics in the simplest of terms with voice overs. There were also unique topics which wouldn't normally be explored which made them interesting as well. The first two screenshots show examples from 'Kurzgesagt' which was suggested by the lecturer, the second two screenshots show examples from 'The Infographics Show' and the final two show examples from 'Fuzzy & Nutz'.

Initial Ideas Brainstorm

After undertaking some initial research and inspiration, I then brainstormed some ideas to help me understand the different topic areas I could potentially base my infographics piece on.

I tried to think of ideas which would be unique but also fun and interesting as well as topics which would be easy to obtain research from. I also brainstormed ideas I had a passion for. A topic idea at this stage had yet to be chosen.

Flat/Minimalistic Design Research

Following on from brainstorming topic areas, I then undertook some research on flat design as well as minimalistic design. Flat design, as explained by the lecturer, is utilised in infographics which is where I gained inspiration to undertake this research from. This research was undertaken through both 'Pinterest' and 'Google'.

I understood from the research above that not too much information was included and that lots of colours and clear typography were utilised along with a clear layout. Some information was also bold to highlight important pieces of information. As can be seen with the third image, information seemed to be placed in a hierarchy. This was very interesting to view how information was structured.

I understood from the research above that verticle shading was used along with bright colours, simple shapes and a mix of toned down colours with bright colours to add the shading effect. Also, the items weren't too complex.

I understood from the final pieces of research above that with minimalistic design, very little text as well as colour was utilised with the more simplistic being the better but also sometimes being quite abstract. Images also seemed to be a focal point as well.

Experimenting with Flat Design

After I had collected visual research and inspiration, at a later date, I then decided to experiment through the use of tutorials with making some flat designs. These are evident below.

The first tutorial I followed demonstrated how to create a watch in flat design and then I found another tutorial which I used to help me add a flat design effect to some objects I created myself. Although not successful at times, this gave me an understanding of how to design in this style.

Specifying the Topic Areas

The next stage of the project was to eliminate any ideas from the brainstorming process which I didn't want to base my piece on. I decided to choose the ideas which I believed would have more content to them. I also began to think of how they could be product-led as this was one of the criteria to meet within the module. These are viewable below through sketches.

As is evident I specified my choices down to the ideas of 'What would happen if the sun died?', 'What if we could talk to animals?/What if animals could talk?', 'How to recycle properly' and finally 'statistics about a football season'. For the recycling idea, I believed this could be for a recycling organisation to raise awareness amongst the general public, for example this could be placed on the 'GOV.UK' website. For the sun idea, I believed this could be for either 'BBC Bitesize' or 'Kurzgesagt' to display as they both focus on science as an area and this would also be educational to all ages. For the football idea, I believed that this could be for the Premier League to display an educational video to both football fans as well as those that weren't, about what happened in a particular season. Finally, for the animals idea, I believed this could be for 'Kurzgesagt', 'The Infographics Show' or 'Fuzzy & Nutz' as they all provide videos that demonstrate successful infographics and that this would be a unique topic to include on one of these platforms. With regards to aspects included on each sketch, for the recycling idea I thought I could include two bins, one of which would be a recycling bin and one of which would be a non-recyclable bin. I also tried to think about how I could integrate statistics into the topic with one of the lids on the bins opening with a statistic rising out of the bin. With regards to the sun idea, I tried to sketch ideas of how the sun and earth could be included together and how statistics could appear with an example being the fact that the statistics would appear when stars fly past. The sun would be the main focal point of the piece, explaining its purpose as well as its importance. For the football idea, I thought about how I could show the statistics visually with examples including displaying goals through footballs but also visually showing data through areas such as graphs but also including numbers sometimes. Finally, for the animals idea, I thought about how I could convey the information and I thought that there could be an animal which would talk and explain about the concept throughout the piece. I also thought I could include both a comical aspect as well as a frightening aspect to show the funny aspect as well as a potential concern.

Moodboards

After specifying down the choices of topics, I then utilised 'Pinterest' to gather some inspiration for each with regards to flat design and placed them into moodboards which can be seen below. I also produced a moodboard for statistics in flat design as this was something that was considered to be included in the final piece at this current stage of the project.

For the recycling idea, it is evident that gathering elements such as food for what food can be placed in the food waste, recycling icons and also ecology icons were included. With regards to the sun idea, I gathered images relating to landscape and nature to help inspire how I could design assets in that style and this applied to all moodboards. The earth image inspired and helped me to design one for the final piece as will be seen further down the page. I also included images related to space as the sun is a type of star and I thought I could integrate space into the piece if I were to choose this idea. With regards to the football moodboard, I collected images of footballers as I thought at the current stage it would be good to include some players in the piece if I chose this idea. Also, I collected football icons which included items such as footballs and flags to help inspire the design of my assets. The final topic moodboard for the animals idea included images of different animals including dogs, cats and monkeys. The statistics moodboard included items such as graphs and charts as well as devices such as desktop computers.

The Chosen Idea and Further Inspiration

After creating the moodboards for each idea, I then decided to choose an idea and I chose to base my motion graphics piece on the football idea because this was the idea that I had the most passion for. It was and still is an area I fully understood/understand which I believed would have therefore benefited myself when producing the piece as I would feel more confident in what I was producing. After thinking about making an infographics video for the 'Premier League' as a whole at first, I believed this to be too broad so I chose to focus on one club which was Manchester United, a club which I support and something I therefore had a solid understanding of. I decided to base this on a past season rather than a current season as I would have access to full statistics. I decided that this would be for the 'Premier League' only at the time but later decided to mention performance in other competitions as well but with the main focus being on the 'Premier League'. I then found some inspiration from 'YouTube' which focused on the performance of Chelsea in the 2016/17 season.

From the inspiration above, I gained an understanding that text was used to explain the situation of a certain part of the season, colours were used to identify either wins, draws or losses, information was highlighted and statistics were compared with other football clubs as well as having animated graphics of players.

Storyboarding Process

As I had an idea to base my piece on, after collecting the information required, I decided to write a description of Manchester United's Premier League 2016/17 season as this would be the season I would be focusing on. I also noted down some highlights of the season as well as stating the main points to take from the description. This then allowed me to focus on certain areas and create a storyboard for the idea across multiple pages. I also viewed some examples of storyboards as well as undertaking general research on the Internet. From the example storyboards, I understood lots of detail was included and that there was a clear visual approach to displaying what would happen at different stages of a video.

As is evident above, I tried to implement the different unique icons from the badges of the different teams as is obvious with the bird for Tottenham Hotspur and the red devil for Manchester United. This was because I thought this would be good to include at the current time but then realised after drawing a few this would become quite time consuming so to compensate I included circles of different colours relating to different teams with the initials inside. This is evident later on in the project with the assets. I also included some statistics to demonstrate the possible places where they would be situated. I also included bullet pieces of information to help explain what would occur at different stages of the infographics piece. After creating the final piece, I also decided to create some finalised storyboards to show how the ideas had changed throughout the process. These can be seen after the visual research.

Product-led Idea

Firstly, I thought my piece could be product-led through producing a video to be placed on either the Premier League website or Manchester United's website. If for Manchester United, it would have to be biased to promote the club but for the Premier League it would be to promote the league as interesting and successful and even unpredictable with regards to Manchester United's performance in 2016/17. After explaining the idea to the lecturer, it was then suggested to personalise the product so each fan would be able to select a team and a season of their choice where they could then watch an infographics video of that club's performance in a particular season. I adapted my idea to suit this and the sketches below demonstrate this.

The first sketch demonstrates a representation of the statistics section of the Premier League's website where an extra section for the videos would be included. Filters would be included as seen on other pages to allow the user to select a team and season which would then cause videos relating to the search preferences to appear below. To stylise each club, an outline of colour relating to that club would be placed around the outside. The second sketch demonstrates the video layout where key performers for a team would appear down one side and main achievements down the other side with a theme relating to a specific team. The final sketch demonstrates the fact that suggested videos as well as a persuasive message to entice the viewer to watch another video would be included. This is of a similar concept to 'YouTube'.

Production of Assets for Piece

After producing the storyboard and having all of the work I needed to, I then produced some assets in 'Adobe Illustrator' which would be implemented into the piece in 'Adobe After Effects'. These can be viewed below.

With regards to the assets, I placed them into layers which as advised by the lecturer would make it easier to implement them into 'Adobe After Effects'. I tried to implement a flat design and from working at the university, I understood that flat design didn't involve borders around objects so I implemented this as well where possible.

Treatment

Even though this was created during the process of producing the final video, the treatment is being placed before the final video. From viewing a template online as well as an example included on the week one lecture notes, I understood I needed to include areas such as the genre, video details, target audience and an outline of the story as from my understanding treatments were directed more towards title sequences. However, I wrote the story of Manchester United's Premier League season with mention of success in other competitions as well. Screenshots can be viewed below but to view the treatment more easily, simply click on the link placed at the bottom of this section named 'Final Treatment for Infographics Brief'. The first four screenshots demonstrate the original style which I tried to tailor to suit the colours of Manchester United. This was then changed to suit similar colours to the Premier League with a border of red to relate to Manchester United. A couple of changes had been made after the screenshots had been taken for the final treatment.

Final Production Piece

After producing all of the necessary preparation work, I then produced the final piece for this module which can be viewed below. I integrated some audio music from 'Bensound' as I hadn't included a voice over due to narration through typography/text.

What would I do Differently next time?

I was very satisfied with the outcome of this piece as I believed I had created an infographics piece which was quite professional with lots of different images and typography being used throughout as well as including background music supplied by 'Bensound'. If I were to do this project again, I would try to implement some players which related to Manchester United that animated as seen in a previous piece of research. This would add more excitement to the piece as well as representing Manchester United in a better way.

FILES ARE AVAILABLE TO BE DOWNLOADED BELOW AS WELL AS THE FINAL TREATMENT AND FINAL VIDEO PRESENTATION - REFERENCES ARE INCLUDED IN THE PORTFOLIO DOCUMENT SITUATED AT THE BOTTOM OF THIS PAGE

After Effects and Collected Files can be Downloaded here

Assets Files can be Downloaded here (Adobe Illustrator)

Final Treatment for Infographics Brief

Final Presentation can be Viewed here (what had been Completed at the Current Stage)

PLEASE NOTE THAT WITH REGARDS TO THE VIDEO PRESENTATION ABOVE, THERE IS A BLACK SCREEN WHICH APPEARS AT THE TIME OF 16:08 WHICH THEN DISAPPEARS AT 19:26 AND MY REFERENCES AND GOODBYE/THANK YOU SECTIONS APPEAR

Description of the Project

As this was a development project that was being continued, this therefore meant that I have included this development process for my contribution in the document below. Please refer to the Y2S1 page for stages such as research and wireframes. This semester, I had been collaborating with another developer to attempt to finish the website.

THIS PROJECT IS NOT YET COMPLETE BUT WILL BE UNDERTAKEN AGAIN DURING APRIL AS AGREED WITH THE CLIENT DUE TO THE UNIVERSITY WORK WHICH NEEDED TO BE COMPLETED AT THE CURRENT TIME

REFERENCES ARE INCLUDED IN THE PORTFOLIO DOCUMENT SITUATED AT THE BOTTOM OF THIS PAGE AS WELL AS IN THE DEVELOPMENT DOCUMENT BELOW

Development Process can be viewed here to the Current Stage

Proof Reading of the Website

Throughout this semester I didn't have many tasks with regards to the ongoing Transmedia project. As previously stated in Y2S1, I was meant to be assisting with the website over the Christmas period but I soon realised that this had been completed when asking for what to contribute towards this. Therefore, the first task I undertook was to proof read the website, highlighting any spelling and grammar which needed to be corrected. This can be viewed below.

Providing Feedback where Possible

As well as proof reading the website, I also gave some advice to help. The first piece of advice related to an issue on one of the pages with the images relating to the Masters students. The second piece related to the yearbook where I suggested adding in some more information about myself as I thought this would be beneficial to have.