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

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.

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.

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

  • Twitter - Grey Circle
  • LinkedIn - Grey Circle
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.