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
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.