CONCEPTUAL CASE STUDY

Magic Toy Shop eCommerce Site

General Assembly conceptual project to design an e-commerce website for a local toy shop.

 

The Problem

The owners need to modernize and grow their business while retaining the charm and personality of the brick & mortar shopping experience.

 

The Solution

An e-commerce website designed to showcase the shop's unique product line, build a sense of community and provide shoppers with a clean, intuitive and easy to navigate interface.

My Role

Sole designer for the entire project.

DESIGN PROCESS

Information architecture / card sorting

The Magic Toy Shop provided 100 of their top-selling items to include in the category taxonomy. To kick off the project, two card sorting exercises were done which helped clarify shoppers' mental models and establish site navigation.

 

Findings:

 

  • Most people categorized by product type

  • A subset categorized by age

  • Preschool toys spanned multiple categories

First pass - card sorting
First pass - card sorting

The first card sorting exercise was based on my mental model and input from a cluster analysis done by the class online. The initial outcome was 13 top-level categories and 12 sub-categories.

Second pass - card sorting
Second pass - card sorting

I brought in several friends and family members who frequently shop for their own kids to get more input. The number of top-level categories decreased to 8 and sub-categories increased to 19.

Final site map
Final site map

In the final simplified site map, the product detail page is never more than two levels deep after login.

First pass - card sorting
First pass - card sorting

The first card sorting exercise was based on my mental model and input from a cluster analysis done by the class online. The initial outcome was 13 top-level categories and 12 sub-categories.

1/4
User scenarios & flows
 
​For this project I was provided three personas and user scenarios. The user needs vary for each persona, but three primary areas stood out:

 

  • Finding products must be easy and intuitive

  • Checkout must be quick and flexible

  • Product descriptions and reviews must be readily accessible

 

There were also some secondary requirements:

 

  • Suggested products

  • Social sharing

  • Responsive design

 

The user flows reflect the needs of each persona, and reinforce the site map structure.

Personas
Personas

The personas represent three user types with different needs and technical abilities.

User scenario & flow (John)
User scenario & flow (John)

John is a tech savvy single dad who's short on time. He wants to find a Lego Star Wars Millennium Falcon for his 14 year old daughter. He locates the product category easily from the home page and uses the brand filter to narrow the results. He finds the item, and checks out from the product detail page.

Checkout flow
Checkout flow

The checkout process allows shoppers who have not already logged in three choices: - Log in and use saved payment and shipping information - Create an account and save the information for later - Check out as guest

Personas
Personas

The personas represent three user types with different needs and technical abilities.

1/5
Sketching layout ideas
 

While I was refining the site map I started sketching the home page, category page and checkout pages. I found I was making small changes to the site map as I sketched so it made sense to do it in parallel. To keep things simple for shoppers, the layout follows ecommerce conventions with a tabbed category menu at the top.

 

The home page is modular and is designed to allow Magic Toy Shop the flexibility to adapt to seasonality and trends.

Home page - first iteration
Home page - first iteration

A conventional tabbed interface was used to make browsing as easy as possible. After user testing, the blog was eliminated and "Gifts for Magicians" was changed as it was too specific for the home page.

Category page - first iteration
Category page - first iteration

The initial sketch of the category page included a list and gallery view. This was changed to gallery style only in the final iteration to keep the project in scope.

Checkout first iteration
Checkout first iteration

The first (very) rough sketch of the checkout flow included Paypal as a payment option and the create account option at the beginning of the flow. These were eliminated later to keep the project in scope.

Home page - first iteration
Home page - first iteration

A conventional tabbed interface was used to make browsing as easy as possible. After user testing, the blog was eliminated and "Gifts for Magicians" was changed as it was too specific for the home page.

1/3
Digital wireframes & prototype

After the design ideas were sketched out and tested, I created a digital version to use for a clickable prototype. To keep the project in scope and because of a tight timeline, the prototype follows the "happy path" for each persona.

 

Wireframes were created in OmniGraffle, and the prototype was developed in InVision.

 

Clickable Prototype

Home page wireframe
Home page wireframe

The digital version of the home page includes a "Kid Picks" section to promote a sense of community and to help parents find gifts based on what other kids like.

Category list page
Category list page

The category list page is defaulted to gallery style based on competitive research and user feedback. Filters and sorting capabilities are included.

Purchase confirmation
Purchase confirmation

After the order is successfully submitted, a confirmation page is displayed with a print option.

Home page wireframe
Home page wireframe

The digital version of the home page includes a "Kid Picks" section to promote a sense of community and to help parents find gifts based on what other kids like.

1/8