Known Source
Known Source is a second-hand shopping website based in the UK. Our team participated in optimizing the original website's Dealer and Brand pages. We helped the client increase user conversion rate and easily navigate the brands.Website: https://knownsource.co.uk/
Project Type
User Research
UI/UX Design
Prototype
Team
Jiaming Zhang
Allen Chen
Keziah Bervell
Duration
10/25-12/21 2023
Client Goals
Existing dealer page
Existing brand page
Problem Statement
“Users need a way to quickly understand the dealer's unique personality and reputation. So it enables them to make purchases that align with their individual style or aesthetic preferences.”
“It's overwhelming for users to repeatedly click "Show More" in order to access the complete list of brands. Users need a way to view brands Known Source offers, so it creates a intuitive and uninterrupted browsing experience.”
Design Process
01
UX Research
02
Redefine Problems
03
Wireframe
04
Usability Testing
05
Iteration & Prototyping
01 | UX Research
Survey Data
Interview Insights
UI problem analysis
After obtaining certain user interviews and survey data, we conduct an in-depth analysis of obvious problems in the existing interface.
Competitor Takeout Feature
Persona
02 | Redefine Problems
03 | Wireframe
We created two versions of wireframe for the Dealer storefront page and Brand Directory respectively for comparison in user testing.
Dealer Page Sketches
Brand Page Sketches
Dealer Page Version 1
1. First, user can see the dealer's diversified information, service areas and media data on the landing page.
2. Click dealer ARCHIVE 89 under the trusted & popular dealer section.
3. Go to the ARCHIVE 89 store, check the ratings and click "reviews".
4. After checking store reviews, click “Back to store” button.
5. Browse the product, if you have any questions then click "message" to enter the chatting box.
6. Click the "close" icon to return to storefront to browse products.
Dealer Page Version 2
1. Browse the dealers with good ratings in landing page,Click on ARCHIVE 89 shop.
2. Browse products in the New Arrival section, then click on a jacket.
3. Enter the product page, check the specific information of the jacket, notice the "authenticated" badge, and check the store review under the jacket.
4. Click on “message”, enter the chatting box to ask questions about this jacket.
Brand Directory Version 2
04 | Usability Testing
How we metric our design?
System usability scale
Version 1 -> 96.6
Version 2 -> 92.25
Given the closely matched results, we distilled our two versions into a third version, retaining features that users favored most based on the collected questionnaires.
Version 1
Version 2
Time on task
Version 1 -> AVG. 00:22.87
Version 2 -> AVG. 00:12.97
System usability scale
Version 1 -> 77.91
Version 2 -> 91.25
With Version 2 emerging as the preferred choice, we develop the third version based on its success. We observed that half of the testers utilized the search bar to find a brand. Consequently, we decided to retain the search bar on the brand page.
05 | Iteration & Prototyping
Refining key elements based on clients' feedback
Prototype Demo
Screens Overview
RWD - Desktop version
What We Learned