KNOWNSOURCE
A curated second-hand fashion marketplace catering to those who value unique and sustainable style, featuring quality clothing from independent businesses
Summary
Enhance Brand Discovery on the E-commerce Platform
The optimized brand page, with organized data and refined filters, resolved discovery issues, reducing frustration and cutting time on task by 13 seconds (56%)
Challenge: Users struggle to discover new brands on the brand page due to its unclear structure, leading to frustration and inefficient exploratory.
Result: The optimized brand page, featuring organized data and refined filters, significantly enhanced usability by improving brand discovery and reducing the time on task by 13 seconds (56%).
My Role
Product Designer
Project
Team Project
Timeline
Completed in 6 weeks (2024)
Platform
Mobile & Desktop Web (RWD)
Reflection
01. Work with design peers
Develop designs by gathering ideas and research insights through multiple group brainstorming sessions and discussions.
Challenge: We faced numerous ideas from different designers, making it challenging to choose without disappointing someone.
Solution: I created a harmonious environment to discuss and explain the reasons behind each design choice. By extracting and integrating elements from various designs, we collaboratively refined them into a final version.
02. Design within existing frameworks
Create “ new designs “ within existing frameworks and utilize the current design system for user interface design.
Challenge: Stakeholders wanted a fresh look for the redesigns while maintaining the KNOWNSOURCE personality and the existing design aesthetic.
Solution: Before starting the design, we familiarized ourselves with the design system and existing elements to minimize introducing new components. This approach allowed us to utilize the existing framework to create a fresh look.
03. Balance stakeholder and user feedback
Finding the sweet spot between conflicting user feedback and stakeholders' perspectives is critical for success.
Challenge: We put users first, collecting their feedback extensively. However, after discussions with stakeholders, they provided a business perspective that sometimes conflicted with user needs.
Solution: I reviewed the users' needs again and conducted a competitor audit to identify alternative design strategies. I found a sweet spot between users' needs and stakeholders' perspectives, designing to satisfy both parties.
Results
Reduced time on task by 13 seconds (56%) and received strong positive user feedback, leading stakeholders to implement the new designs on existing pages
We conducted user testing with 8 participants, followed by an SUS questionnaire. We tailored tasks and timed their completion, observing their interactions to ensure our design was intuitive. The SUS questionnaire confirmed that users felt more comfortable with the new design. The average completion time for the latest design was 00:12.9, reducing the time by 10 seconds. We received positive feedback from users and stakeholders, with founders expressing their intent to implement our design on their new website.
Final Design #2 - User flow
Streamline the navigation flow for brands in the sidebar menu
Users found navigating the brand page via the sidebar menu challenging for two reasons. Firstly, they encountered difficulty reading the brand listing within the sidebar menu on small screens, prompting a preference for direct access to the browsing page. Secondly, they perceived the sidebar access to the brand page as cluttered and confusing. Therefore, we optimized the sidebar menu flow to ensure users can easily navigate directly to the brand page without confusion.
Before
Users are confused by the inconsistent entrance and frustrated by difficulties in navigating to the brand page
After
Users can intuitively and effortlessly navigate to the brand page
Iteration #1 - Brand Page
Improve navigation with a simplified alphabet filter and an advanced filter
User testing highlighted difficulties navigating the comprehensive alphabetical filter on mobile devices, impacting user efficiency. In response, we redesigned the filter into a user-friendly dropdown menu for improved mobile experience. To further enhance brand discovery, we introduced advanced filtering options based on user feedback, allowing users to refine search results based on specific preferences.
Iteration
Final Design
Final Design #1 - Brand Page
Empower users to discover their perfect brands with the redesigned page featuring intuitive sorting, filtering, and visual clarity
To enhance user experience and efficiency in discovering preferred brands, we implemented alphabetical brand listings, advanced filtering options, and clear brand logos. Advanced filters, including options for style, type, and other relevant criteria, empower users to refine search results. Additionally, we addressed mobile usability challenges by replacing the comprehensive alphabetical filter with a dropdown menu. These combined enhancements significantly improve brand discovery and selection.
Efficient Discovery
Users can quickly and effortlessly discover desired brands through organized data and filtering options.
Optimized Navigation
Enhanced brand visibility and accessibility through optimized organization and presentation, allowing users to navigate easily.
Users can efficiently discover and explore desired brands through optimized content organization and filters
① Users can efficiently discover diverse brands through optimized filters / ② Users can easily navigate organized data on the page
On the desktop version, users can intuitively and efficiently discover desired brands through desktop-specific filters
Organize data and implement filters tailored to user behavior on desktop devices to enhance efficiency
① Users can efficiently find a variety of brands using desktop-specific filters / ② Users can effortlessly navigate through organized data
Users can quickly discover and explore brands by style, with instant product counts for informed decisions
Users benefit from quick access to product information and efficient brand exploration through clear categorization and visible product counts
① Users benefit from precise categorization for efficient navigation / ② Users gain quick insights for informed decisions
Design Solution
Enhance brand page navigation by implementing alphabetical sorting, filters, and brand logos
Users found the brand page challenging to navigate due to the lack of sorting. To address this, we implemented alphabetical sorting to categorize all brands and created filters to help users find their preferred styles from unfamiliar brands. Additionally, we added a section for new brands with logos to enhance users' memory and facilitate easier brand identification.
Alphabetical Sorting
Users can quickly locate desired brands through an easy-to-navigate alphabetical list.
Alphabetical Filters
The quick search option allows users to efficiently find brand choices based on alphabetics.
Logos
Recognizable brand visuals help users quickly identify and select preferred brands.
Testing
Mobile users struggled with alphabetical filter, while desktop users found it effective
Mobile users experienced difficulty accurately selecting letters within the comprehensive alphabetical filter due to the constraints of the mobile screen, impacting their ability to discover brands efficiently. Conversely, desktop users found this feature intuitive and effective.
Conducting usability testing and doing questionnaires
Conducting interviews with stakeholders
Problem & Insight
Users find the page overwhelming due to numerous stocked brands. They dislike multiple 'Show More' clicks.
Through user interviews with 8 participants and a survey with 80 respondents, we discovered that navigating brands via the sidebar menu and brand page was difficult for users. The user flow was inconsistent and complex, and the brand list in the sidebar menu was also unstructured. Users had to press the 'show more' button multiple times to access more brands. These issues frustrated users when discovering new brands on the KNOWNSOURCE platform.
Without categorizing brands
Causes users to be frustrated when they find a brand they want
Without a structured way of displaying brands
Causes users to feel frustrated to get information
HMW Statement
How might we improve brand categorization to ensure clear organization, facilitating easy navigation and discovering various categories without overwhelming users ?
Brand Page
Dedicated to showcasing KNOWNSOURCE brands and facilitating effortless brand discovery for users