UX/UI Case Study: Trotty Toys
Solo project | 2-week | eCommerce website | Concept
I was working individually to design a new eCommerce site for Trotty Toys — an independent toy shop located in the heart of Crouch End, a neighbourhood in north London known for its vibrant community and local shopping.
The challenge was to create an immaculate user flow, emphasising the checkout process so that the shop could compete with the largest eCommerce stores. It was also essential to develop a strong visual identity for the website that could help distinguish Trotty Toys from other independent online shops.
I started the project by discovering user needs and behaviours. I conducted four user interviews, and this process consisted of:
- Identifying potential users of the website (stage of life: young parents).
- Drafting a research plan and questions to be covered during the interview.
- Conducting the interviews remotely over Zoom.
Surprisingly, most valuable user data came from the goal-oriented question: What are the essential features of the online shop? And the opportunity questions at the end of the interview: If you could have a magic wand, what would your ideal local toy shop be like? If you could have a magic wand, what would your online shop be like?
I assumed that people value the customer service of the independent shops, and because of that, they will be very keen to use the live chat feature on the website. The interviews revealed that only the first part of the assumption was correct. The interviewees would most likely not use the live chat feature. Moreover, they could be quickly put off with potential selling techniques.
The significant trends in the collected data, reviled with affinity mapping, was that:
- Users need to find easily and quickly what they’re looking for (quotes grouped under Selecting Toys).
- Users tend to know what toys they are looking for exactly or at least a type of toy (Organising Products).
- Users like the quick payment process (Payment).
- Users don’t use reward systems unless it’s a major loyalty program (Reward System).
- Users would be interested in quality workshops on toys for their kids (Shop Events).
My competitive analysis included discovering visual design principles of the direct competitors. I compared websites of well established independent toy shops (my1styears.com, scandiborn.co.uk, themodernnursery.com) and noticed that they are very similar visually. There were all based on well-curated product photos and pastel colour palettes. From this observation, I concluded that Trotty Toys need a bold visual identity that will help to distinguish them from the competitors.
My analysis also included studying interactions of the direct and indirect competitors. I conducted a task analysis of the checkout process of large e-commerce websites (Amazon and one of the largest toys shops, Smyths) and one independent shop (scandiborn.co.uk). I discovered that the Amazon checkout process is the most efficient (fewer steps and fewer screens for the user) and decided to adopt this strategy for Trotty Toys.
A challenging part of the project was dealing with the broad inventory of toys. To understand how the users would organise the information, I used card sorting.
I conducted card sorting as follow:
- I prepared cards with the product manufacturer, product name, and a product photo.
- I sorted products and assigned them to initial categories.
- I run semi-closed card sorting via the internet. The initial categories were presented to the participants, but people could suggest their labels. I wanted to find out if participants will come up with different categories. I also wanted to avoid the risk of going with categories they do not wholly agree with.
- The tricky part of card sorting was to analyse a large amount of data in a short time. I examined the results by looking for trends. I identified two main trends: high agreement on most categories and less clarity on certain products.
- The valuable part of the process was to debrief two users afterwards to understand problems and the principles behind the sorting they conducted.
- If I had more time, I would conduct additional card sorting sessions with a limited number of cards (mostly of products on which there was no clarity in the first phase).
- The final primary categories helped me position the product pages in the website structure and add breadcrumbs navigation. Because of the complex nature of the inventory, I considered having one product in multiple categories, though it could mean that history-based breadcrumbs would have to be introduced.
From my research and interviews, I drew up the persona of the typical Trotty Toys website user — Fiona, the young parent, lives in Crouch End and values shopping in her local stores, but at the same time shops online with the most prominent e-commerce stores.
The persona helped me emphasise and understand the user and, most importantly, direct the project’s design phase correctly. In my next step, I defined my problem in a problem statement (What Fiona needs) and rephrased it in the How might we (How might we help Fiona) questions to focus on creating solutions.
How might we help Fiona feel that she is shopping from a small independent entrepreneur, not a massive corporation? It was the question that I decided to take further and use to generate solutions. The ideas that I developed during two sessions of Crazy Eights for the website were:
- a strong brand identity
- the story behind the shop page
- thank you page when the order was placed
- clients reviews and testimonies
- community tab
- toy exchange (I felt that this idea had potential but would fall outside the scope of the current brief, and I could present it as a possible next step for Trotty Toys)
From the conducted user interviews, I knew that the users needed to find their way around quickly for the website to succeed. Considering current e-commerce practices and the research outcome to that point (including the card sorting), I decided to propose four types of navigation — the primary navigation, the utility bar, the footer menu and breadcrumbs. Additionally, I divided the primary navigation headers into two groups and made finding a product more significant (Shop by Age and Shop by Category were bolded in the High Fidelity prototype). I decided that the remaining headers should be related to physical experience, so the potential user can quickly get familiar with the story behind the Trotty Toys.
To quickly materialise and test the ideas, I decided to sketch the pages necessary to complete the happy path — find a product by category, check the product page, add the product to the basket and complete the checkout. I transformed these hand sketches into digital wireframes in Figma to test my assumption regarding the user flow. The testers did not have any major concerns when they tested the prototype, mainly because of the in-depth research on the structure of the existing well-designed e-commerce websites that I came across during the discovery phase.
While I followed the well-established solutions and tried to keep the website’s structure and flow relatively conservative, I decided to be bolder and more experimental regarding the colour and type systems. Inspired by the websites that use colours to create a bold statement, I built a colour system that would be fun and allow Trotty Toys to stand out. To build on the concept of playfulness, I decided to enrich the website with small illustrations by Pablo Stanley. Initially, I considered using a red colour as an accent colour, but I decided to abandon the idea. Red is a colour used mainly to alert about errors, and using the colour differently could confuse users.
The final product was a high-fidelity wireframe. If I were to develop the concept further, I would want to build out the remaining pages and create the behaviour of buttons and other elements, testing the use of shadow and accent colour.
Especially important would be to develop the pages related to building the image of the Trotty Shop as a part of the local community. The page that would allow booking Events and Workshops could impact the goal and require relatively low effort; therefore should be addressed first. In the future, Trotty Toys could consider introducing the toy exchange. The feature could have a high impact but require high effort to design and implement.