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.


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.




  • 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