rain: Building Africa's first 5G network a design system to match
−30%
Design-to-dev handoff time, measured post-launch
1
Designer — built entirely solo from scratch
3
Surfaces unified: mobile, web, and internal tools
Role
UI Designer (sole designer)
Duration
1 year
Tools
Figma · Storybook · ZeroHeight
Gallery
Scope
Tokens · Components · Documentation
The problem
Rain launched Africa's first standalone 5G network — a genuinely historic moment in South African telecoms. But the product design infrastructure hadn't kept pace with the company's ambitions. The digital ecosystem was fragmented: inconsistent components across web and mobile, no shared token system, and no documentation that design and engineering could both work from.
The result was predictable — duplicated work, inconsistent UI, and a handoff process that created friction between design and development on every sprint. I was brought in as the sole designer to fix it, building a unified design system from the ground up while the company was simultaneously scaling its 5G product suite.
There was no existing system to extend or refactor. This was a blank-page problem — which meant every structural decision, from token naming to component API, was mine to make.
What I built
Design tokens first
Before a single component, I established a full token architecture for colour, typography, and spacing. This was the foundation everything else depended on — getting it wrong early would mean expensive refactoring later. I mapped rain's brand into a functional token system that worked across light and dark contexts and could be consumed directly by the engineering team in Storybook.
Component library in Figma and Storybook
I designed and documented every reusable component: forms, navigation, data usage displays, eSIM flows, skeleton loaders, modals, date pickers, search, tags, breadcrumbs, and more. Each component was built with variants in Figma and had a corresponding implementation in Storybook — so design and code were always in sync. This dual-layer approach was the specific mechanism that drove the 30% handoff reduction.
Documentation in ZeroHeight
Components without documentation are components that get ignored. I introduced ZeroHeight as the single shared reference for the entire system — covering usage guidelines, accessibility rules, motion and micro-interaction specs, and visual hierarchy principles. For the first time, product, marketing, and engineering had one place to go for design decisions.
Telecom-specific patterns
Generic UI libraries don't account for the complexity of a telecom product — data usage visualisations, network coverage states, eSIM activation flows, and real-time connectivity indicators all needed patterns that didn't exist off the shelf. I designed these from scratch, validated them against user behaviour, and documented them as first-class components in the system.
The outcome
After rollout, we measured a 30% reduction in design-to-dev handoff time — a direct result of the Figma-to-Storybook parity built into the system. Teams stopped debating implementation details because the documentation answered those questions before they were asked.
The system became the foundation for all subsequent rain product launches — customer onboarding, data management tools, partner portals, and campaign sites — without requiring design to restart from scratch each time. It also meaningfully strengthened the consistency of rain's brand across digital touchpoints at a moment when the company was in the public eye for its 5G milestone.
What I'd do differently
I'd involve engineering earlier in the token-naming decisions. I made sensible choices, but there were naming conventions I used in Figma that didn't map cleanly to how developers wanted to reference them in code. We aligned eventually, but it cost time. Running a two-hour joint session with engineering before finalising the token architecture would have avoided most of that friction entirely.
