Heineken NextGen Reports

Approach

Reinventing the NextGen SharpX Financial Report System using Design Thinking.

By establishing empathy with the user, designers are able to work towards outcomes that meet those needs more successfully.

My role · Visual Designer

I was one of the visual designers on a team of six. Once a track's UX designer finalised a layout, I took it to pixel level and kept every report visually consistent with the system.

Screen visual designFine-tuned report screens across tracks: hierarchy, colour, charts and KPI tiles.
Design systemColour palette, typography, clickable components, tables, charts and spacing guidelines.
HandoverThe design guideline document the SAC developers built from.
Phase 2Responsive layouts, illustrated landing pages and the standard component repository.

01

User centred design

Empathy with the people reading the reports shapes every decision.

02

Time efficient

As time goes on, the cost of making changes increases. Designing and testing prior to development saves time and money.

03

Agile + design thinking

Closely aligned principles that let us solve complex problems with creativity and empirical adaptation.

Discover

Gathering data

Heineken financial reports
User needs
Business requirements
Understanding SAC

Define

Filtering data

User journey
Pain points
Brief from all tracks
Feature set

Design

Start on design

Wireframing
Developer feasibility
Working sessions
Design system

Deliver

Test and release

Design guidelines
Developer handover
User acceptance testing

Discover

Understanding who reads the numbers.

Research objective: to understand the user needs, motivations and pain points with the existing system. Method: user interviews.

User groups

LeadershipManagersITNew beeMid-senior analystNon-finance backgroundOther viewers of 16 types of reports

Research guide for user interviews

We created a research guide which helped us streamline the process of user interviews and execute in a structured and timely manner.

Research guide: stimuli, debrief and script

Analysis of findings

Findings from all the user interviews were compiled in one mural. Affinity mapping helped us understand the pain points, problem areas and user insights.

Affinity map grouped into data visualisation, current state, actionable insights, report standardisation and other tools

Data visualisationCurrent state of affairsActionable insightsReport standardisationOther tools

Define

From hundreds of notes to a focused feature set.

Identifying problem areas

We categorised the data by theme and intersected everything important to the business and the users, so solution generation could focus on specific problems.

Prioritisation of problem areas with user quotes — **Prioritisation**Problem areas and insights, backed by user quotes, refined over 3–4 working sessions with the MR CoE.

Feature set mapped from prioritised ideas — **Feature set**Features picked from prioritised ideas, so design decisions stay rooted in user needs.

Exploring a visual design language

An inspiration board of graph types and Gross Margin UI research set the direction before the first wireframe.

Inspiration board of dashboards and charts

Design

Nine tracks, one way of working.

**First wireframe**Content and structure based on research findings and the concepts voted most important.

**Refined wireframe**Collaborated with SAC experts and MR CoEs; after multiple iterations we created a refined wireframe.

Track-wise approach

A team of 6 (3 UX and 3 UI) across 9 report tracks. Each UX designer owned a track end to end.

Gets the functional requirements from the track MR CoE.
Wireframes are discussed with track members and SAC developers in working sessions.
Daily stand-ups with the track to share changes and inputs.
The track presents work in progress in its SteerCo.
SteerCo feedback is worked in through sessions with the track and developers.
The design team reviews together for usability and consistency across tracks.
The UX designer finalises the layout and passes it to visual designers.
Visual designers fine-tune the screen. This is where I came in.

Gross MarginFixed ExpensesVolume / Monthly SalesDaily SalesABTLP&L by NatureP&L CombinedBalance SheetCash FlowEvergreen Dashboard

Evolution of screens, working with SAC limitations

How the Gross Margin report evolved over the design and delivery phase. Pick a stage, or let it play.

Designer application with clickable tiles

Key data highlights moved to overview at 1920 resolution

Screen after further design components were added

Stage 01 / 07

Design system

A reporting language built on the Heineken brand.

We defined a design language that incorporates Heineken's global brand identity, built a pattern library of common elements, standardised KPI tiles, graphs and tables, documented when to use each, and set spacing guidelines, bridging the gap from design to development.

**Colour palette**Report-specific greens, positives, negatives and neutrals.

Visual elements and clickable components — **Clickable components**Toggles, filters and action buttons with every state.

**Typography**Page, filter, KPI and chart type styles.

One system, every report turned green

With the help of the design system, we converted all the layers across all reports to the corporate green palette efficiently. Drag to compare.

Report before the corporate green palette

Report after the corporate green palette

BeforeAfter

Tables, charts and KPI tiles

Standardised building blocks that every track reuses.

Text interactions and spacing

Clickable labels, pop-ups and a screen spacing guide for vertical, horizontal and alignment rules.

Text interactions: card titles and chart filters

Final screens

Performance at a glance, detail one click away.

The Gross Margin report. Tap a marker to see how each part works.

Gross Margin report with KPI tiles, tabs, filter panel, waterfall and clickable labels

1KPI tiles
KPI performance at a glance. Colour denotes performance, and the vertical bar marks a clickable tile that opens an in-depth analysis page.
2Tabs
Further classify content and switch easily between views.
3Filter panel
Leaves room for customisation and filtering of data.
4Data visualisation
Graphs, waterfalls and charts with an intuitive use of colour: dark green totals, lime increases, grey decreases.
5Clickable text
Used across tables, KPIs and graphs to take the user to another page, improving their time efficiency.

Fixed Expenses report

The same system applied to another track: identical tiles, filters and waterfall conventions.

Deliver

From Adobe XD to SAP Analytics Cloud.

Design guideline

To ensure easy and seamless implementation on SAC, a document with every specification (typography, colour palette, spacing and more) was handed over to the developers.

Heineken NextGen Reporting Design System cover

Evolution of screens on SAC

Three builds of the Gross Margin report, as developed in SAC.

First Gross Margin screen developed in SAC — **First version**Developed in SAC

Second Gross Margin screen developed in SAC — **Second version**Developed in SAC

Final Gross Margin screen developed in SAC — **Final screen**Developed in SAC

Impact

Clearer reports, less cognitive load.

35+new screens across 9 tracks, all built on one design system.

Improved visual hierarchy for the content

A design system that ensures consistency across all reports

More options for users to customise and process data

Room for further modifications in a much easier way

Expanded SAC possibilities through better representation and new components

Fewer scrolls and more concise reports

More intuitive to use

Less cognitive load on users

Phase 2 · Heineken Project Core

Responsive, illustrated, built as components.

In the next phase we brought visual design and SAC analytics together: responsive designs, an evolved design system that uses all SAC capabilities, and a repository of standard components aligned with Heineken standards, including embedded CSS.