The Magic Toy Shop

Project Overview

This was a project for General Assembly.

The Magic Toy Shop is a bricks & mortar store ready to expand into the online space. They are known for their curated selection of toys that appeal to both adults and children as well as their unique personality and customer service. The focus of this project was to design information architecture that ensures these brand characteristics translate to their online presence.

My Role

  • Competitive analysis
  • User interviews
  • Open card sorting
  • User flows
  • Sketching
  • Information architecture
  • Usability testing
  • Wireframes
  • Presentation to client

Discovery & Definition

Problem statement

Design an eCommerce site which will increase sales while also maintaining brand reputation. Focus on information architecture.

User research

The client has already conducted market research on their customers and created personas. Therefore, this project was not focused on user research.

I conducted 4 interviews, including one with the 'hobbyist' persona type as I wanted deeper insights into how they find and decide to purchase a collectible.

Context behind a collectible, reviews and fine details are important when considering a purchase.
People I interviewed

Open card sorting

Online card sort report
Physical card sorting chaos

Conducted both physical and online open card sorts.

The online card sort was done on Concept Codify and 20 users participated.

The physical card sort was completed by 2 users.

Age related was the most broad category, with the rest being quite specific.

User flows

User flow examples

User flows were created for the following processes:

  • Finding a product both through the navigation menu and the search bar
  • Checkout process for members
  • Checkout process for guests

Development

Sketching, wireframes and ideation

Sketching and iteration
Testing the designs
Some feedback received for the wireframes

I started off with some sketching to test out a few concepts and to determine a rough site map to kick off the information architecture design. This underwent 3 rounds of iterations.

I then refined these and put them into an interactive prototype via AXURE in wireframe format.

These wireframes were tested further in 2 rounds of iteration.

Insights

Users overwhelmingly preferred a mega menu as opposed to a simplied menu as they felt like the had more control and visibility over the products.
As age was the most common theme during the card sort, this was moved to the top level navigation. The other categories were very specific and numerous and were hence moved into second level navigation. Users responded positively to this during testing.
Hobbyists are dependent on online reviews as collectibles are not easily found in a bricks-and-mortar store. Trust of the reviewer was therefore important. The home page header space is dedicated to featured articles to appeal to this set of users.

The navigation menu

Taking into consideration the research, I decided on this navigation structure which balances user and business needs.

Navigation structure

Delivery

I presented the research, design thinking and interactive prototype.

Me presenting