CATEGORIZATION AND BROWSING
2021 Summer
During interviews with our users, we identified a few pain points that emerged on our marketing tool. One of them being the browsing experience. This is a mini project I did for the experience team to better understand the issues and to explore potential changes we can make to the browsing journey
ROLE
Responsible for categorization research, user flow, and mockups
TEAM
2 Designers
TOOL
Adobe XD
Adobe Illustrator
Problem
Users are not taking advantages of our search and would rather go through all resources and library to look for their documentations. How should users access browse? Should we change the entry point? How to optimize navigation?
Research
Categorization research
To better understand the user flow and the entry point for the browse experience, I conducted research on different browsing formats and information structures. Our browse experience prioritized resources over needs. Categorization was created based on ‘what we offer’ rather than ‘what do you need’ and users were having a hard time locating different documentations.
Information Hierarchy
For more intuitive categorization, content are sorted by needs and challenges. Most of the platforms I researched implemented an interactive browsing flow that allows users to narrow down their needs each level.
Many of the hierarchical structures also allow users to access results at each level. The goal is to increase accuracy of results as more levels users enter. Browsing levels are usually limited to 2 - 3 from entry point.
Opportunities
The solution I have for our search and browse problem is to reformat categorization so resources are sorted in a user-centered way. Our main users are financial advisors who go on the platform with specific goal and our opportunities to improve the experience is simple: identify needs and inform them in the categorization method. We also need to rework interface for browsing so users don’t spend too much time scrolling up and down.
A more accessible entry point to reduce unnecessary browsing
Editable Tags of selected filter to keep track of selections
Fixed or scrollable section to allow flexible browsing
Main Page
To make ‘all resources’ entry more visible, and to make navigation more intuitive, I decided to add a ‘Browse Our Library’ section in the middle of the main page. From user study we notice users really enjoy the new resource section we have in a sub-page, so I move it up to the main page as the first tab under the new section.
User prioritizes needs while as a financial support tool, Brand Studio prioritizes resources offered by Commonwealth. I added two tabs, Business Challenge and Browse by Topic, to make browsing easier for users based on topics and client needs.
Original
Improved
Resources Page
The improved mockup includes changes of filter and interaction. I want users to take advantages of new categories as a shortcut to their needs as much as possible, so I also added them to the filter list. However, adding new sections raises the question of redundancy and how to prevent the long scrolling issue. My solution to that is to implement independent scrolling for filter and result sections. User will be able to scroll down to see more filters freely while viewing a fixed result section, and vice versa.
Something minor I did as well was adding selected tabs. User has been able to select multiple filters but was unable to edit their selection on the result section. I added selected tabs as editable buttons on top of the result section.
Original
Improved
Final Mock Up
