UX Case Study: Ye Olde Kinder Haus Toys, No Longer
Project Overview
My goal is to redesign Kinder Haus Toy’s e-commerce site in order to implement information architecture best practices.
My Role
This rapid prototyping project is a 10 day sprint which I completed on my own.
Getting Started
First of all, who is Kinder Haus Toys?
On their About page they state, “Kinder Haus Toys is an old-fashioned store that stands for service, selection, and style. The array of high quality children’s products includes toys, books, hobbies, crafts, clothes, shoes, and sporting goods.”
Kinder Haus is family run and prides themselves on being committed to their community. However, it is not much of a service to their community to have a frustrating website to navigate. That is where I come in to help them revitalize and improve their site.
Heuristic Analysis
In order to see what Kinder Haus is doing well or poorly so far, I utilize heuristic analyses to identify what I consider major pain points.
In this heuristic analysis, the most concerning issues are that the site has no way to purchase items online, the lack of a search bar, and also lacking standard filtering options for their products. These findings are a result of my struggles when trying to navigate Kinder Haus’s website, but now I have to verify with potential users.
Research
Usability Testing
For this project, I conducted three usability tests and asked them questions to observe how they navigate the site. I found that all users had common pain points that matched with the heuristic analysis.
For example, the navigation bar stalls users from using the site, as they feel either confused or overwhelmed by the options. A feature that is missing that the users expect is a search function in order to find a product. Users feel frustration due to the limited filter options and some are perplexed by the lack of stock available.
Other topics of concern I did not expect include interest in the price of activities that are offered at the store. Some users did feel limited by the smaller quantity of items that are listed on the site, while others did not view it as much of a problem.
Card sorts
Next I sent out open card sorts with all of the navigation options listed on the site. Based on their organization I created a sitemap of what the majority of people sorted the items under.
In order to verify this sitemap I proceeded to do closed card sorts with the primary navigation and local navigation that users chose in the open card sorts.
In the closed card sort, nearly all testers sorted both Newsletter and Blog under Social Media instead of About Us. Users were also given Club Card as a separate item to sort and 2/3 testers ended up placing it under About Us.
Since the results were slightly different than what the open card sorts indicated, I adjusted my site map accordingly which can be seen below.
Competitive Analysis
Since the site’s existing filter options are not giving me much to work with, I turn to other toy sites to find what options are most commonly used.
Sites such as American Girl and Toys R Us show me that toy stores typically filter by age and toy type, so I made sure to integrate these best practices.
Design
Sketches and Wireframes
After completing my research, I sketched out some ideas of what the redesigned site should have, integrating my findings into the design. The first sketch shows the homepage, while the middle two depict what a product page should look like. Finally, the last image illustrates a product detail page.
My next step is to transform these sketches into wireframes, which I did in Figma. The homepage, product page, and product details page are shown in order below.
Feedback and Prototype
The feedback I received and incorporated are as follows:
- Reducing the size of the filter options (the large rectangle at the top of the product page) and align it with the “sort by” option.
- Small CTA button to “shop now” on the hero image that leads to a collection of products available that shoppers can choose from.
- Adding page numbers and the total number of products on the product page.
Prototype
Youtube walkthrough coming soon! For now, please check out the clickable prototype made on Figma.
Next Steps
To improve this prototype, I would want to build a checkout flow as well as what a page with filters selected would look like. I would also need more usability testing to validate the changes I make.
Some constraints to note are that I would have liked more time to research and further iterate my initial design. I hope to improve on and have a higher fidelity website prototype for Kinder Haus Toys.
