Magic Toy Shop – UX Design

The Magic Toy Shop is an e-commerce solution for a boutique toy retailer, specializing in traditional toys, but also offering a full range of new and vintage  products.

A clickable prototype of the project is available here.

Design prompt

At the immersive UX Design class I attended at General Assembly, I was tasked with creating an ecommerce site for a boutique toy retailer.

My involvement

I was responsible for the production of every aspect of this project.

Early Sketches

I come from a boutique e-commerce background, so I felt like it would be important to draw on that experience in an effort to shape the initial sketches while remaining as open as possible in terms of incorporating the heuristics I was learning about in class.

Site Mapping

I put together the above sitemap for the particuluar user flow I wanted to showcase (that of selecting a product to purchase and then proceeding through the checkout process). The sitemap proved to be a valuable document and reference point. At times it functioned almost like a checklist for the needs I needed to address.

Personas

We were provided with the top three personas for this project. Drawing from my personal network — I know a few people in the toy business — I felt that there was a missing persona, that of the enthusiastic kid. So I created Noah, who’s the kind of kid who’s interested not only in magic, but also in anything arcane and obscure. A young obsessive. Noah helped inform the process at least as much as the other personas.

User Interviews

It was important to the project for me to interview people from my own network. I asked a lot of the parents that I know about the way the go about buying toys. Sometimes I found out some pretty funny stuff. Like, for instance, how one father I know goes about buying a present for his one-year-old daughter:

Pain Points

My next step was to combine all the pain points that I had gathered from the personas and the interviews I conducted, so I could create a design that considered all of them.

Wireframing & Prototyping

I made the wireframes with Omnigraffle. I was, at that point, new to the tool, but I like the way they came out. After I had all the screens I wanted, I exported them from Omnigraffle into Photoshop, so I could fine-tune them. Then I put them in InVision so I could have a clickable, interactive prototype I could test.

Then I tested my design!

Usability Testing & Reiteration

Poring over the interview videos, I made the appropriate changes to streamline the user flow. I then validated those changes with another round of usability testing. I’m pleased with the final product, which you can see for yourself here.