Utopia? Final Year Project Case Study

Utopia UI

Utopia? was my final year project for my Digital Media degree. I crafted a web-based campaign, aiming to warn teenagers about the growing risks of mobile phone addiction, and how this will affect future society. This was achieved through a narrative-driven story, told through various animations hosted on the website. The campaign served as an excellent opportunity to demonstrate all the skills I had learned during my degree.

  • ProjectCampaign warning about mobile phone misuse
  • ClientUniversity project
  • Year2019
  • CapacityFinal year project module
  • RoleUX/UI, web dev, branding, mograph, animation
  • ToolsCreative Cloud, C4D, Atom, eko Studio

Idea Generation

As final year began in September 2018, I didn’t really have much of an idea for what I’d like to work on for my final project. I reduced it down to the most important factors to me. I wanted a project that would showcase my vast skillset, through a wide variety of deliverables. It was then relatively easy to decide on completing a campaign of some description. I also wanted the project subject to be something that interested me. I knew the amount of work that went into a final project, and I did not want to build something that would grow to bore me.

After a few weeks of idea generation and discussion with my mentor, I settled on a sci-fi theme for my project. I’ve always been a fan of science fiction films such as Star Wars and Avatar, so a narrative driven, sci-fi based, web campaign it was.

Concept Critique

The first piece of work produced was a “concept critique”. This was a five minute powerpoint presentation to explain my very early ideas to the rest of the class and my lecturers. From this, I’d gain some vital feedback to ensure that I took the project in the right direction. For the presentation, I designed my campaign logo. I researched a variety of sci-fi logos before settling on this use of negative space as a very futuristic design. The blue and purple colours are very common in sci-fi and were subsequently used as the brand colours. The logo was animated, to try and make my presentation stand out from the crowd, with several glitching effects. The presentation was also designed to be on brand, giving the most professional aesthetic to my campaign.

For the presentation itself, I found competitor campaigns that had attempted something similar, I researched relevant academic articles, and discussed my intended methods of completing the project. 

 

Pitch Document

 

The pitch document was a month after the concept critique. This gave me a chance to act on feedback, and really hone in on what it was my project was looking at. This was also necessary, as the pitch document required much greater depth than the concept critique. The required content was split into different sections. 

Firstly, asking more about the project details, and its refined aims and objectives. Having used my feedback from the concept critique, this was a lot easier to hone in on some particular objectives. I also designed a comprehensive gantt chart to plot our progress, due to the scale of the project. This proved really useful for plotting my progress throughout production.

And that’s just the tip of the iceberg. I really poured my heart into this particular piece, really making sure to design it on brand and with a very sci-fi aesthetic. I have attached some screenshots of the document, or you can download the full document here. This includes what was mentioned above, as well as some early conceptual designs, risk analysis, and more!

Prototype

 

Over the Christmas holidays, I had to design a “proof of concept” to demonstrate my competancy with digital media, so that course tutors would be confident in my abilities to complete the work to a high standard, on time. This also served as a great opportunity to test some concepts to a lesser degree, before committing tens of hours into their final production. 

For my prototype, I produced a short novel, which dealt with all of the lore behind my campaign. Being narrative driven, this content was essential before I started my major workflow. I also produced a sample website, and infographics animation. Both of these were built in After Effects, due to the more complex motion I could achieve, and really sell the sci-fi aesthetic. I then coded a solution as close to the animation as possible, to demonstrate my competancy with front-end development.

It is interesting looking back at these early prototypes now, and how different the finished versions were. This was because of the rigerous testing and review of techniques, in order to find the most time-effective solution.

Pre-Production

 

After receiving feedback on my prototypes in early January, it was time to begin work on the final project itself. My gantt chart was scheduled to start in late January, and finish in late April, giving me two weeks of fallback time before submission, in case the project overran. The gantt chart was very useful, as it prevented me from falling behind early on, which carried my momentum through the production.

Initially, production was designing the website and its animations, whilst creating assets for my animations. The gallery and videos below show some of these early designs and my workflow. The short video demonstrates the creation of a model in C4D for the Origins animation.

Full set of mobile website XD exports

Full set of desktop website XD exports

Production

 

After creating detailed assets for my animations and detailed website plans, it was time to finally begin making these solutions. I split my time as planned on the gantt chart, first working to code the website, before moving onto each of my subsequent animations. 

Production was very labour-intensive, including many long months of late nights. But, I was very pleased with the final outcome, and ready for post-production, which included final edits and user testing.

To view the final production assets, please visit this link, or skip to the bottom of the document. 

Post-Production

 

Post-production was the first time I moved away from my gantt chart. I had been adding sound to my animations as I went, which gave me a larger section to conduct user testing. Because of this, I managed to complete both moderated and unmoderated tests. 

For my unmoderated tests, I simply sent out a three-part questionnaire. Section one asked people about their mobile phone usage habits. Section two asked them to review my website. And section three asked them some general about the website, any bugs they encountered, and some of the same questions they had been asked in section one. This provided some great data, that demonstrated my web campaign had a positive impact on people’s perceptions of mobile phone usage in society. Furthermore, I found out about bugs on certain devices (such as iPhones) that I was previously unable to test on. I subsequently fixed any issues found by my users.

For my moderated tests, I recruited a group of testers (who fit my target demographic) to assess my website, using eye tracking software. One of the many benefits to completing moderated tests is that I was there to note facial expressions, initial impressions, and areas where they may have struggled. Furthermore, the tests provided a heatmap of eye tracking data. I thought this would be very important, as I’d been worried that the complexity of animation on the website could distract users from important textual elements. This proved not to be the case however, as all of my testers successfully navigated the system.

I was happy with the depth of my user testing, and subsequently confident of the usefulness of my web campaign. This research also provided great material in my final presentation, where I had a lot of user input to report back, and highlight the success of my website.

My live campaign can be viewed here.

On the website you will find everything I produced for the campaign. Alternatively, you could just watch the animations below.
Likes (0)
Share