In 2017 Trustpilot decided to invest in a Design System which resulted in establishing a core team, phasing out legacy systems, creating a shareable Sketch library, and most importantly creating a website where a live version of each React component with editable props lives, showing states and variations combined with UX best practice guidelines for each component.
In the past couple of years, we have seen a more consistent B2B product emerge through using the tool at hand, our Design system - Constellation.
In 2018 Trustpilot has made a decision to invest in brand to strengthen its premium position. To represent the company’s “mindset shift” the rebrand was focussed around updating the brand messaging and the creation of a new visual identity with a new logo, color palette and typeface.
The new brand has been rollout out and applied in the areas of B2C (e.g trustpilot.com), Marketing, and Sales but it hasn’t been applied in the B2B product area.
This has created a gap in the consistency of the brand and made the interface of the B2B app and the up and running Design system and its components visually outdated.Through this initiative we strive to close this gap by taking the well-developed Trustpilot brand and its assets and apply it in the B2B product.
Strengthen the brand identity within the B2B app and provide a more consistent, joined end-to-end experience and interface for our existing and potential users.
Create a more inclusive product by bettering our accessibility standards based on the WCAG 2.0 AA accessibility guidelines.
Improving the functional aspect of the design will ensure utility and usability are met. Improving the aesthetic design will ensure the product is desirable, trusted and the user has a great brand experience. When they come together, the user-experience feels complete.
Ensure best practice is shared and reusable. Work with the up and running Design System by building tools, assets, and components to facilitate a consistent experience and to clarify different use-cases with guidelines and examples.
Our focus has been improving and measuring the experience for all users who are currently using the B2B app totalling 90.000 monthly active users.
7 product teams rely on the Design System in order to speed up their design and development process. This meant that plans and changes had to be communicated to all stakeholders in the organisation including, VPs, PMs, Engineers, and most importantly Designers.
In order to limit the scope, we clearly communicated throughout the project to stakeholders that we are not planning to make changes to the Information architecture or functionality but instead we will focus on tweaking and changing the look and feel of the B2B app.
An excerpt from the slide deck used at stakeholder meetings and presentations
The Design system core team is comprised of an engineer, a principal engineer, two product designers, and myself - assuming the role of a product designer. We are responsible to execute the work ahead from preparing the B2B app for the proposed changes to delivering them.
I was leading the design efforts from shaping opportunities and defining tasks to design ideation, iteration, and high fidelity mockups throughout all phases of the project, while taking care of a continuous communication stream of plans and changes to the rest of the organisation.
In order to get a better understanding of the state of the brand at the outset of the project, we conducted an audit analyzing the visual language on the parts of the product and user journey where the new brand has been successfully applied such as the B2C product area, Marketing website, Social Media, and Sales materials.
The brand has a cleaner, more modern, and vibrant appearance which is achieved by a new color palette and the use of visuals such as illustrations and photography which are not present in the B2B app
The brand font is Helvetica Neue yet in the B2B app we use Lato
While the Trustpilot brand is well developed outside of the B2B app some of this visual language isn’t appropriate for the app itself. Compared to e.g the marketing site the app has a different role and it's important to recognize the underlying user needs for each specific part and product through the user journey.
An illustration of the updated look and feel of the Trustilot brand in the B2C product area and Marketing site in contrast of what the look and feel in the B2B app was.
The next step was to have a closer look at the state of the B2B app. We knew that there are color contrast issues in the interface but these were never addressed or mapped out properly in the past.We focussed our attention on text legibility and mapped out where color contrast is failing by running a contrast test in some of the core experiences and all existing components.
The color contrast was failing in many different instances across the app and the components of the Design system
There were still many inconsistencies in the use of typography such as the position, alignment, and size of titles or body text and the colors assigned to these elements
A direct example from the B2B app demonstrating color contrast issues after running a contrast a test
The identified pain points served as a justification for the needs of the project proving a strong base for voicing that a brand alignment and changes to the B2B app need to happen. In collaboration with the UX Manager, I created a series of presentations outlining the opportunity, goals, scope, and things we need to focus on to convince stakeholders to invest in this project.
The idea was to split up the project into digestible chunks "phases". In each phase, we will focus on redefining a specific foundational piece of the Design system and we will also use it as a tool to roll-out each phase and deliver the new parts of our app one by one so that users have some time to adapt to changes while creating the least disruptions to the rest of the organization.
An excerpt from the slide deck used at stakeholder meetings and presentations
After getting a thumbs up from key stakeholders I collaborated with the principal engineer in order to gathered data on two important points which served as a baseline for the task ahead. We looked at the:
Most visited pages
Most used components and patterns
Based on the data I created a prioritized list of pages and components which I included in a Sketch file in a form of 1:1 mockups which set the starting point for the explorations.
At the outset of each phase I have defined a set of goals creating a high-level framework of what are we trying to achieve in the specific phase. In PHASE 1 we want to:
Define and explore the application of the brand color palette in the B2B app and the components in the Design system
Re-style interaction details such as states and system feedback to enhance their usability, accessibility, and aesthetics by applying the new color palette
Extend the palette to cover the needs of the B2B app
Share the process through updates and gather feedback from the wider design team and stakeholders
The B2B app palette takes inspiration from our brand palette. The system is predominantly white, black, and gray. It’s important the design doesn’t distract from the content, so subtlety is key. The vivid blue is one of Trustpilot’s core brand colors so we knew we want to use that for primary actions.
We also came up with 8 colors to use as our greyscale palette. Each shade of gray has a hint of blue in it in order to match the primary blue.
Our secondary palette consists of red, green, and yellow which are used to convey meaning for the user by calling out important statuses and alerts.
The new color palette has been developed with the WCAG 2.0 AA accessibility guidelines in mind through which we improved color contrast throughout the experience.
A direct example from the B2B app Sketch UI Kit. The old color palette on the left side and the new more vibrant and on-brand color palette on the right side.
A direct example from the B2B app demonstrating color contrast improvements upon applying the new colors.
Another goal was to restyle some of the key components and improve their usability through color changes and styling adjustments. While we weren’t making functional changes, we certainly planned to do so in the future. So we needed a flexible style — one that supported our existing features and would stand up to the addition of new ones.
Thanks to the audit we knew that there will be a need to extend the palette to cover the needs of the B2B app.Through several rounds of explorations and feedback gathering sessions, we have decided to move forward with a simple and clean aesthetic and defined accent colors for states like default, hover, focus, active, loading and disabled semantic colors such as success, info, error, and warning.
A direct example from the B2B app Sketch UI Kit. The old color palette on the left side and the updated color palette on the right side.
A direct example from the B2B app demonstrating the old active input field state style on the left side and a simplified state style using the new colors on the right side.
A direct example from the B2B app demonstrating the old error input field state style on the left side and a simplified state style using the new colors on the right side.
After thorough conversations with engineers and designers on the core team about naming conventions, we have decided that each base color will start with the number 10 (e.g GRAY 10) from which the accent colors would be derived accordingly (e.g GRAY 20, GRAY 30).
This system has provided us with enough versatility if we would need to create additional colors in the future. Let's say if we would need a new shade of gray between GRAY 10 and GRAY 20 we could add a shade called GRAY 15 that could be easily phased into the color system without disruptions.
Another important addition to the overall system and documentation was assigning a specific role for each color (e.g GRAY 10 has an alias and role "Ink, Headings").
Ink = colors used for text
Headings = colors used for Headers (e.g a page title)
This addition has brought a lot of clarity and helped designers and engineers speak the same language when working on solutions.
Trustpilot's brand typeface is Helvetica Neue but when a user signed into the B2B app the interface was using a different typefaceface, Lato. Thanks to the visual audit and the learnings gained from it we knew that only switching from Lato to Helvetica Neue will not get us far enough.
The typographic scale was failing to create sufficient hierarchy in the interface and many inconsistencies were apparent by just clicking from page to page by the differences present in the position of text, its size, color, and font-weight.
Grasping the opportunity we have widened our goals:
Switch from Lato to Helvetica Neue
Improve readability by increasing the default body text size
Improve scannability and information hierarchy by creating and enforcing a new typographic scale and style
Re-style components to enhance their usability, accessibility, and aesthetics through the use of Helvetica Neue and the new typographic scale
Share the process through updates and gather feedback from the wider design team and stakeholders
Based on the WCAG 2.0 AA accessibility guidelines we have decided to switch from a 14px baseline text size to 16px. We have attacked this task with a similar approach as the previous phase by converting some of the most critical pages and components through an explorative approach by either matching, replacing or merging all existing text-styles present in the UI, so the new scale can be implemented across without leaving any text-styles outside of the scale.
Left side: A page from the B2B app using Lato and 14px as the baseline text size
Right side: A page from the B2B app after the update using Helvetica Neue and 16px as the baseline text size
In order to achieve a compelling vertical and horizontal rhythm we use multiples of 4 to create a sufficient spacing and define dimensions of elements. All components which contain text had to be tweaked in order to accommodate for the new 16px baseline text size in terms of padding, and margin.
Left side: A set of components from the B2B app Sketch UI Kit using Lato and 14px as the baseline text size
Right side: A page from the B2B app after the update using Helvetica Neue and 16px as the baseline text size
In order to put emphasis on a piece of content and make it clear to users which is the most important information and which is simply supporting the main points we considered several aspects for creating a typographic scale by regulating the: size of text (e.g bigger = more important, smaller = less important), weight, letter spacing, line height, color, contrast, and line length.
To build an effective visual hierarchy, we have segmented the different parts of the UI into three levels:
Primary - including the biggest type like the page title or important performance data aiming at providing users with the core information as well as drawing people’s attention to a product
Secondary - type of copy elements that should be easily scanned like subheaders, card titles, and section titles which help users quickly navigate through the content
Tertiary - body text and some additional elements like labels, secondary descriptions, and metadata
In order to make the B2B app interface easier to scan, read, and get things done we use cards to group similar content and tasks together. Building on top of the already used card system we focussed on simplifying and cleaning up the experience in a systematic approach by bettering our guidelines and clearly stating the possibilities and combinations within the system which were missing.
An example from the B2B app Sketch UI Kit symbols page showcasing the available options and different variations of the card component
Left side: A page from the B2B app using the old typographic scale, typeface and card layouts.
Right side: An improved version of the same page using the new typographic scale, typeface and card layouts.
By creating a clear guide and reducing the number of options available in the typescale we achieved a simpler and slicker interface. We have assigned a specific role to each typestyle taking out the guesswork and removing ambiguity from each designers' day-to-day work.
While the changes have been prepared to release by the engineering team I took the opportunity to redesign the Sketch UI Kit by grouping components and patterns that share a similar purpose (e.g All Input components were placed on an art-board called "Form elements") and by using big bold titles so that upon opening the file designers can spot, zoom in, grab or inspect the component they are looking for immediately.
The two phases have been delivered and released following each other with a 2-month window between them. While PHASE 1 - Color was being implemented we designers started working on PHASE 2 - Typography.
In both cases we have split up the work into three steps:
1. Communication: Preliminary updates to the organisation
Update all teams and stakeholders about the changes and updates to the Design system and pages in the B2B app through presentations and showcasing side by side comparisons of the previous and new experiences. Book in sessions with designers and give them a walk-through the new changes and updates to the Sketch UI Kit.
2. Preparation: One-two weeks for pattern library implementation
In the preparation step, engineers prepared the pattern library by applying the proposed changes to components. This was required before the SQUAD met.
3. SQUAD days: Fast moving with a clear plan and hard deadline
With the updated pattern library and its components converted with the changes we used the prioritized list of the most visited pages and going page by page, we have switched all the old components to the new ones.
Any remaining work (which was likely to happen) would be prioritized by the teams that own the pages which were not converted.
Since most changes revolved around brand perception, it was decided to be hard to measure correctly with tracking data. The measurements we did were based on “not breaking” things e.g not seeing any negative effect on a few key metrics such as sign-ups, weekly/monthly active users, traffic to key pages, some key actions like replies and shares of reviews but also more granular actions like the usage of filters in the product.
Updated in February 2021
We are aware that the changes which we achieved so far are smaller incremental improvements, small nuances in the interface which when considered holistically have a big impact on the user experience. The next steps will be about applying what we learned and gained in the previous phases and explore how we can leverage the new colors, new typeface, and typescale further. In the upcoming months, we will put our focus into two areas:
In this phase, we will define and evolve the application of brand visuals in the B2B app, and in close collaboration with the brand team, we will create guidelines on how to design and implement icons, illustrations, and photography into the B2B app.
Left side: The current state of the side navigation.
Right side: An exploration on how the side navigation could look like if the proposed changes will be decided upon with a light layout and a new icon style in place.
We are currently exploring how to clean up the overall structure and layout hierarchy by uniting elements that belong together and separating elements that don’t. From all the phases these changes will be the most apparent in the B2B app ever made and I believe this will allow us to really start redefining the overall experience.
In addition, we are exploring how could we bring more of the brand flair into the B2B app and really start providing users with a well-defined brand experience for example by putting more emphasis on some of the key action moments that happen throughout the user journey.
One of the most important pieces of our Design system is the source of truth the Constellation website which is also getting a redesign. We have created a guide on how to better structure and document components and based on the new guide we are redefining the usage guidelines for each component. This new change will come with a redesigned Design system website.
Left side: The previous implementation and look and feel of the Design system website demonstrating usage guidelines of the Button component.
Right side: An improved version of the (currently under development) Design system website demonstrating usage guidelines of the Button component.
Through this project we achieved overall better usability through color contrast changes and we achieved a cleaner, more modern, vibrant appearance. We are taking the necessary steps of making the app on brand. But we achieved something even bigger, we were able to create momentum in the organization.
I know this by finding myself presenting the project, its progress and our future plans to the VP and Directors of product development who expressed full support on any of the initiatives.
We are hard at work developing the system further and soon we will be launching a pattern library for the B2C products also. We are learning a lot in the process, and aim to gain valuable feedback from our global staff using our tools and iterate on the system.
Further initiatives will be connected to the overall product development strategy
In addition to bettering and maintaining the Design system we would like to start rethinking and optimising whole user journeys
Building on the top of the success of the B2B pattern library and Design system we are aiming to widen it by creating a B2C and Marketing site pattern libraries. All of these will be united under the same Design system - Constellation
We have talked about open-sourcing Constellation, but we’re not there yet
We would like to introduce a way which would allow us to measure and collect insights on user satisfaction in the B2B app
