Help Scout Rebrand

Help Scout is a software-as-a-service platform for customer support. In 2018, it became apparent that the current Help Scout brand didn’t reflect the company values and was no longer best at portraying the value the product brings into people’s lives. It was time for a change.


The Brief

The primary goal of the project was to freshen up the brand through new colours, typography, grids and distinct illustration style. Since the marketing page hasn’t been entirely rewritten since the inception of the business, improvements to consistency, developer workflow, accessibility and performance were encouraged.

I was responsible for rebuilding key Help Scout marketing pages. Additionally, I conducted design audits and provided designers with actionable advice to level up their skills in creating implementation-ready comps.

Design auditing

From both design and engineering perspective, an audit of consistency of Help Scout’s Marketing design tokens was necessary. I’ve unified the use of colour and typography through removing dozens and creating a more compact system (rather than heavily leaning into a class-based CSS framework that can easily encourage heightened variance).

↓ Below: Help Scout’s typography audit.

Help Scout Design Audit

Creating an audit of the design tokens was helpful for designers to guide new type scales and a colour palette. Additionally, it contributed to a better understanding of designing for the responsive web—an ultimately variable medium.

Implementation

↓ Below: Help Scout’s new Home & Docs pages.

Help Scout Site Preview

I’ve built the new marketing site with a focus on boosting web performance scores, increasing accessibility and maintainability of the project that’s crucial to achieving business objectives. All of these goals were met with modern technologies and tools.

Little touches

↑ Above: Examples of implemented animation and transitions.

New Help Scout site is full of little user experience delights—mostly performance transitions and animations; a realm where a skilled front-end engineer can really shine.

The marketing site now expresses the values of the business. It’s more cohesive and allows designers and engineers to build new pages with speed and confidence. Lastly, due to the reduction of technical debt and the introduction of new tools, it’s easier to contribute to.

Position

Front-end Engineer (Design Team)

Company

Help Scout

Year

2018

Responsibilities
  • Front-end Engineering (HTML, CSS, JS)
  • Accessibility and performance
  • Design feedback
Related
Doodle illustration