logo

 

Once upon a… Toy Shop is a Brick and Mortar business in San Francisco. They are looking to expand their presence into the world of e-commerce without losing their small shop identity. 


Solution

Create an e-commerce site which balances both the user and business needs. 


Design Process

Duration: 
2 Weeks
Solo Project

Tools
Sketch 3
InVision
OmniGraffle
OptimalSort

Deliverables
High fidelity wireframes
Clickable prototype
Presentation to client

Methods


1. Discover

Understanding Users

Dissect personas for key insights into necessary design features

The business provided me with 3 personas to consider in the design process. I dissected the key take-aways for a seamless user experience.

Key Take Aways

  • Ability to submit product reviews
  • Fair pricing and flexible shipping options
  • Record of past purchases
  • Suggestions based on past purchases
  • Understanding of age/difficulty level of products 
  • Access to customer services
  • Knowing what's new on repeat visits
  • Being reassured by familiar brand names
  • Quick checkout process

 

Balancing Business and User Needs

Business and user needs must be considered equally important to the outcome

I interviewed key stakeholders to understand the necessary features for the business.

 

Competitive Analysis

Looked at features and functions for inspiration

I reviewed the strengths and weaknesses of the sites to get inspiration for my design. I considered the site heuristics to to apply good design principles to help inform and guide my design decisions. 


2. Define

Card Sorting

A taxonomy for toys was key to defining a fluid user journey

I conducted an open card sort to determine how to categorize inventory in the most accessible way. I conducted a closed card sort with the online program OptimalSort to ask potential users how they would distribute toys amongst the categories. I used this information to help inform the decision for the most seamless experience.

The card sort results led to defining the organization of products

 

User Flows

Documenting the user flows were necessary to avoid design pitfalls

Documenting the step-by-step process provided the guidance to deliver a direct and fluid experience. They defined the how and why of our different users. 

 Scenario: Father visits the website to purchase a Lego Millenium Falcon for his daughter.

Scenario: Father visits the website to purchase a Lego Millenium Falcon for his daughter.

 Scenario: Grandmother returns to the website looking for a beginner level magic trick for her grandson.

Scenario: Grandmother returns to the website looking for a beginner level magic trick for her grandson.

Scenario: Retro-collectior has selected an Evel Knievel Stunt Cycle, and now wants to complete the checkout process.

 

Sitemap

(click image to enlarge)

User flows and cart sorting came together to inform the site map

 


3. Develop

Ideation: Initial Sketches

Key features defined by the users and business were integrated into the initial sketches

I conducted usability testing with 4 people. The feedback was incorporated into the wireframes. 

 

Wireframes

Usability testing gave necessary feedback to move to the wireframe stage 

Check out the clickable prototype: https://invis.io/BJ8YUKN6W


4. Next Steps

 
  • Responsive Site: Creating a responsive site is a necessary step to making the site accessible to users from all devices.
  • Content Strategy: I need to discuss the content strategy with the business to make sure the site matches their available resources. 
  • Newsletter: I would recommend the store consider having a newsletter for loyalty customers to provide them with coupons and announce new products based on their interests.