The Corner Toy Store home page.

Project Brief

The Corner Toy Store, a fictional 30-year old brick and mortar in San Francisco wants to expand its business of "creating and recreating childhood memories" through an e-commerce website. Its products are hand-picked, and include vintage toys of the past, toys of today, and magic.

Challenge

The store has an eclectic assortment of products. The website needs a straightforward navigation that aids customers in discovering items to purchase, while maintaining the business's traditions and values — all in just two weeks.

Solution

A clear navigation and modular structure that aids users in understanding the layout as well as allows the business to easily update and maintain the site in the long term.

 

Finding The Right Toy Among All The Options

There are many options available when it comes to buying toys. In order to better understand how a website could both meet the the business objectives and the user's needs, I reviewed each persona provided by the business and drew out some key insights to guide my initial website designs. I coupled this with a competitive and comparative analysis to ensure the website utilizes the best designs.

 

Jason, The Awesome Dad

Persona of Jason, provided by the business.

Jason wants to be in the know about what is new on the toy market. He can benefit from clearly displayed, but not overwhelming featured products, best sellers, and new arrivals. This will in turn help the business sell promoted items as well as highlight their distinctive selection from other toy retailers.

Competitive/Comparative Analysis

Ambassador Toys does not provide any information to visitors about special products, leaving customers like Jason to search through the navigation. Trader Joe's on the other hand, does a great job highlighting a few new items to grab a visitor's attention without overwhelming them with too many promotions.

 

Jenny, My Favorite Grandma

Persona of Jenny, provided by the business.

Jenny is a price-conscious shopper looking for a skill-level specific magic trick for her grandson. She needs a website that allows her to filter toys so she can find an appropriate toy that she may not recognize.

She would also benefit from being able to contact someone if she needs help, thus any contact information needs to be prominently displayed. This also meets the business's goals as well, which prides itself on great customer service.

Competitive/Comparative Analysis

Toys'R'Us and Amazon provided a great example of filtered lists which I referred to in creating the filters available for sorting through the selection. With Amazon, I did find that too many filters can feel daunting. While The Collector's Cave did not display its contact information clearly to visitors, Aldea Home + Baby provided contact information prominently as part of the footer.

 

Daniel, The Eclectic Collector

Persona of Daniel, provided by the business.

Daniel is always on the go and checkout could make or break his buying decision. The check-out process should be as painless and quick as possible for customers. Providing the option to create an account will allow Daniel to have a quicker checkout with saved details. Not all guests will want to be required to create another account to manage, so keeping them in mind, a Guest Checkout is available. 

Competitive/Comparative Analysis

Tantrum has a very clear and easy to follow checkout process. The user's order is visible throughout the flow and there are not many pages to move through. One Kings Lane requires customers to create an account to buy items. This requirement can turn users away who do not want to create an account.

 

Getting Users From Start To Finish

For each persona, I considered how they would move through the website to accomplish a specific task. Understanding all the possible paths a visitor might take through the site helped me anticipate and plan for these routes to help visitors avoid feeling lost or frustrated while navigating the site.

 

An Eclectic Toy Store, Organized

Organizing the eclectic assortment of toys, magic, and collectables was vital to website's success. It would allow customers to easily navigate and locate an item without getting overwhelmed and leaving the site.

  • Week 1:  In order to structure the product options in the global navigation, I card sorted the top 100 selling items into similar groups and came up with a heading for each group. To ensure I wasn't grouping the items in a way that was confusing to users, I also conducted an open card sort with a volunteer. 
  • Week 2:  I received feedback during prototype testing that it felt like there were too many options to sort though in the navigation. I agreed and further narrowed the product options to eight product groups. 

Site map of The Corner Toy Store

 

From Messy Sketches To Refined Designs

Throughout the process, I received feedback which led the iterations on my designs. In the early stage of paper sketches, I incorporated feedback about the body of the Home page to make it a more distinct layout to distinguish it from the Product List page. And again, in the later stages of the wireframe prototype, I refined the product list filter options and the checkout process. 

Initial sketches.

Initial sketches.

Slightly higher fidelity sketches.

Slightly higher fidelity sketches.

Wireframes created in Sketch 3.

Wireframes created in Sketch 3.

 

Reflection

I was excited about jumping in and learning Sketch 3 for creating the wireframes and other deliverables, but that excitement also resulted in not taking the time to flesh out my sketches and receive more feedback on those initial designs. As a result, iterations I wanted to make to the wireframes took more time to implement than they would have on pen and paper. But on the bright side, having limited time and much to do, I did become quite proficient in Sketch 3 in a short time!