Digital product Studio
Case studies

51Degrees

Designing a website with superpowers

The challenge?

Engage users with the product, bring the brand to life for multiple audiences all while making it lightning fast for Google

Solutions

Design and content audit, Content design, Strategy & Copywriting, UX design, UI design, Front-end development

So what?

A website that represents the brand, is lightning fast and built in a way to enable the team to quickly spin up new marketing pages

51Degrees lead  lg

Content strategy

Our first task was to understand the legacy content and design a content strategy to determine what needed to stay and what needed to go. Every piece of content needed to be fit for purpose and to justify its own existence.

The website project succeeded an internal branding project that defined the key audiences so to kick things off we gathered the core sales, marketing and customer success teams supported by our good friend and collaborator Alistair Bradley to map out and identify the content strategy at each point of the buying process. The key focus being on getting the free version of the product in the hands of new users as quickly as possible.

The process of understanding the objectives of the different audiences transitioned through into mapping out the content and information architecture that would best optimise the chosen flows.

51Degrees content  lg

UI & digital first branding

While it might be perceived that the ‘visual’ bit is a process in itself it’s really just the tip of the iceberg. All the groundwork laid in understanding users and designing the experience manifests itself in the way the content (words, type and images) come together to create the ‘personality’ and ‘interface’ you experience.

Bringing the personality to life was one of the key intentions of the project so we needed to create a way to bring the crafted content together with some great typography and imagery to raise the profile of the product and lift the proposition to a whole new level.

51Degrees have a really strong set of values and a personality that relishes in their rebel archetype. Even though they might be a bit cheeky, they do it with a smile and in good humour. Visually this is captured in the headline typeface and the bespoke imagery we created adding some fun to balance the content against the more technical language that’s unavoidable for a largely technical audience.

51Degrees images  lg

Performance

The 51Degrees product is all about optimising website or app performance, so it was key that the end product would be a living example of the effectiveness of the product. We set an ambitious goal early on to achieve near perfect Google Lighthouse scores. Wherever performance is concerned there are trade-offs to be made to find the right balance between speed, user experience and brand presence. This resulted in a client-led aim to remove all javascript unless it was absolutely necessary. This led us to find some creative ways of approaching things like accordion menus and mobile menu’s traditionally handled with javascript.

Through implementation the other compromise to be made was around webfont performance and usage. This is where the balance between a performance came to the fore. Remove all hints of visual identity and personality and the brand perception degrades. Go over the top and site speed can suffer. We resolved to use web fonts for headlines to maximise the impact of the typography while still being lean with the performance cost in its use.

We delivered the front-end in the form of a pattern library ready for the internal team to integrate themselves into the application.

51Degrees pricing  lg