• treasure chest •

// problem

The treasure chest is a toy store that has been providing traditional toys for over 30 years. To keep up with the times, they are now offering a full range of hand-picked toys and would like to have a website to showcase their products while staying true to the brand’s roots.

They focus on hand-picked quality over quantity: “the biggest little store online”.


  • “Old school”, tradition, nostalgia
  • Specialty store, hand-picked items
  • Magic, personal, “little shop” feel
  • Fun & Creativity

// solution

The solution I propose is to create a website that is clean and easy to browse/search for toys for all user types. Capitalizing on the fun and creative aspect, the website will be visual without being too childish. The online shop would be easy to navigate through and on top of that, the customers will have an easy way to contact mom & pop for feedback/concerns or to request for a specific toy.

// thought process

I had to first truly understand what the Treasure Chest stands for, the brand identity, personality and the tradition it holds. I then had a competitive analysis for both small toy stores and larger companies to see the structure of their website, particularly the taxonomy, navigation, sitemap.

While I had a comparative analysis for the more specific details of features such as menus, quick view, shopping cart, checkout process, etc.

I then gathered user data from the three different personas to understand how the customers would go about navigating the website and what they want to do and what they want out of the website. The user flows below help understand their process:

  1. Jason who is a single dad buying toys for her daughter; wants to be a “cool dad”

2. Jenny is a grandmother buying magic-related toys for her grandson. She is a repeat customer. She likes to be rewarded for her shopping.

3. Daniel is a “hipster” toy collector who likes being able to share his new toys on social media.

Having these three personas have helped in prioritizing the features for the website considering their different needs and reconciling those needs into one seamless experience for ALL users.

All three personas essentially want a smooth and easy way to search and buy toys. The three main approach for that is to provide a “recommended toys” section for repeat customers, which will be based on their past purchases and related products; a search function which will make it easier for customers who know what they want; an easy way to browse for toys without being overwhelming.

// wireframe

  • Global Navigation Bar
  • Drop Down Menus
  • Search Bar, Sign In and Cart
  • Ticker for news and promos
  • Pop’s Favourites (recommended)
  • Physical store address
  • Social media
  • Contact Form

Product at a glance

  • Stepper
  • Add to Cart
  • Product Description
  • Product Details
  • Recommendations
  • Ratings
  • Feedback
  • More photos, close-up
  • Back button
  • Checkout
  • Shipping Address
  • Shipping Options
  • Billing Address
  • Payment
  • Order Confirmation
  • Recommended Products

// prototype

To view the prototype click here.

// reflection

This was my first real attempt in creating a website. The most important part of the process for me was to bridge the business needs and the user needs. There are certain features that the customers want to have and as a designer, I would like to provide that for them seeing it definitely makes for a better experience. However, I also had to assess whether it was realistic for the business to provide that particular feature; from observation and experience, it’s better to hold off on a particular feature than roll it out without ironing out all the details because that usually ends up with the users becoming even more frustrated.

Another aspect that I had to balance was time constraints — this pushed me to prioritize and really make decisions based on data at hand. I had spent a little more time than I would have liked on the user research and figuring out the information architecture and taxonomy which took up time from creating wireframes. Granted, it was also my first time to use Sketch3 and creating wireframes it was indeed a challenge. Being more familiar with the tools, I can now manage my time and also keep in mind how it will be applied on Sketch while visualizing and sketching (on paper).

Like what you read? Give joahnna a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.