A Truly Unique UX Frontier

There is a lot of buzz and growth surrounding the game industry these days. The world still hasn't caught up to the next generation of gamers with products that cater to them. At Wonder, we set out to create an all-in-one user experience that allows users to play the way they want, when they want, and however they want by placing an OS in their mobile device. This product we set out to build, will allow them to play AAA titles via cloud streaming, retro titles if they're feeling nostalgic, and anything in the Google Play store. In addition, they can play on the go or on their 4K TV with a dock and gamepad.

Summary

At Wonder, I was brought in, to create user testing strategies and deep UX analysis to improve the designs for their product. I created a test plan and user testing lab at the office.  In addition, I created prototypes hosted online to test gamepad UX for our TV experience with custom code. I also created multiple complex and detailed user flows and wireframes to account for both touchscreen and gamepad interaction in onboarding and upgrade paths. This complexity was multiplied by catering to in-app experiences, Android OS experiences, and web experiences on a phone screen and TV screen. I redesigned multiple products in their final states because of evolving needs and partnerships and even designed and built the corporate website.

The biggest challenge at Wonder was implementing user testing into our workflow. Because the project was top-secret and we were testing multiple hardware devices on a big screen TV and on a phone, the only solution was to invite users to our office and test there. We couldn't just use 3rd-party software such as Usertesting.com or Validately. With limited resources and space, I led the efforts in creating scripts, qualifying surveys, lab setup and breakdown instructions, inventory management for all of our recording equipment, and final data analysis and recommendations. As a design team, we moderated users in our test room via conference call in another room while we observed them with multiple webcams hooked up to OBS.

From there we recorded all the footage, noted positive / negative feedback, error-free flows, duration of tasks, and task success / failure.  Users filled out a SUS form so that we had a purely quantifiable metric to add to our analysis. From there, I identified recurring patterns and recommended actions to improve various aspects of the product that were later added to the product backlog. I created a formula that took calculated frequency, impact, criticality, and type to output a severity ranking to help in prioritization. The design and engineering team improved over 30 identified problems.

We Tested...

The initial groundwork for some of our unexplored user stories required some journey mapping, wireframing, and user flows. This would usually begin with some quick white-boarding sessions to ideate basic structures and baseline designs. This helped in getting real-time feedback and exploring as many general ideas as possible within a short amount of time. If we landed on something that felt right to everyone, we would go to our respective projects and begin mapping out a user journey. Many times, we needed to go beyond the user's interaction with the UI and explore their paths outside of our product to take into consideration context and intent based on various situations. Our product could be interacted with via touch screen phone, a gamepad clipped to a phone, or gamepad and TV.

With a large spreadsheet of user testing data and hours of footage, I went to work on updating some designs for our Game Drawer, Home Screen and TV Launcher experience. I converted the final sketch files into Principle prototypes to demonstrate interaction and animation transitions. Other features were improved upon by the design team to improve usability from our testing discoveries.
Team: Jino Ok, Scott Hernandez, and Anastasia Fang

A shared Sketch styleguide was already created and being maintained amongst the design team but I noticed asset handoffs to engineers were a little inefficient. Engineers were searching Dropbox file directories for icons and assets based on a list of file names provided to them. This was a very tedious and inefficient handoff process. I created a hosted Atomic Design System for the team, so that engineers could have an easy-to-view reference for all of our design components, colors, typography rules, and icons (which were downloadable). It also forced us to audit the whole UI and consolidate some components.