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 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.
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.
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.
↓ Below: Help Scout’s new Home & Docs pages.
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.
↑ 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.
Front-end Engineer (Design Team)