Kinder Haus Toys
Product
Web Application
Timeline
2 Weeks
My Role
Challenge
UX/UI Designer
School project unallowed to contact owner
Introduction
Did you know, online toy shopping is up by 31%, as a result of the pandemic.
I noticed this shift in my personal life. As a child I would go into toy stores to shop and now I see the children around me shopping online.
Who is Kinder Haus Toys?
Kinder Haus Toys is a store that is homey and committed to their community.
They may have excellent in store customer service, but their website does not meet users needs and expectations.
Initial Problem
The Kinder Haus Toys website is outdated and not quite usable.
Initial Goal
To enhance user satisfaction and improve the overall user experience with the, “Kinder Haus Toys” website.
My Role
As the UX/UI Designer for this project my primary responsibilities included:
-
Conducting analysis on the site and competing sites, usability testing, and customer journey maps
-
Developing site map, wireframes, user interface, and prototyping.
Research
Research Process
To discover the unique and valuable features that set us apart from the competition.
​
We leveraged a combination of research methods including business analysis, competitive analysis, screener surveys, user interviews, affinity maps, and persona development.
01.
Heuristic Violations
02.
Competitive Analysis
03.
Usability Testing
04.
Persona
05.
Journey Map
Heuristic Violations
Foremost I explored the Kinder Haus Toys website and found some violations.
​
Not only is the site's design outdated, the information is as well.
It is also text and image heavy.
There are two global navigations where there is meant to be one.
The tabs within those seem to be mislabeled and unimportant.
​
There are four additional violations that stood out.
-
No cart or checkout
-
Few image captions
-
Few product descriptions
-
No search engine
.png)
.png)
.png)
_edited.jpg){kind=small}
Violation 04.
Violation 01.
Violation 02. & 03.
Competitive Analysis
Secondly I did a Competitive Analysis and I collected data from 5 websites.
I discovered that all the competing websites incorporate the four important features that the Kinder Haus Toys site violated.
-
No cart or checkout
-
Few image captions
-
No search engine
-
Few product descriptions
​
Furthermore I found that many competitors have accounts, reviews, wish-lists, filters, and a customer support system.
Competitive Analysis
_edited.jpg)
Heuristic Violations
_edited.jpg)
Usability Testing
-
Proceedingly I conducted 5 usability tests to validate the information I collected and more importantly, see the user's behaviors and understand how they feel when navigating the Kinder Haus Toys website.
-
I want to focus on their happy paths and the places where they get stuck.
​
With these goals in mind, I created a test plan containing 5 tasks.
​
User Tasks
-
It is your cousin's birthday, she's a 5-year-old girl. Can you find something for her to play with?
-
You want to find a class for you and your nephew. Take a look at the site and book a class.
-
Find reading material for a 10-year-old on mystery and purchase it.
-
Search for frequently bought items.
-
Look for a brown bear, under $20
The following are three of the tasks that stood out.
_edited_edited.jpg)
-
Finding a toy should be an easy task to accomplish as this is a toy store's website. Nonetheless, the users rated this task a 4/5 (5 being the hardest), since the tab categorized by age was labeled popular items.
-
Only 20% (one) of the users were able to locate frequently bought items. The remaining 80% (four) of them thought that the popular items tab was the right place. In reality, frequently bought items are to be found in the tab labeled tips, which is quite misleading.
-
Purchasing a mystery book took 2:00 minutes on average. There is a tab called books, but shoppers do not have the option to filter by age or genre. Even if a user would find a book they can not successfully complete this task, as there is no add to cart feature.
Journey Map
It is your cousin's birthday, she's a 5 year old girl. Can you find something
for her to play with?
Take a look into what a user's journey would consist of for this task.
.png)
.png)
A shopper starts off looking for a toy suitable for a 5-year-old
-
They click on the Toys tab to find pictures of the store and no links to the products
-
Being frustrated, the user looks for a search engine
With none in site it only adds to their frustration -
They decide to click on the Popular Items tab
Shockingly this section is categorized by age and products are individually displayed -
Relieved the shopper chooses an age bracket, clicks on a toy
Sadly they realize there is no way to purchase this item -
Lastly, the user leaves the site upset and unaccomplished
User Quotes
-
“Can I leave this site and go to Amazon?”
-
“Seems like you can’t buy anything. Very confusing!”
-
“The titles don’t make sense. I can’t read the store's name!”
-
“The events are probably suspended because they are not good.”
-
“Is this an educational site or a bookstore?”
-
“No search bar. Mission not accomplished.”
Project Goals
Problem
Shoppers of the "Kinder Haus Toys" website, struggle to navigate and understand the site since it lacks e-commerce functionality, product information, and information architecture.
Goal
Users need a more conventional and intuitive process for successfully locating and purchasing products they want.
Feature Recommendations
-
a purchasing feature
pricing, a cart, add to cart, and checkout
-
a revised navigation system
add a search bar, useful and understandable tabs, and
filtering tasks (age, new, trending, price, brand)
-
adhere to accessibility needs
focus states, text legibility, image, and product descriptions
-
account, reviews, ratings, and wish-list
Design
Design Process
Taking the research and the users needs I created the design process.
This part involves creating information architecture, sketching, and wireframing to insure the prototype is easy to navigate and understand.
01.
Site Map
02.
Sketches
03.
Wireframes
04.
Figma Prototype
Site Map
Created from 6 card sorts and 6 tree sorts in which users categorized data into sections they deemed similar for the website's structure.​
​
ex: markers, paper, and pencil were placed into Arts & Crafts category
.png)
Paper Prototype
Sketched out the frames utilizing the usability tests, site map, and competitive analysis.
-
The home page consists of understandable tabs and quick ways to shop
-
The product listing page has a search engine and utilizes filters
-
The product detail page allows you to view the product and its descriptions
.png)
Home Page Evolution
From the current website to the new prototype.
​
(See image and corresponding numbers)
​
Current Website
-
two global navigations with unclear tabs
-
no cart and no search
(not balanced, font is illegible, and it is outdated) -
one global navigation with clear and understandable tabs
-
added a cart and a search
-
​
​
New Prototype
3. one global navigation with clear and understandable tabs
4. added a cart and a search
(well balanced, readable text, modern look)
.png)
01
02
03
04
Prototype
Taking into account research, the needed features, and feedback from usability tests, final adjustments were made to the prototype.
​
The end product is something that's not only useful and backed by research, but also supplies the users with a smooth and useful shopping experience.
Prototype Frames
(See image and corresponding numbers)
Key Features
-
useful & understandable tabs
-
product listings with descriptions
-
cart and checkout process
-
Designed one global navigation with four tabs in the place of the two global navigations. This takes away any confusion or decision fatigue when narrowing down toys.
-
Added a search option for quick and easy access
-
Included product images, captions and descriptions to easily see and understand what items the site has
-
Created a cart, an add to cart and a checkout for the products
01
02
03
04
Video walkthrough of Kinder Haus Toys prototype
Next Steps
-
Create Persona
-
Usability Testing
-
Iterate Prototype
Takeaways
-
During the usability tests, take notes and calculate time on task to save time