Case study 17 / 27

Out of Dark

A customer journey analytics product that makes dense data easy to read, with light as the brand.

A laptop on dark rock showing the Out of Dark dashboard with an amber glow behind it
Client
Out of Dark
Category
Customer journey analytics
Scope
Brand, product design, design system, developer handoff
Type
Customer portal

01 · Challenge

Out of Dark helps businesses understand their customer journeys, but cost, engagement and satisfaction data lived in separate places, in dense reports that were hard to compare.

02 · Approach

We designed brand and product together: light as the visual theme, a clear structure for dense analytics data, and a component system the client's developers can build on.

03 · Outcome

A product that connects each customer journey with the numbers behind it: 100+ screens across desktop and mobile on one shared component library.

01The challenge

Customer data is only useful when someone can read it at a glance.

Bring costs, engagement and satisfaction into one view

Out of Dark helps businesses understand their customer journeys. The data that matters, budgets, visits, calls and satisfaction, usually sits in different tools and different reports, so teams can't easily see where an experience is working or failing.

We created the brand and the product design together, putting costs, engagement and satisfaction into one shared view across each stage of the journey. Developing them side by side meant the interface felt like a single, coherent experience as it took shape.

02Strategy

Brand idea

Light in the dark

Analytics tools tend to either shout with colour or disappear into grey. Our idea was to treat light as the brand: a quiet, amber glow that points to what needs attention, so the data stays calm and the signal stands out.

100+
Screens designed
2
Responsive views: desktop and mobile
1
Shared component system

Metrics published by Dataleap as of 2025 across production software deployments.

03Brand

Light as a visual theme

The identity uses light as its theme: an amber glow moving across near-black surfaces. We carried it into the interface while keeping reports and customer data easy to scan. A distinctive look matters in a crowded category, but only if it never gets in the way of the work users came to do.

A laptop on dark stone showing the Out of Dark products and services board
A black notebook embossed 'Ready to know your customer?' with an amber band
The Out of Dark app icon beside a messages icon, with an amber wedge
Two colleagues in business clothes reviewing a tablet from above

04Journeys

Made complex customer reports easier to scan

Budgets, visits, calls and satisfaction sit in the same journey, so users can compare what matters without switching views. Card layouts, visual hierarchy and colour-coded indicators separate the signals in a dense interface, and users can move from the wider journey to the data behind a specific point in the experience.

A tablet showing the Out of Dark home view: 'How we're doing?', budget and a spend chart
A customer journey map of connected cards: waiting for clients, company blog, trial setup and satisfaction survey
A costs panel with a green line chart and a history table
An actions list with priorities and owners: Key Phases and Touchpoints, From Analysis to Action
The Out of Dark mobile app with a budget, costs and visits summary
Desktop screens of the product side by side: journey boards, charts and phases

05Handoff

A foundation the client's developers can build on

A consistent design system gives the client's developers a clear foundation. We adapted a component library to the design, so the team can implement and extend the product without redrawing it each time, and a product with 100+ screens stays consistent as it grows.

  1. 01

    Understand the journey

    Map the stages and the signals that matter at each one.

  2. 02

    Design the views

    Desktop and mobile layouts for the data users need to compare.

  3. 03

    Prepare for development

    Reusable components and a handoff the client's team can build on.

06Deliverables

Brand

  • Identity
  • Light as a visual theme

Product

  • 100+ screens
  • Desktop and mobile views
  • Journey, cost and satisfaction views

System

  • Adapted component library
  • Developer handoff
Next case studyOVBFive tools, one place to work.