DigiExpress Annual Report

01 / Context & The Bottleneck

DigiExpress needed its first annual report landing page. I came in as an external, project-based designer, with a blank canvas and full ownership of the information architecture from day one.

That blank canvas was the actual challenge. Most case studies open with “here’s what was broken.” This one opens with “here’s what had to be built right, on the first attempt, with no precedent to lean on.”

The brief came from Marketing, with strategic input from the CTPO. Underneath a straightforward request (build the report page) was a sharper design problem: this page had to speak to two audiences who read, scan, and decide in fundamentally different ways.

B2C users, fast-scrolling, deciding in seconds whether the page earns their attention
B2B and investor-facing readers, scanning for credibility and depth, willing to dig if the page signals it’s worth digging into

audience-split.tsx

Two target personas with opposing engagement patterns, mapped against a single shared page structure

The engagement ran lean and fast: roughly a month from kickoff to handoff, a tight loop with Marketing and the Art Director, and a direct line to the CTPO when strategic calls were needed. That speed was the format of the collaboration, not a constraint to work around. It meant decisions had to be made with conviction, since there was no existing version of this report to benchmark against and no behavioral data to lean on.

What shaped the design approach:

No behavioral baseline to test against, so every decision had to be preventive by design, built to hold up on first launch, not patched after the fact
High content volume from Marketing, refined through several iterative passes to get the signal-to-noise ratio right
Engineering constraints were validated progressively throughout the sprint rather than locked upfront, which kept the design direction adaptive

The real question driving the project

How do you design a single, information-dense page that earns a casual user’s attention in the first 30 seconds, while still giving a B2B reader a credible path into the depth of the data, without either audience feeling like the page was built for someone else?

02 / Architecture & The Fix

Looking at the final page, the architecture answers the Context problem directly. The page isn’t one scroll of mixed content, it’s a repeating system, and that system is the actual design decision here.

The core pattern: headline number, then proof.

Every section opens with one large, isolated metric (total deliveries, total distance covered, number of active couriers) before any supporting visual appears. That ordering isn’t decorative. It’s the mechanism that lets a B2C user absorb the point of a section in under two seconds, while still giving a B2B reader a clear entry point into the detail sitting right below it.

section-module.tsx

Repeating module structure, headline metric followed by its supporting visualization, applied consistently across every section

Visualizing scale without a dashboard.

The report had to communicate numbers at a scale most users don’t intuitively process (millions of packages, tens of thousands of kilometers). Bubble charts and proportional sizing were used to let city-by-city and category comparisons read at a glance, without forcing the user to parse a table. Where a time-based trend mattered more than a single total, bar charts carried that job instead.

dataviz-system.tsx

Bubble sizing used for comparative scale across cities and categories, bar charts reserved for trend and time-based data

Staying inside the brand system, not next to it.

DigiExpress’s visual language is minimal and restrained, so the job wasn’t to introduce a new design layer on top of it, it was to extend it convincingly enough that every chart, icon, and section felt like it already belonged to the brand. That meant building the data visualization components to inherit the existing color logic, spacing rhythm, and iconography rather than importing a generic charting style.

brand.extends(system)

Chart and icon components built to extend the existing brand system rather than introduce a separate visual language

The real structural decision: one page, one escape hatch.

Instead of splitting the experience into a “light” B2C version and a “deep” B2B version, the page stays unified, and depth is offered once, deliberately, at the end: a single, clear path to download the complete report as a PDF. Every section above that point is built to be skimmable on its own, so a casual reader gets a complete story without ever needing the download, while anyone who wants the underlying detail has one obvious door to walk through.

end-of-scroll

Single downgrade path at the end of the scroll, directing readers who want full depth to the complete PDF report

Review loop.

Each section went through cross-functional review (design, content, marketing, business) before being considered final, checked against two questions each time: does this number stand on its own, and does this section still feel like DigiExpress. That loop is what kept twenty-plus data points from turning into a wall of numbers.

03 / Impact & Outcome

What shipped:

A single-page system that handles more than twenty distinct metrics without reading as a wall of numbers
A visual language fully inherited from the DigiExpress brand book, with no separate “data visualization” style bolted on top
One clear, deliberate path to depth (the full PDF report) instead of forcing every user through the same density of detail
A page built and approved end to end in about a month, with no prior version, no internal design team, and no behavioral baseline to start from

final-scroll.tsx

Full page scroll showing the complete section system from headline metrics through to the PDF handoff

What this project actually proved:

That the hardest version of this brief wasn’t “make the data look good.” It was holding two opposing audiences, a strict brand system, and a two-week clock at the same time, without any of the three giving way. The page that shipped is the evidence. No prior version existed to compare it against, and that was never going to change. The job was to make sure none ever needed to.

Working this closely with the DigiExpress team, Marketing, the Art Director, and the CTPO, left an impression beyond the deliverable itself. Despite being a project-based engagement, the collaboration felt closer to being embedded in the team than working as an outside contributor. That alignment, understanding each other quickly and speaking the same language around trade-offs, is a big part of why the page came together in two weeks without losing quality along the way.

04 / The Interface

↕ Scroll inside each frame to see the full page.