Uncle's Games
Redesign E-commerce Website for a local brand of retail board game Brick and Mortar stores
Helping local board game store to expand their online presence by providing features for placing online pick up orders
My Role
UX/UI Designer
Team
Solo UX Designers
Project Timeline
2 Week Design Sprint
Tools
Figma, Optimal Workshop, Miro, Google Sheets, Adobe Creative Suite
Problem
For more than 40 years, Uncle’s Games, Puzzles & More stores have been a proud local brick and mortar store chain in PNW, offering a wide range of board games, puzzles, and toys.
Due to the pandemic Uncle's Games is exploring ways to serve local customers looking to place orders online for in-store/curbside pickup.
Solution
An appealing and intuitive shopping experience on Uncle's Games online website that includes easy navigation, relevant product recommendations, filter options, detailed descriptions and visuals, relevant checkout options, and tracking for product pickup.
Research
The first step of the sprint was to understand what the customers wanted when they were shopping online for Board Games.
I searched for people that have experience in buying board games for gifting and conducted 6 user interviews. The goal was to learn what users are thinking while buying board games online.
Main takeaways from user interviews:
1. Users are looking to buy gifts more often than buying for themselves.
2. Users don't have a specific board game in mind when they start to shop.
3. Users were considering the following aspects while searching for a gift: age group, latest trends, classics, etc. depending on the occasion they are shopping for.
The second step was to understand what the users were experiencing when they were shopping on the Uncle's Games website, what was working, and what were the pain points.
I conducted usability testing of the current website with the same set of 6 users and asked them to walk me through their buying process - how they would purchase a gift keeping a specific friend in mind.
Main takeaways from usability testing of current website:
1. Users found the look very crowded and confusing because of how the promotions and products were organized.
2. Users found the red alert "Not Available Online" for most products very disappointing.
3. Users were frustrated that they could not locate the Sort By option easily.
4. Users found themselves hopping over to other online sources to know more about the game- for example how the game setup looks, what is included in the box, how many players can play it, etc.
5. Users thought that the checkout process looked untrustworthy as it did not include popular options like PayPal.
6. Currently curbside pickup could only be arranged through a phone call, users found that inadequate as they would prefer to place orders online even when stores are closed.
7. Users would welcome the Wishlist option to organize and share their finds.
User Interviews and Usability tests of Uncle's Games website provided me with clear goals:
-
Improving navigation, product presentation, and checkout.
-
Adding new features to recommend relevant products, and to organize & share Wishlists.
Market Research
The next step was to see what our competitors were doing. I researched the websites of a local board game store, local departmental stores(Fred Meyer, Target), and an online Amazon store. I also compared it with the website of Dick's sporting goods who have a local shop nearby and a robust online presence.
The goal was to uncover opportunities and facilitate feature prioritization.
1. Visible recommendations on landing pages to guide users.
2. Simple and intuitive navigation and categorized filters to help users find relevant products faster
3. Detailed board game description accompanied with visuals.
4. Popular checkout processes and tracking methods.
Card Sort
Based on the research so far, I needed to find out what categories users were looking for the most. I conducted a card sort to find out how users grouped these game categories.
Screenshot of current menu for Games category, users found this overwhelming
Define
The next step was to define the user base.
I synthesized the user interviews and usability test results to identify the main user base and secondary user base. I created the primary persona Scott and a secondary persona Sarah, who represent the needs and goals of these user bases.
Next, I looked at Scott's journey map from the business perspective. Mapping of user touchpoints with support processes revealed missing service components.
What opportunities can be captured while I seek to improve Scott's and Sarah’s experience?
The Opportunities uncovered:
-
Scope to design a clean user interface by showcasing the most used features
-
Make product listings useful by providing meaningful descriptions, photos of game setup/ guide, etc.
-
Make products reviews and ratings visible.
-
Include most used payment methods like PayPal, Credit card, etc.
-
Engage users by providing a way to share ratings and reviews.
Site Map
Based on the findings of the Card sort conducted to determine what users needed easy access for, I organized key categories into Top Navbar, Right Header, and Side Panel. I proposed Featured content for the landing page and the second page for respective categories, to guide Scott and Sarah to find relevant products faster.
The new sitemap will provide multiple ways for Scott and Sarah to find desired products easily depending on their various needs.
Ideate
I started this phase with quick sketches to test out ideas for possible solutions and to get inspiration for new features such as Wishlist and simplified checkout. Here is the set of sketches that I drew and then developed the set of mid-fidelity wireframes.
Visual Design
Color Guide
Since the local community loves Uncle's Games store, its unique history, and is familiar with the existing logo, I built my new site with the color from its existing well-known logo.
Featured Content
Designing User Interaction based on Site map:
Top Navigation and Menu Bar
Sort and Filter Menu
Keeping User Goals Front and Center!
User flow for Scott was designed by keeping his needs and goals in mind, to complete the task of finding an appropriate gift for a specific kid in his life. This user flow helped in determining required screens and designing related features.
Designing User Interaction based on card sort results and Site map:
User flow for Sarah was designed by keeping her needs and goals in mind, to complete the task of finding gifts and creating a Wishlist for her child's upcoming birthday, and sharing the wishlist with her friends and family. This user flow helped in determining required screens and designing related features.
designing Mid-fidelity Prototype
Users were frustrated with cluttered navigation and often left halfway through browsing because of a lack of clear messages about availability. So proposed a new clean navbar based on open card sort conducted for that purpose.
The recommendations for New Arrivals, Trending Games, and such were highlighted on the top of the screen to facilitate easy product discovery.
Designed clear Pick it Up and Ship It buttons for ease of ordering based on user preference.
Created a simplified checkout page and made accepted Payment options clearly visible to gain users' trust. Users can choose from widely used payment methods like Paypal/ApplePay in addition to Card payments.
A designed page for Wishlist, feature users who would like to share it with friends and family for events like birthday parties.
The proposed Product page includes pictures of the game in action, set up, and a guide to give a how-to-play overview to users.
Testing
Time to check if our design delivered!
I recruited 5 new users who had experience in buying board games as gifts and conducted usability tests of the proposed prototype to see if they were able to successfully complete Scott's and Sarah's tasks.
I followed that up with a System usability survey with each user which helped me measure the effectiveness of the proposed solution.
.png)
All the action items from usability testing were resolved in Design Iteration and the prototype was updated to reflect the changes.
Conclusion
Takeaway
I believe that the proposal for the new website for Uncle's Games will help acquire new customers, increase user retention thereby increasing sales.
Next Steps
-
Iterate on the prototype and create high-fidelity mockup.
-
Include integration with Uncle's Games' loyalty program.
-
Given the unique and vast collection of Board Games at the client stores, there is an opportunity for marketing and testing of Game Library Service.