The Treasure Chest

Creating an e-commerce website for a mom-and-pop toy store. 

The Challenge
Mom and Pop want a store website
The Treasure Chest is a brick-and-mortar vintage toy and magic shop looking for a modern update.  Mom and Pop are looking to build an e-commerce site for their toy store.  With the personas provided, I was to create user flows, sketches, wireframes, and a detailed working prototype to capture their vision while thinking of users the entire time. 
The Problem
Information needs to be organized while still letting personality shine through 
The Treasure Chest has a wide variety of toys and magic tricks. I needed to categorize the information as best as possible to make the website navigable while also allowing the mom-and-pop feel of the toy store to shine through.  
The Solution
Let's keep things clean while adding personal touches
After conducting research and doing various card sorting exercises, I found a way to organize toy categories that was intuitive to users.  I created a login screen and an easy checkout process as inspired by the personas.  I also added personal touches from Mom and Pop to create a website with a true feeling of their brand. The best way to express my design intent and the flow of the checkout process was by creating a prototype.
The Design
Home screen
The home screen showcases beautiful images of The Treasure Chest's products.  The Search function and "Toys" menu item are hover dropdowns.  The website home page is meant to be clean and welcoming while allowing users the option to login or create an account.
Toy filters
Toys can be filitered by age range, price, and reviews.  When viewing toys, people can quickly add a toy to their cart or wishlist by expanding the quick select menu. 
Toy pages and information
Selecting a toy allows for people to read more information on an item.  They can read reviews, specs, add it to their wishlist/cart, or share it on social media.  Each toy has a quote from Mom or Pop to increase the feel and branding of the Treasure Chest throughout the site.  
Easy checkout and payment process
The checkout process is kept clean to encourage users to buy products. A phone number is readily available at all times to aid those who may need assistance while checking out.  A progress bar let's people know how close they are to being checked out.
The Process
Competitive and comparative analysis
I studied a number of websites to see what I might try implementing on The Treasure Chest.  I spoke with the owners of the company in regards to what I thought some sites did or didn't do well.  I looked at both direct competitors of the Treasure Chest and non-related e-commerce websites. 
Information architecture
I had people do various card sorting exercises to understand how people categorized different toys.  With over 1,000 toys, it's important to categorize toys in a clear and intuitive manner.  Below is a result of one tester's card sorting exercise for a 100-toy sample. 
User flows
User flows were created for each of the three personas.  The user flow below is a detailed account for the steps a person can take when finding and then purchasing a toy.  
Click to open image in new tab 
Next Steps
Visuals and branding
Next steps for The Treasure Chest could include:
  • Branding through visual design
  • Creating a mobile version of the website
  • Discussions with engineers
Work

WebMD

PiikUp

Landscape Architecture

© 2018 Micheline Chagniot UX Design. Created with Wix.com