Back to work Case Study · Service & Product Design · B2B

Revolt Customer Portal

Making battery recycling easier to understand, track, and act on.

A customer-facing portal for Northvolt Revolt, designed to help recycling customers follow orders, understand material progress, and act on key next steps — built and MVP-tested with B2B customers.

My roleUX/UI Designer — Research, journey mapping, task flows, wireframes, UI design, and usability testing.
TimelineMay 2023 – April 2025
TeamPMs, stakeholders, developers, domain experts
ToolsFigma · FigJam · Miro · Notion
Service Design UX Research Journey Mapping Task Flows UI Design Usability Testing
one place for status, requests & documents
Revolt customer portal — main dashboard showing sent items, recycled materials, KPIs and follow-up shortcuts
01 The messy service

Battery recycling is simple to say — and brutally complex to do.

Before a single screen could be designed, the service had to be understood. The recycling journey involved scattered emails, unclear ownership, compliance steps, logistics details, and status updates that customers could not easily follow.

The current as-is customer journey — OEM actions, goals, needs and channels across awareness, consideration, purchase, shipping goods and new batteries, dotted with red pain-point notes and open 'what problem do they face?' questions
As-is the service as it really ran
LogisticsPallets, weights, pick-up locations & transport hand-offs
ComplianceCertificates & traceability needed — surfaced too late
Hazardous materialStrict handling rules most customers don't know
Pricing & reportingGate fees, invoices, impact figures — all elsewhere
Multiple teamsOperations · sustainability · sales · Northvolt IT
Status & comms"Where is my request?" — no single answer

"We understood the process internally. Our customers never saw a clear version of it."

— Stakeholder interview, synthesis phase
02 Mapping the truth

The moment the service became understandable.

Through stakeholder interviews and need mapping, I separated what customers needed to know from what the business needed to capture. This became the foundation for the portal's information architecture and task flow.

Need-mapping artifact — requirements gathered around the digital recycling platform, clustered by Revolt-automotive customers, logistics, and connected systems
every screen now traces back to a real, documented need — not a guess.
1

Customers managing shipments

Booking pick-ups and tracking requests, requirements and status from one place.

2

Internal support

Onboarding accounts and setting customers up behind the scenes.

3

Sustainability & reporting

Traceability and documents for compliance and impact reporting.

3
Stakeholder mental models
Operations, sustainability and sales each saw a different service — the portal had to reconcile them.
7+
Steps invisible to the customer
Key stages of the recycling journey happened entirely off-screen, quietly eroding trust.
1
Source of truth, missing
Nothing showed status, requirements and documents together — the core gap to close.
03 From journey to flow

A sprawling service journey, resolved into a flow you can build.

This was the heart of the project. I mapped the desired end-to-end service for OEM customers — every stage, goal and need across the whole lifecycle — then resolved it into a clean, screen-by-screen task flow: the logic the whole portal is built on.

Before The desired service journey for OEM customers — every stage, action, goal and need across the full lifecycle. Service journey
The full OEM circular-customer journey map across awareness, consideration, purchase, request pick-up, material flow, withdrawal and new batteries
After One product task flow — order, location, package type, contents, submit, confirm — branching only where it must. Product task flow
Pick-up flow for OEM — a clean left-to-right task flow from order pick-up through adding packages to submission and confirmation
04 Designing confidence

The interface stays calm, so the customer stays confident.

With the structure settled, the UI could do one thing at a time — clear status, requirements up front, and never asking the customer to understand the machinery behind it.

Pick-up order start screen — a guided entry explaining the three steps to create a pick-up, with a battery materials photo
Start a pick-upA guided entry point that sets expectations — three steps, about ten minutes — before any complexity appears.
Follow up orders table — Pending, Approved and Draft status pills, filters, pick-up location, weights and tracking label download
Track every requestStatus is never a mystery: pending, approved and draft states read at a glance, with documents attached.
Order content side panel showing total packages, gross weight, contact info and a list of packages with locations
Package details & documentsEverything for one order — packages, weights, contacts and labels — collected in a single focused panel.
Low-fi wireframe
Low-fidelity greyscale wireframe of the home dashboard — structure and hierarchy laid out before any colour or styling
High-fidelity UI
High-fidelity home dashboard — Total Sent Items, Recycled Materials, KPIs and Follow Up shortcuts with colour and clear data hierarchy
05 Testing & iteration

Testing didn't validate the design — it changed it.

I tested the prototype with representative users and translated each friction point into a concrete design change — from clearer navigation to upfront requirements and confirmation states.

Finding 01 · Navigation

Users couldn't tell where their request was in the process.

Design response

Added a persistent status stepper on every screen, so the current stage and what's next are always visible.

Finding 02 · Requirements

Compliance requirements appeared too late, causing rework.

Design response

Surfaced requirements up front as a checklist at request creation, with inline guidance instead of post-submission errors.

Finding 03 · Language

Internal, industrial terminology confused non-expert users.

Design response

Rewrote labels in plain customer language and added short, contextual definitions for unavoidable technical terms.

Finding 04 · Confidence

No confirmation after key actions left users unsure it worked.

Design response

Added clear confirmation states and next-step prompts after every submission, closing the trust gap from research.

06 Focused MVP

Not everything could be built at once — so we put trust first.

I used MoSCoW prioritization to keep the first release focused on trust-building essentials: live status, upfront requirements, document handling, and request tracking. Nice-to-have ideas were intentionally moved out of scope.

MustMVP
  • Request a recycling pick-up
  • Live status tracking
  • Up-front requirements checklist
  • Document upload & storage
ShouldFast-follow
  • In-portal messaging
  • Compliance reporting export
  • Multi-site account view
CouldLater
  • Sustainability impact dashboard
  • Saved request templates
  • Role-based permissions
Won'tNot now
  • Public marketplace features
  • Automated pricing engine
  • Native mobile app

Read left to right: trust-building essentials come first, ambition deferred with intent. The strike-through items were deliberately ruled out of scope, not forgotten.

My contribution

I helped turn an undefined, multi-stakeholder service into a structured, tested product by mapping user needs, designing task flows, testing prototypes, and prioritizing a focused MVP.

The most valuable work happened before the UI: making the service understandable enough to design.

The portal moved into build, and the MVP was validated with real B2B recycling customers. Northvolt's bankruptcy stopped the release before launch — but the tested flows and service map had already proven the design against real users and real operations.

01

Structure is the design

In complex B2B services, the real work is sequencing and clarity — long before visual polish.

02

Trust is built in steps

Visibility, confirmation and plain language did more for confidence than any single feature.

03

Prioritize by evidence

Research and testing — not opinion — decided what earned a place in the first release.

← Back to all work Get in touch