Help Scout Customer Sidebar

Help Scout’s customer sidebar displays customer profile and contact information. We also have dozens of third-party app integrations (35+) that display data in the sidebar. Over time, the styles we’ve used had become stale. We set out to redesign the customer sidebar to improve the customer experience, evolve our design language, and make sure that styles are locked-in and consistent across the board. 

Date
2018
Role
UI/UX, Web Development

Team and Role

I was the responsible for the design and implementation of the third-party app integrations. I also was the front-end developer for the new sidebar. I created a set of new components and also leveraged our custom CSS framework, Seed

 

Design Process

To start the design process off, I completed an inventory of all of our 3rd party applications and also compiled examples of custom apps our customers had built, so I could find common themes, layouts, and data types.

Right-hand customer sidebar - before
Right-hand customer sidebar (Before)
Select sidebar apps (before)

Defining Components

I then took all of my research and started defining components and their use cases.

Sections: Apps can optionally have one or more sections of content. Each section should include a heading and content. If you add a toggle class, the section can be expanded and collapsed (like apps themselves). Help Scout should leverage local storage to remember what Apps/Sections each user has toggled.

Footers: A footer typically has one or more action links. The footer includes buttons and/or links.

Key value pairs: The original design had a horizontal layout of labels and descriptions. The goal is to use vertical key/value pairs when possible.

Timeline: This component includes event name and event meta (timestamp or other less important bits of information attached to the event).

List (with bullets): This can be used in a bunch of different ways. The most common is to display the mailing lists the customer is subscribed to.

Block List (no bullets): This is used for items with a bit more data — usually 2-3 lines worth of data. Open Activities in Salesforce are a good example.

Orders: This component is used in our eCommerce integrations. There’s a lot of data to display in a small space, so it’s pretty challenging. Data we try to include in each order by default include the following: Order name/number, amount, date, and status.

Typography styles for sidebar applications
Examples of apps using the new components.

Prototypes

Then I started on prototyping the interaction design…from focus states and shadows to open / closed states and animation.
Here’s is an early prototype of the new sidebar: 

Outcomes

Example of salesforce sidebar app open
What People Are Saying

“The sidebar is now easier on the eyes and customizable to boot!”