How to Find Games

Website Usability Update

Desktop and Mobile versions of How to Find Games Website
What's the problem to solve?
Redesign existing website to be mobile-first in its accessibility and functionality, maintaining existing content links, while updating touch targets, glance-ability and load times.
What does success look like?
Tabletop board games are a passion that I love sharing with family and friends. So I decided to make a website to better answer the inevitable question of "how do you find these games?" Initially I designed the website to be viewed from a desktop browser to maximize screen real estate but after multiple people typed it right into their phone I needed to update the design to be mobile-first.
Contributions
Lead UX Designer
tasked with designing and implementing web elements.

The Process

Ideation: User Flow + Wireframes
Grayed out Prototype: Low Fidelity + User Testing
Grayed out Iteration: High Fidelity + Mockups
User Flow

Set out the basic user flow starting from finding the website, reading about game types, watching a video, selecting a category of interest, and narrowing to a single game.

User Flow for site
Paper Wireframes

Brainstormed 4 options for the layout of the home screen and surrounding pages. Design A centered around a carousel of images. Design B was focused on customizable groups of items. Design C played with offsetting content left and right. Design D had a centered header that broke up content into 3 columns.

4 wireframe ideas for board game sorting
Grayed out Ideation: User Flow + Wireframes
Protoytype: Low Fidelity + User Testing
Grayed out Iteration: High Fidelity + Mockups
Homepage Update:
1st Pass

Early designs were optimized for desktop use. As a result, text looked small and cramped on the different screen aspect ratio. Additionally, touch targets were far too small when viewed on the phone.

To rectify these issues I streamlined the design, removed a menu item from the navigation, and focused on creating an interactive block element (shown below).  

These changes simplified the design but the breakpoints remained a problem as the user was initially flooded with information

Old, busy website vs simplified block version 1 update
Interactive Block: 1st Pass
before update interactive block element
Grayed out Ideation: User Flow + Wireframes
Grayed out Prototype: Low Fidelity + User Testing
Iteration: High Fidelity + Mockups
High-Fidelity Update

After trying out several iterations of the design I landed on a staggered look that made the interaction points even clearer with graphical callouts. 
Additionally I made a 2nd pass at the block elements improving their performance and visual spacing.

The end result was a design that was far more glanceable and digestible without being overwhelming.

View the updated website here
How To Find Games

Interactive Block: 2nd Pass
after update interactive block element
Mockups

Created a final mockup showcasing the entirety of the homepage, highlighting the use of white space and visual callouts to increase the digestibility of information.

3 panel slide showing the entire 'How to Find Games' homepage
Takeaways
In this project I found that it's just as important to consider the negative space as it is to consider the content being displayed on mobile form factors. The difficult decisions came in making the most of a minimum amount of information. The right solution for one breakpoint in the screen wasn’t always the right solution for another.
< Back to All ProjectsRecipe App Case StudyBoard Game RedesignArt Class Case Study

Want to get in touch?

For discussions about my work or any future projects feel free to reach me at coreyuxdesign@gmail.com

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.