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.

Client

Help Scout

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)

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.