Aligning Heineken’s ordering platform with the new e-commerce brand identity

(05) rebranding

In 2023, a new brand identity for Heineken's e-commerce platform was introduced, and we needed to align the Heineken ordering platform with this updated visual language before the launch of the new eazle app. This involved refreshing icons, colors, typography, and the shape of various elements. The project required close collaboration with the development team to ensure smooth integration of the updated design.

Client

Heineken

Date

Aug 2023

Industry

Consumer goods

Scope of work

UI design

UX/UI audit

Goal of the project

In 2023, the new Eazle brand for Heineken E-commerce was introduced.
Previously, the platforms used inconsistent branding and lacked a unified visual identity.

Goal:

The objective was to align with the newly developed eazle brand, creating a consistent look and feel for existing apps that would:

  • Make the future transition to the new app easier for users.

  • Simplify the adoption of the new design system.


We had three months to rebrand the Salesforce platform, introducing updated shapes, icons, and a refreshed color palette.

We followed European guidelines and for implementation on the local platforms worked closely with design system team.

What has been changed

Color (primary, dark backgrounds and accent colors)

Color (primary, dark backgrounds and accent colors)

Color (primary, dark backgrounds and accent colors)

Shape (border radius of elements)

Shape (border radius of elements)

Shape (border radius of elements)

Icons

Icons

Icons

We also updated the typography, replacing the Heineken Core font with Inter, a modern and highly legible typeface that works well across digital platforms. This change ensured consistency, scalability, and accessibility across the entire experience.

We didn't change feature colors (loyalty, promotion, etc.), signal colors (information, success, error, warning), neutral colors (greyscale), interaction colors (enabled, hover, pressed).

These updates helped create a clear hierarchy and a more consistent visual language that the platform could build on as it grows. We didn’t introduce a full design system at this stage, but we refreshed key elements like typography, icons, colors, and shapes to align with the new Eazle brand. This brought the current platform in line with the updated identity and set the stage for an easier transition to the upcoming design system.

Approach

Components

  1. We did an audit of all the component.

  2. Next to it, we replaced color tokens and border radius properties for all the containers, tiles, input fields, dropdowns, etc.

  3. We replaced iconography with new icons

Master pages

We went through master pages to double check and find all the inconsistencies where applicable

Development refinement

We conducted refinement sessions with the development teams and identified all the instances that needed to be updated.

During audit we identified 40+ local color styles in different CSS files. We orginised, and mapped those styles to variables.

Results and learnings

  1. Created more consistency in the components.

  2. According to customers feedback the platform looks more “friendly and modern”.

  3. More consistency in code base


Learnings: Before implementing such a complex project, full platform audit needed with mapping all the changes and calculating amount of changes.

This helps to correctly estimate development effort and decrease amount of refinements that have been accomplished.

  1. Created more consistency in the components.

  2. According to customers feedback the platform looks more “friendly and modern”.

  3. More consistency in code base

Learnings: Before implementing such a complex project, full platform audit needed with mapping all the changes and calculating amount of changes.

This helps to correctly estimate development effort and decrease amount of refinements that have been accomplished.

  1. Created more consistency in the components.

  2. According to customers feedback the platform looks more “friendly and modern”.

  3. More consistency in code base

    Learnings: Before implementing such a complex project, full platform audit needed with mapping all the changes and calculating amount of changes.

    This helps to correctly estimate development effort and decrease amount of refinements that have been accomplished.

Next Project →

Aligning Heineken’s ordering platform with the new e-commerce brand identity

(05) rebranding

In 2023, a new brand identity for Heineken's e-commerce platform was introduced, and we needed to align the Heineken ordering platform with this updated visual language before the launch of the new eazle app. This involved refreshing icons, colors, typography, and the shape of various elements. The project required close collaboration with the development team to ensure smooth integration of the updated design.

Client

Heineken

Date

Aug 2023

Industry

Consumer goods

Scope of work

UI design

UX/UI audit

Aligning Heineken’s ordering platform with the new e-commerce brand identity

(05) rebranding

In 2023, a new brand identity for Heineken's e-commerce platform was introduced, and we needed to align the Heineken ordering platform with this updated visual language before the launch of the new eazle app. This involved refreshing icons, colors, typography, and the shape of various elements. The project required close collaboration with the development team to ensure smooth integration of the updated design.

Client

Heineken

Date

Aug 2023

Industry

Consumer goods

Scope of work

UI design

UX/UI audit