Skip the case study and go straight to the interactive prototype by clicking the button below.
Game Vaults Dedicated Arcade app was designed with both avid and casual mobile gamers in mind. Creating an all in one app with a variety of games to play and prizes to pick from.
6/1/2024 to 9/7/2024
UX Researcher, UX Writer, UX Visual Designer , UX Interaction Designer
I was responsible for conducting research, creating empathy maps, drawing wireframes, writing app content, designing mockups and prototypes.
Overcoming a cluttered display full of games, misrepresentation of games, paywalls/ads/pay to play in addition to low quality games.
Providing a fun yet straight forward approach to browsing and previewing games.
User research
Personas
Problem statements
User journey maps
I conducted interviews and created empathy maps to understand the users that I’m designing for and their needs. A primary user group identified through research was those who frequently play games, or “Avid” gamers.
Through interviewing, the assumptions about users who game were confirmed but also revealed that diverse game selection and ease of use were not the only factors that limit users. Other user problems consisted of paywalls, ads, slow-laggy-clunky games, misrepresentation of games, and lack of accommodations for impairments such as audio. These and others are variables that make user experiences unpleasant or difficult when gaming.
1:Users have difficulty finding games due to the cluttered design format and lack of organization.
2:Different platforms may not play a game the same, or some games are just too “heavy” to play.
3:Not all game apps are well organized or work well/have assistive technologies.
4:Some games have too many ads, paywalls, may be misrepresented, or are not well made.
Zachari is an avid gamer who wants access to a variety of unique and exciting games, because most game platforms only offer games that are essentially copies of each other.
Claire is a busy working mother of two. Who is looking for a simple platform to find fun and exciting games to play that will improve the quality time spent with her family.
Mapping the users journey revealed the importance of having proper accessibility for users such as closed captions to help with audio impairments. Along with how helpful having access to streamlined features on a game app can improve efficiency in finding and playing games, in addition to quality time spent with family.
Paper wireframes
Digital wireframes
Low-fidelity prototype
Usability studies
The goal was to create an organized understanding of the content that is within the webpage layout.
The goal was to organizing the content in an easy to understand design.
The goal was to minimize the amount of restructuring the layout between screen sizes. Maintaining both familiarity between web and mobile and allowing for quicker design.
The goal was to organize content in an easy to use way that didn't make the user feel overwhelmed and allowed them to focus on specific content without being hindered by unnecessary clutter.
The goal was to design both the webpage and mobile version to be similar. Allowing for a more familiar looks between both screen sizes.
Unmoderated + moderated usability study
United States, remote + in person
5 participants
15-20 minutes
Users found the app mostly easy to use, but felt some resizing and consolidating was necessary to improve their experience.
1: Users want a more singular game scroll.
2: Users want a less cluttered game vault page.
3: Users want bigger buttons.
1: Users want a more singular shop scroll.
2: Users want an easier path to account settings.
3: Users want “what’s new/featured” to be more noticeable.
Mockups
High-fidelity prototype
Accessibility
User commented on some elements being a little crowded or in need of better organization. Iterations were made to re-organize in order to eliminate those crowded areas.
Users found the design and navigation flow were easy to use but commented that some visual elements were required to help create separation between sections.
1: Text weight and contrast were considered to ensure legibility of all text. Designs were tested and confirmed to meet accessibility standards.
2: Visual design elements were carefully considered to ensure visibility for users while navigating through the pages.
3: Consolidating multiple pages into one to create a more unified navigation. Improving the efficiency of user movement through out the app.
Takeaways
Next steps
The designs impact help users feel more at ease when navigating a web page that doesn’t overwhelm them with cluttered options. Not only improving usage but allows the user to achieve their objective quicker.
“It’s pretty simple and straightforward to use, it’s really cool how things animate and move.”
Maintaining a custom visual design that is easy on the eyes along with utilizing UI variables more effectively. Designing animated cards and interactions. In addition to layout adjustments between both web and mobile versions of the pages.
Create a user feedback prompt for the user to express thoughts or concerned about the app. Work on adding additional features, such as. Multilingual options, color blind/color change options. Reiterate or improve on problems that are revealed within the app.
Thank you for viewing this case study! I love what I do and would be happy to help with any future designs that you may have. For peer review purposes contact info will not be disclosed.