CONCEPTUAL CASE STUDY
Magic Toy Shop eCommerce Site
General Assembly conceptual project to design an e-commerce website for a local toy shop.
The owners need to modernize and grow their business while retaining the charm and personality of the brick & mortar shopping experience.
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.
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:
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.