Survios Case Study

Survios homepage mock up

I started this project 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

Likes (0)
Share