Designing an e-commerce website for a Toy store — UX case study
Tools Used: Figma, Miro, Sketch.
Target Device: Desktop
For the first work on Ironhack as a group of 4 people from different nationalities, we received the briefing and worked for 2 weeks designing a new website for a local Toy Story in Amsterdam. Focusing our efforts on delivering great shopping experiences in order to find solutions for the end-users.
The Client
As a local Toy Store based in Amsterdam, the shop carries the whole range of new classic toys with a wide range of toys, from wooden ride-on toys hanging from the ceiling, musical instruments, miniatures for dolls houses, dress-up clothes, wooden toys for babies to train sets (and everything in between).
Empathize
To start the process we have to go straightforward for our business and understanding the experience and customers emotions as a real live person in all their complexity.
With that in mind, we started visiting a local Toy Store to understand the business and generate a Business and Feature Analysis, which the results could enable us to know better what are the offer, possible problems, goals, and culture involving the toys universe.
As the second step of Empathize process, we decide to make a Lean Survey Canvas, inserting all the insights we had from the previous research.
Always remembering ourselves: WE ARE NOT THE USERS.
With the Lean Survey Canvas results on our hands, we could start to prepare questions for our quantitative and qualitative research, in order to better understand the audience we were working and “… as a way to identify new opportunities before you know what could be designed.” (Portigal, Steve — Interviewing Users)
For the quantitative analysis, we decided to look for potential online users sharing with them a survey with closed questions like:
— Have you purchased a toy in the past year?
— How often do you shop online?
— How do you choose your toy stores?
We got incredible 127 replies from potential Toys customers as parents, people who buy toys for their family and friends, people who buy toys for themself, etc.
For the qualitative research, we decided to go to potential users and perform interviews through an open-ended questionary which the objective was to find common user behaviors and pain-points.
Define
Based on the key findings, we started to ideate creating an Affinity Diagram organizing all the data we had from the qualitative and quantitative research. The results showed us that when users are buying online they look for reliable websites, convenience, more options, and referral. On the other hand for physical shops, the user likes the idea of having a real experience with the Toy before buying, checking the size, quality, remembering their childhood, etc.
HMW — How Might we
Taking the insights from customers and combining them with data and insights from the research we come up with 3 “How Might We” statements related to our project:
- HMW recreate the experience of “feeling” toys online?
- HMW make online shopping toys a fun experience?
- HMW convey trust and safety in their online experience?
Personas
Combining similar user needs, goals, habits and attitudes we created a primary and secondary persona:
- Jan, a family guy who like to give toys to kids on his family
- Claire, a mother who wants to buy good and safe Toys for her children
Brainstorm
Thinking about how we can improve the experience for users, we started brainstorming around the topic of Buying toys online. Looking on our personas and all data we had collected from the users, we could generate a bunch of ideas.
Mind Mapping
After discussing the results from the Brainstorming, we decide to go with “I like to touch and feel before I buy” as our main sentence when creating the user experience. For that, we made a representation of ideas on how we could recreate the physical feeling when buying online.
User Journey
“A customer journey map is a visualization of the process that a person goes through in order to accomplish a goal. It’s used for understanding and addressing customer needs and pain points.” (Nielsen Norman Group)
On this step we created the user path buying a toy online, finding goals, opportunities, problems, and touchpoints, thinking on the journey where:
Jan has a kid’s birthday party and he would like to buy a nice toy, more upmarket. A colleague informs him of a nice local toy shop that sells the kind of toys he’s looking for and good news they sell online. He goes to their website but it’s very confusing and not trustworthy. He finds another website where he buys the toy.
Problem Statement and Hypothesis Statement
From all the past materials we created a problem and hypothesis statement, created based on the pain-points and opportunities we uncovered during the research phase and was an important step defining the project’s main objective.
Problem Statement
Online toy store customers need to be able to have a good sense of feeling and understanding the quality of the toys while experiencing the fun and essence of a local physical toy shop because buying toys online is an impersonal experience that should be improved.
Hypothesis Statement
We believe that offering a tangible feeling of toys and toy store experience will attract happier and repeat customers. We will know if we are right if we see an increase in positive reviews and ratings.
Moscow
To create a Minimal Value product, we need to have sufficient features to satisfy early adopters. For that reason, we worked with the Moscow technique, in order to decide what’s really valuable for the project and try to create special features.
Based on the research we decide to create a special feature for our product, with videos reviews from the users posted on their social media accounts using the hashtag #playwithkleineeland. Those videos are going to be published on the website curated by the company.
Site Map
We started to develop the Information Architecture defining the overarching structure and relationship between all areas of a website. We made a Site Map in order to create the relationship between pages in a site and document the organization, navigation, and labeling.
User Flow
In order to understand the path of the user to complete the task to buy a toy, we created a User Flow with the main steps for the user.
Ideate
To start the process of ideate we created a paper prototype based on all the information architecture we had set up.
We tested the paper prototype with a few potential users, where we could identify pain points giving us important insights.
Mid-fidelity prototype
In order to digitalize our sketches, we also worked in a mid-fidelity prototype as you can see in the video below.
Conclusion
As a result, we discover the users need to have some way to discover the toy they would like to buy. In a physical store, they can go and read the boxes, try some of the toys, and also as for advice from the Toy Store employees. In an online environment, they need somehow to have the same experience, for that we decide to go with video reviews, sharing other user experiences and give more clarity about what is the product and the feedback about it.
About the process of building this UX Case, I can say that was a great experience to work in a Team that followed agile principles. We could do stand-ups every day and also retrospectives about the week in a sprint of 2 weeks. This way we could organize our task, share work and finish our goals which you can see the results in this article.
For the next steps, we imagine working on the midi-fidelity prototype and conduct more usability tests in order to then have better insights and build the High-fidelity prototype.
