Our journey started when the team ran a usability test with new business users who had used the product for the first time and identified some major problems with the current experience. It was becoming harder for customers to use our product, and it was becoming harder for us to scale.
The navigation was suffering from an internal org chart syndrome and the teams were lacking the generic overview and understanding what could be a more coherent grouping of the navigation items. Most of the product initiatives were aimed at increasing the adoption of features resulting in the B2B app growing in different directions without necessarily a user-centric approach. This was reflected in the main navigation by new features being added to it without supporting the users’ mental model.
The purpose of the project was to develop a framework a supporting infrastructure that would accommodate each product team’s needs by restructuring the B2B App navigation to improve Usability and Findability of the core key actions. Our new navigation needed to be able to scale with us and allow us to add new features as we grow. We needed to ensure that the features that our customers cared most about were easy to find, providing a way to find old features and to discover new ones as they got released.
The solution needs to work for all users but our main focus has been improving and measuring the experience for new users. For new users, the goal is to easily find and adopt main functionalities in the B2B App. For existing users, the goal is to allow them to easily perform repetitive key actions and discover new features.
In order to limit the scope, we clearly communicated throughout the project to stakeholders that it won’t be about a complete redesign of the B2B App. We were focusing on high-level groupings based on the natural user flow without rethinking the specific contexts and pages of each team.
As a member of the core team, I was the Product Designer during the whole project and worked alongside a Researcher, Engineers, Product Manager, and UX Manager. In addition, I have collaborated with other designers, UX Copywriters, Design Director, Support, Customer Success, Sales, Marketing and Brand.
I have participated in all workshops and user testing sessions and took part in summarising insights and their further implementation into potential solutions through design ideation, iteration, prototyping, and crafting high fidelity mockups throughout all stages of the project.
Based on our knowledge about the current experience we have started with pinpointing problems in the B2B app. We have identified a list of assumptions and mapped out key actions users perform which we could validate against multiple sources of feedback later on in the process.
An excerpt from the slide deck used at stakeholder meetings and presentations
The next step was to map out the existing taxonomy and flows of the B2B App on Google sheets. This was essential in helping us to see the bigger picture by getting an overall understanding of how many pages there were in the B2B app.
The original Information Architecture and global navigation design.
After gaining a deep understanding of the complexity of the app we moved on with a card sorting exercise to explore different ways of possible simplification of labels and grouping related content in a better way. It was from here that our redesign ideas started to take shape.
A snapshot of my super focussed and determined colleagues on a mission 🎯
The card sorting exercise helped us to create a first model for a potential new IA which was tested during user interviews against the current solution. It was comprised of three major groups:
Global - which held basic UI functions (i.e Domains, Notifications, Log out)
Primary - consisting of the primary navigation supporting the main user journey and accommodating frequently used features (i.e Invite customers, Service reviews, Widgets, Analytics)
Supporting - secondary items were present with infrequent or context-dependent use (i.e Settings, Integrations, Support)
Since the B2B App has dependencies with all areas of the business we have talked to product teams, leaders in the Product Organization, Product Marketing, Copywriters, Customer Success, and Support. We had a list of assumptions, key tasks and the first IA model at hand that we wanted to validate with stakeholders to acquire knowledge from within each context as they keenly knew the most common user problems.
To support our assumptions about potential problems and gather more insights about how users use the current solution, we conducted 14 interviews with small free and paying businesses, asking to perform key actions in the current B2B app and in the new IA model.
An example of the tasks we asked users to perform:
You don’t have that many reviews, and you want to have more - how would you go about that?
Please show us how you would change a piece of information that is on the Trustpilot page for your company, say the phone number.
The resultsconfirmed the known problems and showed early signs of improved performance in task completion with the new model.
The main navigation held a complicated amount of menu items which were not grouped in a logical way
The amount of items in the current solution is overwhelming to users
Settings are spread around in different contexts which creates confusion
New (and old) users are unaware of what they have access to in Trustpilot
Very limited traffic lands on Trustbox widget and the Analytics pages
Based on a heatmap test we have discovered that while users were on the “Dashboard” page they were still clicking on the active item in the side navigation. We should make it more obvious to the user where they are in the flow by creating a more obvious indication of it
Building on top of the success from the previous Tree test we collaborated with the copy team and created two new IA models each of them using different grouping and labelling. Furthermore, we have tested them with 100 users to validate the core ideas of the models and potential variations. We used a tool called Optimal workshop that gave us quantitative insights on the path taken by users when exposed to the various IA models.
At this point the pace of the project was fast-moving and it was becoming obvious that one of the IA models is performing better. In order to support the qualitative learnings from the tree tests the next step was to to gain additional qualitative insights by converting the two IA models into clickable prototypes and test them with users and stakeholders.
I wasn't aiming to get bogged down in making them beautiful as I knew that geeking out on the details will be the next step.
Before we discussed any potential changes, we set clear requirements and goals for the design of the prototypes and the potential future solution.
.svg)
Collaboration with each product team was crucial to gain knowledge about the setup, functions and feature set of each page in order to create a framework that supports all existing functions while preserving the purpose of each page and establishes consistency across the app.
We draw a clear line that the design will only tackle the overall navigation, the global elements that are always available to the user. The four main areas of the UI that the project had to improve were the Global top navigation, Global sidebar menu, Page header, Settings
There is a need to create and define new UI patterns that are not present in the Design System and document their usage and redlines for desktop and mobile screens to ensure an easy cross-app implementation within each context.
Based on the data we knew that the majority of our users are visiting our app through desktop devices but improving the user interface to provide a better user experience for mobile was an important underlying factor of the whole design process and support for mobile devices had to be part of the solution.
The prototypes were used during the second round user tests with small free and paying businesses, asking to perform key actions in the prototypes created with the two IA models incorporated into them. We have also carried on with internal stakeholder meetings for alignment and feedback collection purposes by allowing to compare the two IA models.
The grouping of the main navigation items and labeling made sense to users on an emotional and intuitive level
The grouping / bucketing worked well and the findability and discoverability was improved
Models are learnable. Improvements to task completion were evident because the models supported the users’ mental model
The full scope of the features is more obvious
Domain selector is cleaner as it is a separate element but takes away way too much attention as most users are managing one account/domain
From the insights and data we gathered in our final round of testing, we began putting together a design that could be tested in production. We took the most successful aspects of both prototypes and created mockups that addressed the major pain points we discovered during all of our testing.
I have decided to design the first level menu based on a widely known pattern of accordions. The first level of navigation consists of the parent items which are holding the second level “child” items. I have started with updating the icons and supported discoverability with a chevron icon which serves as a hint that there’s more to be explored. This also gave us a way to include new features in the future, which would not have worked in the previous style and number of items.
Based on the feedback the global sidebar menu went through a round of iterations. The key aspects of the design were icons and the use of color. I have paid close attention to establishing clear interaction details such as inactive, hover and active states.
This component got a prominent place in the global sidebar. The goal was to allow for an all-time accessible context switching possibility for users who are managing multiple companies and/or domains while at the same time making the app feel more personal to the company and user by showcasing their company name and domain.
In collaboration with the Business Accounts team, I went through all use cases for each user type and organized configurations for each type’s navigation accordingly.
I went through all the pages in the app investigating each context and mapped out variations and structures until I had identified all of the primary cases and the troublesome edge cases as well. This allowed me to address the inconsistencies of legacy designs which could be reconciled into a pattern establishing a common baseline across contexts creating a more consistent experience on each page.
We also learned that including a standard breadcrumb menu helped users orient themselves. It became much easier for new and seasoned users to understand where they were located and navigate up a level.
The Settings page was a completely new addition to the app's global sidebar navigation. I wanted to provide a place for users that can be within reach when needed. The page itself had one main goal to reach, to add clarity on which level the user is trying to make changes on and what consequences it would have. All major settings were united into one settings area.
The new navigation had to work seamlessly on mobile too. At this stage the mobile version has been designed in parallel with the desktop version. The third level of navigation, tabs, which are present in the page header in the desktop version had been moved into the global sidebar menu that could be hidden off-canvas on handheld devices.
Our most important goal was to increase traffic to key pages and continuously collect feedback in order to iterate as we go. While we couldn’t know for sure how users would respond, at the very least, we had to ensure that none of our metrics would experience a decline in usage.
We have planned for a staged rollout launching the updated interface with the new IA for a limited set of users on the Free tier. This allowed us to monitor the stability, performance while uncovering certain bugs and iterating to fix broken things.
For feedback collection purposes we have used HotJar, adding a global floating button on top of the interface allowing users to provide immediate feedback at any given time. After resolving minor discovered faults we continued with a set of enterprise accounts and repeated the cycle until it could be rolled out to all accounts.
Reducing the amount of menu items from 11 to 8 with improved grouping and labelling is making it easier for users to perform key actions as the majority of functions are now accessible within 2 clicks. The feature set of the product is a lot more visible, and according to feedback it feels like’ there are more functions, even though we haven’t added any.
After the new navigation was launched, the traffic to pages has been increasing.
Evident increase of the traffic to the Showcase Section (+128% for Trustbox, +74% for Social sharing and Email widget)
A slight increase in the traffic to all major product areas: Reviews, Analytics, Settings, and Upgrade page
A decrease in the traffic of the Integration section (due to moving Trustboxes to a dedicated Showcase section) that did not reflect in a decrease of the adoption of the Integration feature
No clear signs of an increase in feature adoption reflecting the traffic increase
The new components created and published through the Pattern Library allow us to provide a more consistent, joined experience for our users.
