UX Case Study:
The Magic Toy Shop

E-Commerce Website for a Traditional Toy Shop



PROJECT OVERVIEW

The Magic Toy Shop specializes in new and vintage toys and wants to capitalize on the success of their brick and mortar store by introducing an e-commerce website. This was a project for my UX Design Immersive Class.

MY ROLE

UX Designer and Researcher

TIMELINE

Two weeks.

DESIGN GOAL

Create a preliminary design for an e-commerce website focused on selling toys.

DESIGN STRATEGY

Gain a competitive advantage by using UX design methods to focus on the needs of the users to create a website that inspires trust and is fun and easy to use.

DESIGN TOOLS

Paper & Stickies
Personas
Affinity Map
User Interviews
Card Sorting
Competitive Analysis
User Flows
Sitemaps
Wireframing
Usability Testing
Omnigraffle
InVision



STEP 1

RESEARCH - COMPETITIVE ANALYSIS

The next step in this project was perform a competitive analysis by diving into the websites of other online toy stores.

I looked at both large retailers like ToysRUs and small sites such as Fat Brain Toys and HearthSong.

AH-HA Moment

Many of the toy websites I evaluated were frustrating in some way. This lead to the conclusion that there was a chance for a small toy store to complete online by doing a better job of creating an experience that met the needs of the users in a way that was easy and satisfying.



STEP 2

RESEARCH - SITE VISIT

After reviewing competitor websites, I visited a local independent toy store to get a feel for the types of products that the Magic Toy Shop sells.






Images from toy store site visit



STEP 3

USED RESEARCH TO CREATE LIST OF WEBSITE FEATURES

After reviewing competitor websites, I went back and dissected the personas to understand what users wanted and needed from a website selling toys.

There were 3 parts to this step:
• Grouped the user's needs and pain into one chart.

• Created an affinity map based on user's needs, pain, and how we can serve.

• Created a feature set for the website using the affinity map.



Turning persona research into an affinity map and website feature list.



STEP 4

CARD SORTING

Using the list of products sold, I performed several open and closed card sorts to put the products into categories. I then had both kids and adults perform card sorts and compared them with my results.

AH-HA Moment

When I first started the card sort process, I thought it was going to be vital in determining the top level navigation choices for the website. It turned out it didn't help with the top level nav but it did inform the choices for the product filters.

I also discovered that kids had categories that I would never have thought of such as "On the go" toys. Which were toys that were small enough to put in your pocket and take with you.



Images from manual and digital card sorting



STEP 5

USER FLOWS

I made several user flows to understand the tasks that users would need to complete on the website.



Images from manual and digital card sorting



STEP 6

SITE MAP

I used the knowledge gained from creating user flows to create a sitemap.



Images from manual and digital card sorting



STEP 7

PAPER PROTOTYPES

One of my favorite methods to rapidly create prototypes is by using sticky notes on paper. This method allows for very fast testing and iterating.

There were several times during testing where I was able to remove sticks and retest instantly.

USER TESTING

After creating the first round of paper protototypes, I asked several potential users to test the prototypes and give feedback.

AH-HA MOMENT

During testing I learned that users were not interested in seeing products recommended by. the staff. They trusted the reviews of customers more than staff recommendations.

ITERATIONS

Using what I learned from the user testing, I iterated the design of the website several times.

Images of paper prototypes



STEP 8

DIGITAL WIREFRAMES

After several rounds of testing and iterating, I used Omnigraffle to create digital wireframes.










Digital wireframes created in Omnigraffle



STEP 9

CREATED CLICKABLE PROTOTYPE

To make a clickable prototype,
I exported all of the wireframes from
Omnigraffle into Invision and added
interactivity.






CONCLUSIONS

• I do think that a small toy store has a chance to compete online by creating a website that is easy to navigate and serves the needs of the customers.

• Creating a website that feels trustworthy and gives the feeling that it is easy to return items is a priority.

• All of the current toy website I tested don't serve the needs of kids well. You have to have an account to be able to make a wish list. This makes it difficult for kids to make a wish list and share it.