How to navigate fashion with style
What if we could make discovering fashion online feel more natural again?
Guided by style, not categories.
Visual search for fashion
Together with my partner I started Lookfinder - a visual search plattform for shopping fashion. I was responsible for the end-to-end design process including concept development, branding and the full product Design. I also developed the entire frontend prototype using React.
Let me explain
Imagine you are looking for new clothes
And you have a vague style idea in your mind
What do you do?
Site AI bot
Speed
Success
Control
AI bots can suggest clothes based on descriptions, but they depend on precise input. If you’re unsure how to describe your style, refining the results can quickly become frustrating.
Similar Clothes
Speed
Success
Control
Most stores suggest clothes similar to what you’ve clicked on. The issue? You first have to find something good. And after a few clicks, you might end up trapped in a stylistic dead end, where everything looks the same.
Praying for Ads
Speed
Success
Control
Social media ads often suggest clothing that matches personal taste and surface hard-to-find pieces. But the selection is unpredictable, and there’s no control over what appears.
Scroll endlessly
Speed
Success
Control
This method ensures nothing gets overlooked, but at the cost of efficiency. Browsing through endless pages of products takes time and effort, often without a clear way to refine choices effectively.
The Search Bar
Speed
Success
Control
Search functions can be unpredictable. Do they only look at product titles? Do they consider descriptions? Can they recognize details in images? Most of the time, it’s unclear.
Categories
Speed
Success
Control
The most abundant form of filtering gives you a subset of clothes, but you still end up with thousands of unsorted products. Also, if you're looking for a style, you might not care whether it's the perfect jeans or the perfect jacket.
What does the data say?
69%
80%
69% of online shoppers go straight to the search bar when visiting ecommerce sites, but 80% leave due to a poor experience.
Shoppers browsing fashion visuals online often experience choice overload, making it harder to commit to a purchase.
The Solution
Let us propose
a new approach
What if we could simply express our taste and instantly get a selection that matches our style?
Tell me what you want without telling me what you want
The biggest challenge was finding the simplest way for users to communicate their style preferences without relying on words.
If we look at how we do it in real life, it can be very simple:
You show your friend a few outfits you like.
They recommend you clothes of similar style.
Now lets translate this process into a digital application.
Instead of asking the user to show outifts they like, we could offer a selection they could match the outfits they like most. Preferably every time they select one we can refine the style step by step
The user matches
outfits they like
We create a
taste profile
Turns out newer Visual Language AIs are amazing at categorizing outfits by detailed style.
The user sees
matching pieces
Let’s match the best-
matching kind of matching
This first matching step should get the most attention, as it is crucial for weather or not the user is able to get results they expect.
There are different levels of detail for matching UX. These have different advantages and disadvantages. Lets find the one that fits our usecase best.
single option
focus on the
details
two options
focus on the
comparison
four options
focus on the
general impression
5+ options
focus on the
variety
4 – todays magic number
Best because you can still see the oufits, but not too much so you dont focus on the details, but enough to get a clear sense of style in them. This layout makes people to not focus on the details and build a quick style profile. It also reduces the idea that they are going to see exactly what is in the images.
Early sketches
Lets put it all together
Select your favourite outfit
Describe your style
Urban Edge Fusion
Header
In the header we will have the most important naviagtion elements. The logo and a hamburger to access a quick menu. Also the most important page to access from any part of the process, the liked items.
Matching Grid
The matching flow will get the most screenspace as it is the most important feature. Here we will display the grid of four images in equal size for each iteration.
Options
directly below the matching are some options that are used to control the state of the matching. Here the user can undo a selection or skip a set of images, if they dont like it. Here the user can also input a text description of what they are looking for, in case they know very well what that is.
Style "Bucket"
All the way in the bottom we find a bottom bar that serves as a collection “bucket” of our elements. All selected outfits will be gathered here.
Here the user sees preview images of the results to get instant feedback on what the machine interprets the seleciton as. as well as a text description of the style of the selected images.
Main Userflow
Lets keep it simple.
We only need a screen to match clothes and one to discover all matches.
Landing
Matching
Results
Main Userflow
Lets keep it simple.
We only need a screen to match clothes and one to discover all matches.
Landing
Matching
Results
Reactions
Every step of the way we showed screens and working prototypes to potential users considering their tech understanding and background. From the start we recieved amazing feedback about the idea and the implementation.
”It feels like Tinder”
“I want to match, its really fun”
“Me and my girls will use
the hell out of this”
But not everything was
perfect from the start.
“How long do I need to match?”
“When can I continue to the products?”
Adaptions
It turned out during the testing that it was not completely obvious that users can directly view the matching products after the first selection.
Even though theres already strong visual clues that the outfit goes into the product selection on the bottom.
To fix this we added a hint to the bottom bar, that appears for new users. Once they tapped the bar once, they didnt have this issue again. This solved the problem in sucsequent tests.
"Much better" :)