Summary

This is the UX / UI project for Trottinette Toys, a fictional local store part of their family-friendly community, with a business model based on customer service.

My role

This was a solo project where I conducted user and competitor research to discover the user needs and business opportunities. I then created a strong brand identity and delved into information architecture to design a Hi-Fi prototype with intuitive navigation.

Deliverables

Surveys, user interviews, competitive analysis, personas, problem statement, how might we, sketching, user flow, card sorting (Optimal Workshop), information architecture, design system, Lo and Hi-Fi wireframes, Hi-Fi prototype, usability testing.

Tools

Problem

Through an improved eCommerce website, we want to showcase our products while maintaining our brand image: “small shop” appeal and great customer service.

Solution

A user-friendly e-commerce website with a clear, intuitive and simple journey.

To maintain the close relationship between the brand and the customer, specific features such as Click & Collect, Gift option and Gift finder were considered in this solution.

Empathise

Target audience

Trottinette Toys' customers are varied, mainly young families looking for good quality toys.

Survey

I started my research by creating a simple (yet effective) survey to identify key users.

13 people participated, which allowed me to find people who shopped for toys and shopped in their local area. 

Interviews

I have then conducted 4 interviews via Zoom, from which I got great content that allowed me to build the Affinity Mapping and identify key takeaways:

• I like the personalised and detailed service I get when I go to local stores;

• When shopping online, I expect a stress-free journey, a diverse catalogue and different delivery options;

• I shop for toys from both mainstream stores and local businesses.

Define

Persona

Meet Alice, a work-from-home mum with 2 kids who shops for toys from both online and local businesses. 

When shopping online, she gets frustrated when a website categorises by gender and when it doesn’t have product reviews.

Alice expects a diverse catalogue and different delivery and payment options, as well as a website with easy navigation, nice product images and a clear age guide. Preferably, she can choose a mixed shopping experience between online and in-person.

Alice's goals...

• A stress-free journey when shopping for toys online;

• A shopping experience that merges online with in-person.

... and frustrations

• A website that doesn’t have product reviews;

• A Toy’s online store that categorises by gender.

Problem statement

Alice needs a flexible online shopping experience with multiple delivery options because she equally values the convenience of buying remotely and the personalised service from local shops.

How Might We

To tackle Alice’s problem, 2 questions popped up:

How might we provide a shopping experience that combines online and in-person?

&

How might we transfer the level of personalisation from the physical store to online?

Information Architecture

Once I had the research data, it was time to develop a navigational and organizational scheme, which was done based on the standard practices of information architecture (card sorting).

I used Optimal Workshop to run a hybrid card sort study (the participant can choose an available option or create/propose a different one) with 10 cards with images (always helpful in case the participant doesn’t know the product). 

6 people participated, and the results helped me confirm that certain products were assigned to the correct categories and identify the best group for trickier toys.

Ideate

User Flow

With the Information Architecture defined and after doing a lot of sketches, I was ready to create the User Flow, focusing on the happy path due to time constraints.

Lo-Fi wireframes

Next step? To create the grayscale wireframes in Figma. Here are a couple of examples.

Homepage

Product Listing Page

Test

The moment of truth! I handed the prototype to the users and conducted lo-fi usability tests.

4 people tested the prototype, and the results were quite positive, with all users finding the product mentioned on the test and successfully placing an order.

Small iterations were done directly on the high-fidelity wireframe due to time constraints.

User Interface

With no brand assets provided nor requirements mentioned in that matter, I had the freedom to define and create a simple style guide from scratch.

By then, the time was tight, so a few UI decisions were based on competitor analysis, mood board and my own experience (after all, e-commerce is my background).

Colours

Typography

Components

Prototype

It was time to splash all that colour on the lo-fi wireframe and create a high-fidelity clickable prototype.

Next steps

Clocks don’t stop, and even though I would have loved to have more time to test and iterate, the project ended. I have, although, identified the following steps:

• Additional card sorting;

• Review navigation;

• Additional prototype testing;

• Improve UI;

• Create a shopping landing page;

• Add specific functionalities: such as Zoom images and sticky nav;

• A/B test.

Key learnings

• Keep it simple. Especially when the project is about a transactional website. Users want to be able to find a product easily. They prefer a simple, intuitive and effective shopping journey to a pretty website that doesn’t work. The product detail page should have relevant information about the product and nice, big images that show the product from several angles. The basket and check-out steps need to be clear and simple.

• Card sorting is an effective tool. I used it not only to confirm that some products were assigned to the correct categories but also to understand how users would organise items.