Project duration:
Jan 2025 to Feb 2025
Project overview
The problem:
Ecommerce gaming sites aren’t really encouraging lately, because the sites tend to be difficult to navigate, and they have licensing and refund issues.
The goal:
Design the CheckPoint website for users to have the ability to purchase all their gaming needs from a simple hub, and make refunding a product uncomplicated as humanly possible.
My role:
UX designer leading the MuseumMuse’s web and app design, as well as the research
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.
Understanding
the user
User research
Personas
Problem statements
User journey maps
User research: summary
My research began with me looking at game retailer sites, and seeing how they were designed and what they usually sold. Then I looked at what products users would generally need and purchase. I then conducted user interviews, which I turned into empathy maps to better understand the purchasing, licensing, and refund practices of gaming retail webpages. I discovered that most websites didn’t have solid licensing and return policies, and most users preferred actual face-to-face purchasing.
User research: pain points
1
Selection
Finding events or exhibit on some museum webpages aren’t simplistic.
2
Marketing
Only a light social media presence and websites for most museums, which makes a lot of events unknown.
3
Searching
When finding an event/exhibit, most sites don’t have a filtering feature, so as to be able to centralize a specific art selection.
4
Lack of App
There are very few, if any, apps that are made for museums to procure tickets and events.
Problem statement:
Wes is a History Teacher who is looking for a good online gaming retailer to supply his needs for himself and his 2 children, because he is looking to expand his gaming to desktop, and for better deals.
Creating a user journey map of the user Janice allowed me to help identify possible pain points and improvement opportunities that came from her experiences from museum searches.
Starting
the design
Sitemap
Paper wireframes
Digital wireframes
Low-fidelity prototype
Usability studies
Not easily seeing and finding events and exhibits was a strong user pain point that I wanted to address with my sitemap layout.
In order to address the goal of making the visual marketing more prominent and accessible, I needed to adjust the strategic information architecture decisions, so as that the structure I chose made things front and center for better efficiency.
To begin the process, I sketched out several paper wireframes for the home screen, carefully selecting the parts that I felt were the strongest, and culminating a final wireframe that allowed users to see events front and center.
Paper wireframe
screen size variations
I made sure I designed layouts for different devices, because I know museum users come in a wide variety. I need to see that the design would work responsively.
Digital wireframes
Using my paper wireframes as a foundation, I was able to develop a design with the events and exhibitions accessible at first glance.
Allowing users to see all the current events front and center was the main focal point, for ease of seach and selection.
Digital wireframe
screen size variation(s)
Low-fidelity prototype
In order to make my low-fidelity prototype, I established how the user would flow through the navigation and then I connected all the screens. I wanted to make sure that the main pain points I seen from my research and interviews were top of the things addressed, like having a very distinct and visual calendar, and quick navigation to the available events.
Usability study: parameters
Study type:
Unmoderated usability study
Participants:
6 participants
Location:
United States, remote
Length:
20-30 minutes
Usability study: findings
These were the main findings uncovered by the usability study:
1
Searching
Users wanted games and sales to stand out, so they didn’t have to search long and hard, especially for current releases and tech
2
Shopping
When making a purchase, many users found the selection screen wasn’t simple when it came to showing the purchase details
3
Selection
For selecting a game, or making a transaction, the users felt the buttons should stand out more prominently.
Refining
the design
Mockups
High-fidelity prototype
Accessibility
Mockups
After taking notes and considerations from the usability study, I wanted to make the presentation more visually accessible, by making all images large and strikingly appealing. I also used color and fonts for visual aid and for hierarchy.
Before usability study
After usability study
Mockups
I wanted to make the process of knowing the details of what was selected stand out more, by using color and increasing the font. I also streamlined the design of the overlay frames.
Before usability study
After usability study
Mockups: Original screen size
Mockups: Screen size variations
I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users use a variety of devices, I felt it was important to optimize the browsing experience for said device sizes, such as mobile and tablet, so users have the smoothest experience possible.
Going forward
Takeaways
Next steps
Takeaways
Impact:
Our target users loved the improvement within the navigation and how accessible and visible any category or game selection was. It was easy to access and easy to complete a process.
What I learned:
I learned that without detailed research, attacking the pain points established is nearly impossible. The most important takeaway for me is understanding what a user is feeling and dealing with in a design, then being open to various solutions in order to solve them.
Next steps
1
Look at how much interaction the user has with the app, and if the app is needed to interact in return, ie. push notifications for sales, etc.
2
Follow up the website with a usability study, so as to see what pain points exist.
3
Establish the process in which returns will be handled, and how to deal with licensing.