Survios web mockup

Survios Case Study

This project came about through Sharpen.Design, a website that provides design prompts for a creatives who are looking to test their skills. On this assignment, my brief was “to design a promotional website for a VR games company”. I chose Survios, a VR studio based in LA. I decided to build a desktop and mobile version, based on the brand and their predicted demographic.

  • ProjectDesktop/mobile website for a VR games company
  • ClientSurvios
  • Year2019
  • CapacityJust for fun
  • RoleUX/UI
  • ToolsAdobe XD, After Effects

Initial Research

Without inside access to the demographics at Survios, it was difficult to gauge who was visiting their website, and what the target audience was. A few assumptions were made based off ressearching the industry. I believed the majority of visitors to the website would be those interested in VR gaming, and VR game development. With this information, I created a user persona. “Jack” represents a likely visitor to the website. His likes and interests were kept firmly in mind throughout production. 

Next, I broke down the Survios website, deciding which elements to keep, as some did their job sufficiently well. I also looked for particularly weak areas, such as an overly complex navigation system, and made these my priority for redesign. I then looked at some competitor sites, noting down feratures that would appeal to Jack, and subsequently improve the Survios site. This research inspired my initial concept sketches and site map, which was used to produce a mock brief.

Wireframing

The initial sketches were taken into XD and mocked up as a simple wireframe, before being prototyped. Without a budget, it was difficult to complete much user testing. I did however ask a friend, who matched with the persona of Jack, if he would complete an unmoderated test for me. I sent him the prorortpe video to assess and feedback to me. Based on his review, some adjustments were made to the wireframes ready for the high fidelity mockups, discussed later.

Design Research

I then returned to competitor websites once more, this time to research their composition. This included notion colour choices, typography, iconography and more, that I felt fit in with Jack and would appeal to him. Any recurring themes were noted down. One noticable theme was the use of darker background colours, and white typography. I next visited Behance and Dribbble in order to create a moodboard of colours, type and composition, based off these established themes.

mood board
The mood board was created using similar products, colours and fonts.

High Fidelity Mockups

With my mood board imported into XD, and constant reference to my wireframe and user persona, it was time to start the hiogh fidelity final mock ups. A colour palette and dual-fonts were chosen and saved into the assets panel in XD, making sure production was a smooth as possible. 

Iteration 1 – based on wireframe feedback

During production, I had mocked up the ‘games’ page as it had been initially wireframed (before testing) and after, in order to demonstrate how useful the small amount of testing had been. My initial plan was to use each games cover art to distinguish them on the page. However, testing found that this wasn’t very good for accessibility standards, and also lacked consistency in design, as the titles were sometimes left aligned, othertimes centre or right aligned. I fixed this by instead using different promotional images from each game, and overlaid this with a hover effect that outlined the title of the game. 

Upon completion of the desktop and mobile versions, I prototyped the designs and mocked them up. This was in preparation for the second round of user testing with “Jack”.

Iteration 2 – mobile games

Jack was very happy with the design and navigated it with ease, showing that the decvision to remove unnecessary dropdowns and submenus was justified. He did however make one point, that the text on the individual games was difficult to read on mobile. As a result, I returned to the mobile site and adjusted the image used, so that overlaying text was no longer necessary, which made for a nicer composition, as seen in the before and after below. 

Extra: After Effects Animation

I was enjoying working on the site so much that I decided to add some extra motion in After Effects and show off some more of my digital skills. I found the animation and prototyping tools in XD to be lacking, and wanted to demonstrate my hovering mechanic properly. I subsequently imported my artboards into AE and mocked up the hover effects, as well as the swapping between game profiles on desktop.

Summary

I was very proud of the final outcome, as this was my first attempt at UX design from start to finish. Throughout the project, I learned a new software in Adobe XD, about its many positives but also a few flaws in the lack of prototyping available. I’m definitely going to look into some other softwares such as proto.io and InVision to make things even easier. To improve the project, there is obviously a need for more user testing, which would become available through commercial clients when there is more of a budget involved. I leave with a newfound passion for UX design, and an eagerness to get started on my next project!

Full video mockups for both desktop and mobile are available here.

Final mockups for desktop and mobile

Utopia cover image

Utopia? Case Study

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.