Heidi Health | Lucy Gao

Crafting Heidi Health’s Dynamic Branding Guidelines and Design System

Heidi Health's rebranding required new branding guidelines and a Design System based on Atomic Design and the Shadcn UI framework.

MY ROLE

Digital Design

Design System Designer

TOOLS

Figma, Notion

DURATION

1 month

INTRODUCTION

Creating the 'North Star' Branding Guidelines Page

Heidi Health underwent a comprehensive rebrand, including updates to their logos, colours, imagery, typography, and icons. To ensure consistency and alignment with the new brand identity, I was assigned the task of creating a Notion page dedicated to the updated branding guidelines. This centralised resource would serve as the go-to reference for all company collateral, acting as the North Star for branding and design.

Updating the Design System

Simultaneously, the developer team sought to enhance their workflow efficiency. After discussions between the design and software developer teams, we decided to implement a new Design System based on the Shadcn framework. This framework, featuring React.js-ready UI components, offered both accessibility and customisability for the developers. I was responsible for updating the Figma Design System to incorporate the new branding elements, ensuring a seamless integration with the revamped brand identity.

LOGOS

With new branding colours and typography, Heidi Health unveiled an updated logo design. The 'H' now features smoother edges and a rounded corner radius, giving it a softer and more inviting look. The deeper primary blue and secondary pink evoke a sense of boldness and reliability, while the logo’s distinctive shapes continue to symbolise the supportive relationship between doctor and patient standing side by side.

Old version

New version

Hicon

The "Hicon" is the graphic logo that represents the Heidi brand.
The new version showcases the new brand colours and rounded edges.

Logo

The new logo contains the Hicon as the 'h', different to the old logo with both the hicon and 'h'. When space doesn't permit for the horizontal logo, the compact or vertical logos are to be used.

Old version

New version

Compact

Vertical

Logo & slogan

Logo Colour Variants

The Hicon is used for multiple applications across product, marketing, merchandise, and company documents. To stay on brand, the Hicon is only used with the the primary brand colours as shown below.
The Heidi dot must be primary pink or white unless the Hicon is monochrome; then, it can be primary blue.
The H of the Hicon must be primary blue or white.

Below are examples of correct and incorrect use of the logo on colours.

Safe Area

There should be sufficient clear space around the logo to let it breathe and prevent its clarity and visual impact from being obstructed.
In the full version of the logo, the safe area is defined by the width of the Hicon. When using just the Hicon, the safe area is the width of one shape from the H. When the logo is scaled, the safe area scales with it proportionally.

TYPOGRAPHY

Heidi Health's previous UI typography consisted of the “Lato” font in various weights for headings, sub-headings, and body text. Now, Heidi Health uses the "Fields" font as the custom font for headings. However, when "Fields" is not supported, the Google font equivalent, "Petrona" is used as a fallback. "DM sans" is used for body text.

The font sizes and naming conventions are based on the standards created by Apple and Google, and are designed to be used across both mobile and web platforms.

Old Typography

"Lato" font in various weights.

New Typography

"Fields" or "Petrona" (as fallback) for headings, and "DM sans" for body text.

COLOURS

Heidi Health revamped their brand colours and added in colour elements such as gradients for different purposes. Below are the updated brand colours and gradients with their use cases.

Brand Colours

Primary blue is used to represent interactive components within the product, such as buttons and links. It should be the main color used in any piece of marketing content.
Secondary Pink is used to represent AI-related features and content within the product, and it is directly tied to the orb component. For example, suggested AI prompts are pink. It should be used sparingly within marketing content as a pop of color.
Accent Purple is used to represent our Pro tier within the product, including upgrade buttons and icons. It can also be used in sparingly within marketing, but whenever Pro is mentioned, it should be in purple.

Text Colours

There are three text colours: Primary, secondary, and disabled state to create visual weight to information of different focus and importance.
The primary text colour should be used for body text, while the secondary text colour should be used for information that is not the main focus, in order to create an information hierarchy. Disabled text colour should only be used when something is unavailable to be interacted with.
You can also use Primary Blue or Secondary Pink for headers but not for body text.

Gradients

Gradients add dimension and depth to surfaces, making content stand out to the viewer. Heidi gradients consist of light and dark shades from our Primary and Secondary palettes. Gradients can be used in any direction, angled, or reversed, to suit the context of the image.

Colour Contrast

A high level of colour contrast makes content easier to read. Contrast is crucial for users with impaired sight, and those temporarily impaired when viewing a screen in bright sunlight.
WCAG is a colour contrast standard that is used across a variety of technological products. The minimum standard for all critical content needs to meet at least AA standard for colour contrast. This requires a contrast ratio between text and background of 4.5:1 for body text, and 3:1 for large text and UI elements. This standard applies to all critical elements such as icons, text, buttons and components, but does not apply for decorative content like illustrations, or supplied content like external logos.

ICONS

Icons are used throughout Heidi's components to convey additional meaning about a piece of information or a step a user needs to take.

Previously, Heidi Health used icon's from Apple's SF symbols, with rounded corners and fills. They also used custom Heidi icons to represent Heidi-specific content. These custom icons were created by customising SF symbols, and featured a pop of pink to reflect the Heidi logo and strengthen brand association.

With the rebrand, Heidi Health now adopts outline style icons from IconPark and Lucide for a clean and simple look in both product and marketing materials.

Old Icon Set

IconPark and Lucide Icon Sets

VISUAL ASSETS AND IDENTITY

Heidi Health's trademarks are its 'Halo' and 'Orb', which are the graphical elements that represent Heidi's brand. The Halo is the core of Heidi's visual brand identity, and the Orb represents Heidi's AI technology.

Halo

At the heart of Heidi's visual identity is the 'Halo', a symbol that merges technology, analysis, and transcendence. This dynamic and evolving graphical element represents the core of insight and intelligence.

The Halo features three distinct visual states, each reflecting increasing layers of reality through different levels of Heidi light:

Outline: Represents the architecture of Heidi, including their model, ideas, values, and code.
2D (Solid + Glow): Represents Heidi's AI tools.
3D: Depicts Heidi in real-world applications, such as clinicians utilising Heidi's product.

Orb

The Heidi Orb is used within Heidi Health's UI to symbolise their AI functionality. The Orb is used sparingly, exclusively in contexts directly related to AI. For general references to Heidi, the logo or the Halo is used.

DESIGN SYSTEM

Heidi Health's previous Design System was built based on the Ant Design framework which organised UI components into General, Styles, Layout, Navigation, Data Entry, Data Display, Feedback, and Misc/Other categories. To streamline UI component development, the design and developer teams agreed to adopt the shadcn framework for its easy access to and customisation of UI component source code.

I was tasked with creating this new design system. Based on the shadcn framework and atomic design methodology, I organised UI components into 'atoms' (basic parts) and 'foundations' (colours, shadows, spacing, typography). I also created a sticker sheet providing an overview of all components in the Design System file, with clickable links directing users to the corresponding component files in Figma.

Old Heidi Health Design System:

New Heidi Health Design System: