Help Scout Design Update

Nick Francis | September 12, 2014

Several people on our team have been using Help Scout for about 4 years now. All that we've learned from customers and our own use of the product in that time has gone into a big design update launched today.

It's important to note that we're not changing anything about how Help Scout works. We've been making small tweaks to how the product works and building new features every day. But iterating on how the product looks isn't something we can do very often.

Our goals were simple: improve performance, establish more consistent design patterns and reduce visual noise (make sure every pixel has a job). Help Scout's primary job is to get out of the way and send you off with a smile. This process has been all about improving that experience.

The New Dashboard

The biggest change can be seen the moment you login, on the Dashboard. This is the first time we've touched the Dashboard in about 3 years, and here's what we think you'll love about it:

Addition through Subtraction

There's nothing like using a product every day to get a sense for what's important and what's noisy. We've been using this new design internally for several weeks, and have constantly been subtracting and simplifying. The design changes made throughout the product are highlighted by some big areas of emphasis:

Fewer icons

When adding a custom icon font about a year ago, we went a little crazy with implementation. Clearly labeled links such as mailbox folders all had icons. So in this round of changes, we made sure every icon had a great reason for being there. When we could afford to remove or replace them, we did.

Focus on the content

The new design wraps the main content area in a white container and leaves the sidebars open, with no borders or containers. This allowed us to reduce visual hierarchy across the board and greatly simplify the layouts. Although each page still shows the same amount of information, it feels like a lot less.

Updated threads

In our continued efforts to focus on the content and reduce noise, we re-designed the appearance of conversation threads. Now they all appear over a white background, with a thin border on the left to denote the type of thread (note, draft, User reply, etc.).

Larger font sizes

In critical areas like the folder view and conversation view, we've increased the font sizes a couple of points and provided more spacing. Although it's a simple change, we think it will instantly improve your day-to-day Help Scout workflow.

Color alignment with the brand

Our brand has evolved over the years. Launching a new version of our website a couple months ago made the marketing and the product look like they were made by different companies.

In an effort to create a more seamless experience and build on the design we created for Reports, we modified the color scheme. The top nav bar is lighter and matches the exact same hex you'll see on our website. Several grays are now white, dark colors are brighter and overall everything feels lighter.

These changes set the tone for some really great things we have planned. But as always, we'd love to hear what you think. If you have a suggestion, see something funky with the new design or just want to say hello, please do so.

Thanks for being a customer, we're so grateful to have you. Happy Friday!


About the author: Nick Francis is a co-founder at Help Scout.