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

Get users to dwell on the Dealer storefront longer.
Make users understand the personality of the Dealer quicker.
Increase conversions.

Existing dealer page

Make it easier for users to find the right brand for them.

Existing brand page

Problem Statement

Dealer Storefront

“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.”

Brand Directory

“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

Consumers care about the price, environment, and unique items.

They can’t make sure about the item’s size and quality when shopping second-hand online stores.

70.4% testers buy second-hand clothes because of sustainability.

Interview Insights

“I care about the dealer's rating and reviews, I often check on these.”

"I hope to find the chatting box under the seller."

“I won't spend time distinguishing brands in the complicated list. I just easily search for the initials.”

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

We analyzed and prioritized the features that can be adapted to our development among second-hand fashion competing products on the market.

Persona

02 | Redefine Problems

How might we provide users a seamless platform to swiftly grasp a dealer's unique personality and high reputation, empowering them to discover and purchase vintage-style clothes that align with their aesthetic preferences and shopping confidence?

How might we make it simpler for users to navigate the Brand page?

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 1

Brand Directory Version 2

04 | Usability Testing

How we metric our design? 6 people as testers.

For dealer’s page, we guide testers through navigating both the current page and our redesigned versions, pose questions, and provide questionnaires to gather feedback.

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 Trusted dealer badge and rating
Version 2 All products are presented in a consistent form, easy to browse by scrolling.

For brand’s page, we assign users a task, measure the time taken, and upon completion, administer a questionnaire to grasp their navigation and design preferences.

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

Browsing dealer landing page and contact to dealer.

Browsing storefront’s items and check reviews.

Finding brand thourgh seach bar.

Finding brand thourgh alphabet fliter.

Screens Overview

RWD - Desktop version

What We Learned

Allen C: “I learned how to redesign the pages based on our research and how to work together to develop ideas.”

Jiaming: “Researching user's preferences and behaviors for second-hand websites is essential, which can help us iterate the design to be user-friendly”

Keziah B: “It is important to make the user shopping experience quick and easy. Providing full transparency about products and who the dealers are by using their style to give users a better understanding.”

UX/UI PROJECT

GRAPHIC DESIGN PROJECT

EXPERIMENTS