Always find the perfect outfit for you
"Virtual Matching room", the place to find the right shoes for your clothing to create the perfect match
↓
SCROLL
BACKGROUND
Soles is a footwear store that started as a small, exclusive store for fashionistas and collectors. After researching the market, Soles decided to switch their ideals as they saw an opportunity to grow and expand. They wanted to offer a different type of experience for everyone in their current website, they also wish to have a more modern and fresh look to appeal a bigger age range of audience.
CHALLENGE
How might we design an innovate feature for Soles to offer a different type of experience to their customers?
SOLUTION
The feature that was created is the "Virtual Matching Room", a place that allows people to find the perfect shoes to match with clothing they already own. All they would need to do is upload or take a photo of their clothing, then the shoes that matches the best would show up.
ROLE
UX/UI Designer, solo project
TIMELINE
160 hours (2021)
TOOLS
Figma, Maze, Zoom, Docs, whiteboard, paper & pen, sticky notes
SKILLS
User research, information architecture, interaction design, wireframing, branding, prototyping, testing
*Educational project as part of DesignLab’s UX Academy, this is a conceptual project, the company "Soles" is not real.
UNDERSTANDING THE PROBLEM
Researching the market to find out what they offer and if people care about matching their shoes and their clothing
I started by analyzing three competitors and three indirect competitors that offered different experiences to their consumers. This could help me understand not only about the market, the features other competitors offered, but also the reason why people chose them and what could make them choose us instead.
Competitive Analysis with three direct and indirect competitors, to find out what other competitors offer to their customers.
From the competitive analysis I gathered four important takeaways:
⟶ People want to combine shoes with their current and new clothing.
⟶ They want to have a customized experience.
⟶ Comfort and quality triumphs price.
⟶ Reviews can validate or destroy a product.
At this point I knew one big important discovery was the fact that people seemed to like to match their clothing with their footwear, this is something that Nike encourage by offering clothing and ideas on how to match them with their footwear.
INSIGHTS OF CONSUMERS
Talking to shoe consumers to find out their shopping habits, behaviours, joys and pains
To learn more about consumers, especially their needs and frustrations, I conducted an interview asking questions related to their shopping habits, what motivates them to purchase new shoes, what is the process they go through when choosing their shoes, and if they were interested in combining their shoes and clothing.
⟶ I recruited 6 participants from ages 22-65.
⟶ Interview was conducted via Zoom.
⟶ 6 out of 6 participants were interested in matching their shoes and clothing for different reasons.
⟶ People feel empowered and it makes them feel clean and confident having a good outfit that matches.
Extract of the main insights gathered from the interviewees.
CHALLENGE
How might we provide a new experience to consumers that would allow them to match their clothing and shoes while acquiring more consumers and build loyalty?
In this project, I took the "Jobs-to-be-done" ↗︎ framework into account, which is why my main goal was to find insights about experiences and previously "hired jobs" from people that bought shoes. I created a Job Persona to be my guide on who I was designing for, understanding their needs, goals, frustrations and motivations.
This job persona, also known as "the Shoe Geek", is a student from Florida who loves to collect shoes and thinks the right pair of shoes can make him feel more elevated confident, empowered and cool. The job that he wanted to hire was something that would allow him to find the perfect clothing for his shoes.
I created a sitemap with the help of an open cardsorting with 15 participants, who organized words related to shoes into categories they thought were the most logical in their perspective.
To make sure it was possible for my job persona to find their matches of shoes, I had developed a task flow to help me see the main steps and pages that would be needed to navigate, and the user flow to understand the different paths and scenarios that could happen.
Extract of the user flow followin three different paths that the job persona might take when interacting with the feature. The ideal path is in blue and the alternative paths are green (as a new user) and purple (wanting to personalize it more with filters).
IDEATING THE SOLUTION
Sketching Crazy 8's to ideate the best solution, evolving into the low-fidelity prototype that would be tested in Maze to catch detect possible frustrations early on
The first wireframes showed different ways to interact with the clothing the user uploaded to the interface, allowing them to match the clothes with existing shoes from the website. I tested these wireframes to understand two things: frustrations and problems, and what people were expecting to find.
I conducted the first usability testing with 6 participants through Maze, to be able to iterate early on the design process. From the test I gathered important insights that would help with the next step:
⟶ People like to have more than one result available of shoes.
⟶ People want to personalize their results with the use of filters and sorting.
⟶ In the proposals, the first step was to fill out a questionnaire before getting the matches, resulting in people wanting to leave the process as it took more clicks to arrive to the actual feature.
⟶ It was not as fun to interact with as I expected and didn’t seem to be a special feature, just a fancy way to display a shoe grid.
Taking into account these conclusion, plus what I observed on the tests, I decided to improve on proposal #3 as that one allowed to interact with the shoes and options while also focusing on the clothing, avoiding the need to use the questionnaire.
TESTING THE SECOND WIREFRAMES
On the second testing, the experience and interaction was more positive, there were only a few details regarding CTA and filters that needed to be revised for the final prototype
Before the prototype was ready, I did the branding of the website, which was a logo inspired on the albino peacock. The peacock is a confident and proud bird, ready to show their attributes and best colors, which aligned with Soles' idea to help people feel their best. The UI Kit was also complete, with a more modern and fresh look.
Now it was the right moment to test the latest prototype, including the branding and the style guide, to identify the customers reactions and expectations.
Extract from some insights obtained during the usability testing.
⟶ The mid-fidelity prototype was tested with 6 participants using Zoom ages 25-35.
⟶ "Thinking aloud" was the method used to get a better understanding of what people were thinking about and why they decided to do certain actions instead of others.
⟶ The test had 1 long task based on the new feature to understand how participants would interact with it.
⟶ Overall, participants understood the process and seemed to be interested in finding more about the feature.
⟶ Test completion was 100%.
Opportunities of improvement relied on: revising the hierarchy of the main and secondary CTAs, and rethink the filters positioning and interaction.
BRINGING THE VIRTUAL MATCHING ROOM TO LIFE
Iterations were implemented to improve hierarchy and usability, aside from using a more clear language throughout the feature
Before - Homepage
After - Homepage
RESPONSIVE VERSION
Many people like to shop and browse on their phones, therefore it was important to design the mobile version as well
SOLUTION
Time to get the Virtual Matching Room running
Entering the Virtual Matching Room (VMR)
Scanning outfit in the VMR
Interaction with shoes in the VMR
Saved outfits & filters
REFLECTIONS
What did I learn and what would I do differently?
⟶ Thinking about the user starts with being able to empathize with them. During the entire process, I not only had the purpose and goal of the project in mind, I also had the user in my mind the entire time.
⟶ When in doubt, take a break to do Crazy 8’s. While the purpose of this project was to do a website, the crazy 8’s let us expand our imagination and find ideas that we might not have thought of if we constrained ourselves to digital design.
⟶ In the interviews, build more rapport with interviewees than follow the script exactly as it was laid out.