Carbon Intelligence

Carbon Intelligence is a sustainability consultancy firm that helps businesses understand their overall carbon footprint and take action to reduce it. They bring together a world-class team of strategists, data scientists and engineers to achieve this.

ROLE

UX/UI design

Design system

team

UI designer x 1

Brand designer x 1

time

6 weeks

The context

The brief was to transform the Carbon Intelligence brand by forming a new identity and website. Reviewing their existing site and drawing from customer feedback, it was clear that the company suffered from an in-cohesive online experience.

50+

Inconsistent elements uncovered on a heuristic audit of the previous website.

75%

of users surveyed described the existing CI brand as lacking a clear identity.

The challenge

To establish and future proof an online brand that consistently communicates Carbon Intelligence’s core values of “fresh expert thinking” & “science-backed solutions”.

THE AIM

Create a central design system for all digital assets that is intuitive and provides ample feedback.

Ensure consistent brand messaging and design elements.

Reduce development time for future website developments.

The outcome

A comprehensive design system.

A holistic brand, website and campaign experience.

92% of users accurately described the new brand's core identity.

The process

Creating the new
brand identity

Carbon wanted to send a message of expertise to its target audience. We employed “transparency” to introduce customers to the professionals working for them, helping build rapport with the company's experts.

The chemical symbol of carbon was chosen for the new logo to echo the companies value proposition of using a scientific-based approach to achieve sustainability.

Gathering
requirements

To ensure we could build a design system that Carbon Intelligence could use going forwards, we provided a questionnaire to understand the level of expertise and software that the company had relating to design.

Business needs:

The design system needed to be built using Figma.

Design maturity was low within the company, so supportive documentation was key.

Foundations Atoms

The colour palette had to be bold and fresh. The tool Colourable was used to ensure low contrast for legibility across digital assets. Moreover, six primary colours were chosen to represent the business's core services; strategy, reporting, governance, data, optimisation & engagement.

Barlow typeface was chosen due to its modern and slick appeal while remaining friendly and approachable. Using a modular scale, a 1.5 type ratio was used to make font sizing scalable and neat across device types.

Elements Molecules

Are atoms that form a single collective purpose. At this stage, the functional states needed to be documented in the design system to minimise ambiguity when reviewed by developers.

Key focus ares

Dark and light UI support due to brand colour styles.

Articulating the various states of key assets. For example, error and recognition feedback on forms.

Sections Organisms

Molecules are now grouped to contextualise a greater purpose. This step highlights the production requirements for building out components for the site. An example of this could be an improved understanding of time-to-build for component types, providing more accurate reporting for future project timelines.

Key focus areas

Assigning naming conventions so that they match tailwind components (developers coding library).

Categorising components across different device types.

Wireframes/designs
Layouts/pages

Finally, we arrive at the layouts and designs that make up a “story” a set of combined components tell. Having prior approval of the high-level content structure of these pages is essential for problem avoidance.

Key focus areas

The sitemap map has been approved by key stakeholders.

Ensure frame titles mirror the sitemap for understandability.

Opportunity

How might we build off the atomic process and ensure greater consistency for carbon’s brand and digital assets?

The solution

A detailed eco-system

Although the atomic process does provide structure, there is still a need for further explanation. Contextualising purpose in the system will be key.

A library of knowledge

Maintaining consistency is difficult when the context for specific design decisions is missing. Including key research and UX deliverables will help provide this.

A CHECKLIST of REQUIREMENTS

With such a large and evolving system, keeping track of all the elements inside can be difficult. A checklist will ensure no key items are missed.

The result

We successfully delivered the design system to the client + a new brand and website. The client was happy with the result and highlighted that the system was well organised and would change the way they approach design.

92%

of users accurately described the
new brand's core identity.

40+

website components were
delivered with the new system.

Next steps

The new design system will play a key role when Carbon Intelligence builds out marketing campaigns, web tools, or website extensions.

Key areas to monitor

Look at the percentage of new components being developed compared to the existing ones on new projects.

Set benchmarks and determine whether the growth of new elements and components are sustainable.

Reflections

A post-workshop break-down with the client could help further reinforce the usability of the new design system.

Although the system is documented, having an onboarding guide could reduce errors for new users.

Amplifying sustainability

with design systems