ELVTR UX/UI IN GAMING

Role: ux/ui designer     client: educational

 
 

Overview

While enrolled in ELVTR’s UX/UI in gaming course, I acted as the UX/UI designer for Animal Crossing: New Horizons in order to understand the game user experience and interface design process from beginning to end.

ROLES & RESPONSIBILITIES

Over the course of 7 weeks I functioned as a UX/UI designer, formulating the user journey, paper prototypes, flowcharts, wireframes, usability testing, visual style guide, and high fidelity mockups. I utilized knowledge learned during the course, Figma, and Photoshop to complete this case study.

CHALLENGES

  • Completely new to UX/UI design and Figma

  • Changed visual style for final mockups in which the game visual style I chose had various design styles that weren’t always consistent across screens and functions

UX Design

Player Journey

Paper Prototype

FLOWCHART

Initial Wireframes

Usability testing

I conducted a usability test with a few people in order to assess the quality of my initial Figma wireframes. I defined my research objectives, logistics, and created scripts and tasks for my testers to answer and complete. The main findings consisted of:

  • I made improvements to the [Inventory Screen] in which you could filter and organize your inventory. However, having a sort function AND categories was confusing for testers

  • Some controls could be made clearer by attaching button UI over certain features (part of the confusion is probably owed to unfamiliarity with Animal Crossing as well)

  • The [Map Screen] was clear for the most part minus the function of locating whatever villager or building was selected

ITERATED WIREFRAMES

UI Design

To showcase my understanding on how to create a unique style guide, follow it, and design for it I chose to design my high fidelity mockups in the style of Fall Guys. I studied how buttons, text, pattern, and different design objects were treated and created moodboards. I then created a UI style guide to follow as I began building out my mockups.

Moodboards

STYLE GUIDE

While there were some overarching designs, the challenge with referencing Fall Guys was the inconsistency of some designs. For example, some selected objects featured a white outline while others used yellow. Another issue was that assets didn’t necessarily have a 1:1 match across both games. For example, there is no map (or map art like buildings) in Fall Guys, so I had to utilize Fall Guys assets (like obstacle icons) in a unique way when translating designs into Animal Crossing gameplay.

Initial Mockups

I created initial mockups based off my wireframes. I then conducted color blindness accessibility tests and adjusted my mockups to be more accessible.

Iterated mockups

I changed the border around selected objects and increased the drop shadow size to be more obvious in monochrome visual settings.

Outcomes

The course not only taught me the fundamentals of UX/UI and HCI principles, but also how important it is to understand the audiences you’re designing for (regardless of industry). Utilizing tools like the user journey, flowcharts, and usability testing allow you to understand more POVs and create better designs for both existing and new users. UX/UI is so much about understanding multiple perspectives and creating equitable designs so more people can have fun interactive experiences.

School | ELVTR
Course | UX/UI for Gaming
Instructor | Ivy Sang, Jacob Lee