Known Source:
Visitor Conversion
ContextKnown Source is a UK-based luxury second-hand shopping website. Known Source's Ineffective search and confusing filters create friction in the user journey and hinder conversions.
My Roles & ResponsibilitiesUX/UI Design, UX Research, Client Project Team Lead
TeamJ. Mehta, UX Designer,
V. Rajesh, UX Designer
Project StatusPartially Live on
KnownSource.com
TimelineSeptember 2023 - December 2023
Challenge
Known Source’s users are struggling to convert into buying customers due to challenges in finding the right items caused by ineffective search functionalities and difficult-to-use filters.
Solution
We conducted comprehensive UX research, including surveys, user interviews, and journey mapping, to understand customer preferences and behaviors. This informed a redesign of the search and filtering functionality, culminating in an interactive prototype for the company founders.
Result
1-minute decrease in task time, improved site accessibility, and a significant increase in self-reported user satisfaction.
Problem StatementUsers struggle to convert into buying customers due to challenges in finding the right items caused by ineffective search functionalities and difficult-to-use filters.
Research
Primary Research Insights: SurveyWhat clothing criteria do online second-hand shoppers find important?
93% find the item condition important.
90% find the price of the item important.
79% find the size of the item important.
Primary Research Insights: User InterviewsWe interviewed 5 users who are very familiar with second-hand shopping and often shop online.
Understanding friction points in the search and filtering experience…
Users had difficulty searching for relevant products, as there were no search suggestions.
Users got frustrated by seeing a large number of sold-out items which they could not hide.
The large amount of items in filtering categories was difficult to navigate and provided low visibility of selected filters.
Users were getting confused by the excessive options for scrolling and had difficulty discerning which of the 3 layers of scrolling they were currently on.
User PersonaDesign Process
User Story 1As Sylvia,
I want to only view items that are available for purchase
because seeing sold-out items is frustrating.
User Story 2As Sylvia,
I want to know what the condition of the item I’m buying is,
so that I can make an informed decision.
User Story 3As Sylvia,
I want to be able to efficiently search for relevant products,
so that I can find products I want to buy.
SketchesSearch bar displays popular suggestions and recent searches. Additionally, as user types in the search box, there is a display of word fill suggestions.
Horizontal filters to reduce scrolling confusion combined with a nested filter hierarchy, easier to understand and more accessible for tab key users.
Initial WireframesAccessibility
To enhance Known Source's website accessibility, we consulted with a specialist and analyzed the site using Axe Dev. We prioritized easy-to-implement recommendations that align with global accessibility standards, putting Known Source ahead of its competition as digital accessibility was not yet mandated at the time of this project.
Tab Key Navigation
Currently, users need to press the Tab key 23 times to reach the clothing items they searched for. Implementing skip links would allow users to bypass this and jump directly to the main content. This benefits users with permanent disabilities such as someone who is using a mouth stick to navigate the website, but also users with temporary/situational disabilities that could include a sprained wrist or a broken trackpad.
Zoom & Scale
The meta viewport tag should allow users to pinch-zoom at least double the standard scaling. The code on Known Source’s website currently disables this functionality.
Alternative Text
Images should have an alternative text description that describes both the objects and the embedded text that the image contains, using the "alt" attribute. This is beneficial not only for accessibility but also SEO.
Usability Testing
The team conducted 2 rounds of usability testing, gathering and implementing feedback after each round. Testing metrics included task time and qualitative user feedback.
Usability Testing InsightsReducing Effort
Usability Testing Feedback:
“I don’t know that I think about my sizes based on the item. I’m just wearing a large and that’s it.”
”This is confusing, it’s taking too long for me to select something so straightforward.
Solution: Reducing the number of clicks from 4 to 2 by removing one hierarchy level and collapsing international sizing made it easier for users to select their desired size.
Lack of Clarity
Usability Testing Feedback:
“What does availability mean? Oh! I see…”
”I think this filter is confusing because I obviously want to see what’s in stock, why would I have to select that.”
Solution: Instead of a dropdown filter, we designed a toggle button that is on by default, eliminating users’ main frustration of seeing sold-out items and not being able to hide them.
Missing Feedback
Usability Testing Feedback: It would be great to know how many filters I selected from each category, I am used to this from other shopping websites!
Solution: We simply added a number to signify the amount of filters selected in each category.
Usability Testing MetricsHigh Fidelity Design
What I LearnedConsulting an Accessibility Specialist
As someone who is very passionate about digital accessibility I found this project to be a great opportunity to practice getting accessibility input early in the process as well as recognizing the business’ (lack) of bandwidth for larger initiatives, therefore providing easily implementable solutions.
Leadership & Team Management
This was my first experience being a team lead for a group of peers. Keeping structure in meetings and stirring the team towards meeting our goals as well as making sure that each team member is contributing in areas they want to grow in was a challenging pursuit but also very rewarding.