Design systems and process
Building the first design system for B2B driver charging.
Elli had no design system, and the first version was chaotic. I built a system around the B2B driver app, a pattern layer on top of it, and a Figma standard that told developers where to find specifications. I also helped introduce planning processes for initiatives that had none.
- Role
- Product and UX design, B2B driver charging
- At Elli
- 2022–2023
- Design contribution
- First design system and initiative processes
No system. No process.
Elli Fleet Charging is a B2B driver charging product. Drivers use an app, a website, and charging cards, while fleet managers oversee charging, billing, and reimbursement in a console. At the time there was no design system and no established way to plan initiative work. My job was to build that structure around the driver app while still designing its flows.
Design systems
Building a system where none existed.
Elli had no design system. The team created the first version, and it was chaotic: people changed the main components, so the parts that were meant to be shared could not be relied on.
I built a system around the B2B driver app and created a sub design system based on patterns on top of it. I also set a Figma standard that showed developers where to find the design specifications.
- What I shaped
- The system around the B2B driver app, a pattern layer above its components, and the Figma standard for specifications.
- What it demonstrates
- Starting a design system from nothing and giving it a structure a whole team can work inside.
In detail · System
From a chaotic first version to a structured system.
A design system only works if the shared parts stay shared. This is how the system at Elli was structured to make that possible.
- Problem
- People changed the main components, so the first version of the system was chaotic and inconsistent.
- Foundation
- I created a system around the B2B driver app, so the components belonged to a real product.
- Pattern layer
- A sub design system based on patterns created consistency above the level of individual components.
- Standard
- A Figma standard defined how developers could find the design specifications.
Driver app and console
Keeping app, web, and console one service.
Elli Fleet Charging makes the driver experience part of a larger company-car system. Drivers charge publicly with an app or charging card, while the business side needs the charging processes to be documented, billed, and understood centrally.
I worked on the driver app and its website version. The driver side and the fleet-manager console did not need to look identical, but they needed enough shared structure and language that charging, billing, and card behavior did not feel reinterpreted from surface to surface.
- What I shaped
- Driver app and website flows within the Fleet Charging context.
- What it demonstrates
- Designing for confidence in service moments where interface, infrastructure, and driver expectation meet.
Status people can act on.
Unclear status or fragmented flow logic quickly becomes uncertainty in a real charging moment. The app had to communicate what was happening, what was pending, and what the driver could do next.
One product model across surfaces.
App, web, and console shared one underlying product model while respecting their different contexts, so charging, billing, and card behavior stayed consistent between them.
Beyond the design files
Putting structure around the work.
Work on initiatives at Elli was scattered and not planned properly, and there was no established process for running an initiative from start to finish.
I helped establish the initiative processes that were missing, so the work had a structure to be planned and followed.
Design lessons
What this work taught me about design.
Shared means protected.
When anyone can change the main components, they stop being shared. A system needs rules about what can change and who changes it.
Patterns carry consistency.
Components make consistency possible. Patterns make it likely, because they settle how recurring situations are handled.
Developers need one place to look.
A system only helps delivery if specifications can be found without asking. A clear Figma standard does that.