Introduction
Utopia? is the culmination of three years studying BA Digital Media at the University of Leeds. It served as a great opportunity to demonstrate the wide berth of skills I had developed over the course.
The project aims to challenge societal norms regarding mobile phone usage, particularly in teenagers. This is achieved through a story-driven and gamified narrative.
The Project
The project was born through the realization that I used my phone way too much. My daily screentime was 6+ hours a day! I wanted to create a campaign that would raise awareness, by creating a narrative that outlined a possible dystopian future if we continue to rely on our mobile devices so much.
This meant the website had to look futuristic. I designed mobile and desktop sites in Adobe XD, before using my limited development knowledge to piece together HTML, CSS and JS and build a heavily animated website. The goal was to make the webpage look like nothing I’d seen before, and I think I achieved that.
Content
The website served to host all of the other content that I would create for the campaign. This included a whole host of techniques to best demonstrate my capabilities in design and animation:
- 3 minute “Origins” animation, detailing how society became so engrossed in technology.
- 6 page graphic short story booklet, going into even more detail than the animation.
- 3 x 30 second motion graphic adverts, to try and inspire young people to live a life away from technology.
- An interactive animation created with eko, that features 8 different endings depending on the choices you make.
Origins
The Origins story was really fun for me – I got to design the entire narrative and create the lore for this world I was developing.
The process started with a few jumbled up ideas sketched out roughly, which progressed into a storyboard. After seeking critique from my peers and tutors, this was adapted, and I finally started designing characters and assets in Illustrator.
These were pushed into After Effects and animated. The title image was designed with photo manipulation techniques in Photoshop. The accompanying short story document was designed in InDesign.
Motion graphics adverts
Next, I created 3 motion graphics informercials in a different style to the Origins story. These served to be more factual warnings to current generation teenagers, and were designed to be shown before YouTube videos, as opposed to terrestial television adverts, to better engage with the target demographic.
They were created following a similar process of brainstorming/idea generation, storyboarding, scripting and finally the creation of assets in Illustrator before animating in After Effects.
eko Studio
The culmination of the project was the interactive animation created with eko Studio. This involved the creation of 65 different video files, that were then laid out in the software in a timeline. At certain points in the animation, the user would be prompted to click on different answers to advance the story, and decide the fate of the characters they have grown to love.
This followed similar steps to previous animations, with the extra addition of complex, realistic UI elements which were designed in the Trapcode suite on After Effects.
Presentation
Before presenting, I wanted to complete some user testing to ensure the project worked as intended. This involved having several members of the target demographic trial the website and various animations, using eye-tracking software to examine which parts of the website drew their interest, what needed to be more prominent, etc. They also completed a survey before and after viewing the website to acknowledge whether the campaign had influenced their opinions. After making any amends suggested, the results were collated into a final presentation for my peers.
I was very pleased that 8 months and countless hours of hard work resulted in a very positive grade, and I gained great experience in project management whilst exploring a huge variety of digital industries along the way.
Unfortunately, the website hosting the project is no longer live but ia video preview is live at the top of this article.
Thanks for reading!
