ASAP Design System
One system for eight brands, 12 apps, and 16 admin panels
One system for eight brands, 12 apps, and 16 admin panels
One platform for the
services a Bangladeshi business runs on
Moving ShopUp's design system from Sketch and Zeplin to a tokenized Figma library that every brand and team could build from.
Moving ShopUp's design system from Sketch and Zeplin to a tokenized Figma library that every brand and team could build from.
Role
Role
Senior designer, led a team of three designers on the system.
Senior designer, led a team of three designers on the system.
Design System
Design System
Sr. Designer
Sr. Designer
Headline outcomes
Headline outcomes
8
Brands running on a single system
Cut from monthly operating cost
5 to 3
Days per design sprint, after rollout
Weekly invoice errors, down from 160
40%
Cut from design to development time
Weekly invoice errors, down from 160
1,500+
Variations across 117 component categories
Retailers reached across the country
8
Cut from monthly operating cost
40%
Cut from design to development time
5 to 3
Fewer navigation misclicks
1,500+
Retailers reached across the country
Overview
Overview
ShopUp runs eight brands across logistics, B2B commerce, and embedded finance, spread over 12 mobile apps and 16 admin panels used by 30 teams.
Led the rebuild of the shared design system in Figma with a team of three designers, working with engineering and product from the first audit to rollout.
ShopUp runs eight brands, from last mile logistics to B2B commerce and embedded finance. Every one of them was designed from a single Sketch library, handed off through Zeplin.
As the company grew, that library became the bottleneck. I led the rebuild in Figma with a team of three, working with engineering and product from the first audit to rollout.
The problem
The problem
The Sketch library and Zeplin handoff were set up for a single brand. By the time ShopUp ran eight, every product was still being designed from those same files.
The Sketch library and Zeplin handoff were set up for a single brand. By the time ShopUp ran eight, every product was still being designed from those same files.
Nested component & color selection in Sketch
Canvas full of redundant components in Sketch
Nested component & color selection in Sketch
Canvas full of redundant components in Sketch
Hard to find
Components were buried in nested Sketch menus, so designers missed them and built duplicates.
Components were buried in nested Sketch menus, so designers missed them and built duplicates.
Manual rebranding
Designers recolored every component by hand, once for each of the eight brands.
Designers recolored every component by hand, once for each of the eight brands.
Unsafe to update
Editing one shared symbol could silently change every screen already live in production.
Editing one shared symbol could silently change every screen already live in production.
Hard to find
No single vendor covers travel, recharge, and conveyance, so HR juggles many partners.
Manual rebranding
Designers recolored every component by hand, once for each of the eight brands.
Unsafe to update
Invoices sit in different places, so finance cannot reconcile cleanly.
Research and findings
Research and findings
UX audit
UX audit
Every app, site, and admin panel
Every app, site, and admin panel
Interviews
Interviews
Designers, developers, PMs, staff, and users
Designers, developers, PMs, staff, and users
Benchmarking
Benchmarking
Mature systems at large companies
Mature systems at large companies
Tool review
Tool review
Tools for components and handoff
Tools for components and handoff
Five problems came up in every product, and each one became
a goal for the new system.
Five problems came up in every product, and each one became
a goal for the new system.
Key findings from research
Key findings from research
Designs looked different in every product
Designs looked different in every product
Designers missed components and built duplicates
Designers missed components and built duplicates
Brand colors were changed by hand
Brand colors were changed by hand
Developers rebuilt UI that already existed
Developers rebuilt UI that already existed
Nobody could maintain the system at scale
Nobody could maintain the system at scale
Goals Established
Goals Established
Build every brand from one set of tokens
Build every brand from one set of tokens
Make every component findable in one search
Make every component findable in one search
Switch brands without editing a single screen
Switch brands without editing a single screen
Hand engineering tokens they can use directly
Hand engineering tokens they can use directly
Document it so it outlives its builders
Document it so it outlives its builders
Key findings from research
Designs looked different in every product
Designers missed components and built duplicates
Brand colors were changed by hand
Developers rebuilt UI that already existed
Nobody could maintain the system at scale
Goals Established
Build every brand from one set of tokens
Make every component findable in one search
Switch brands without editing a single screen
Hand engineering tokens they can use directly
Document it so it outlives its builders
Solution, one flexible system built from three layers of tokens
Solution, one flexible system built from three layers of tokens
Change a primitive and everything referencing it updates. Add a new one instead, for a new brand or, a new requirement, and only the work built from then on picks it up. Screens still on the old references stay as they are, so the system can carry new and legacy design at the same time.
Primitives
The raw values, every color and size the brands need, with no meaning attached yet.
Replace totals with stage-level status, so merchants see exactly where parcels sit.
References
The same values renamed by where they get used, so the system says what a value is for.
Put create, track, pay, and return within a single click of landing.
Component tokens
Each component's own set of values from references, ready for engineering to use in code.
Each component's own set of values from references, ready for engineering to use in code.
Primitive
Colors
Color
Brand / ShopUp / Primary /
Base
Neutral /
Grey 100
Size
Size. 16px
Size. 12px
Reference
Values
Color
Surface / Action /
Base
Text / Link-Brand-Active /
Grey 100
Size
Spacing-3xs /
#Size. 12px
Spacing-2xs /
#Size. 16px
Component
Tokens
Component Color
Button-BG-Primary-Default /
Base
Button-Text-Default /
Grey 100
Button / Primary / Large / Enabled
Button
Solution, one flexible system built from three layers of tokens
Change a primitive and everything referencing it updates. Add a new one instead, for a new brand or, a new requirement, and only the work built from then on picks it up. Screens still on the old references stay as they are, so the system can carry new and legacy design at the same time.
Primitives
No single vendor covers travel, recharge, and conveyance, so HR juggles many partners.
References
The same values renamed by where they get used, so the system says what a value is for.
Component tokens
Each component's own set of values from references, ready for engineering to use in code.
Primitive
Colors
Color
Brand / ShopUp / Primary /
Base
Neutral /
Grey 100
Size
Size. 16px
Size. 12px
Reference
Values
Color
Surface / Action /
Base
Text / Link-Brand-Active /
Grey 100
Size
Spacing-3xs /
#Size. 12px
Spacing-2xs /
#Size. 16px
Component
Tokens
Component Color
Button-BG-Primary-Default /
Base
Button-Text-Default /
Grey 100
Button / Primary / Large / Enabled
Button
Key decisions
Key decisions
Key decisions
01 · SCOPE
Split design problems from ops problems
Half the complaints were not interface problems. "My parcel is stuck at the hub" is an operations problem, and no dashboard fixes it.
Half the complaints were not interface problems. "My parcel is stuck at the hub" is an operations problem, and no dashboard fixes it.
Chose to sort every finding into design or operations before proposing a single screen, then walked PMs and business leads through both lists. It narrowed my own scope to seven issues, and sent the rest to the teams who could act on them.
Chose to sort every finding into design or operations before proposing a single screen, then walked PMs and business leads through both lists. It narrowed my own scope to seven issues, and sent the rest to the teams who could act on them.
02 · NAVIGATION
A left rail, with Create parcel pinned
Core actions sat under layered dropdowns that merchants reopened every day.
Chose a rail over a top bar, trading horizontal space for a structure that absorbs new services without another dropdown layer.
The rail collapses to icons and keeps actions visible. Track parcel stayed in the top bar: important, but not part of the daily loop.
Core actions sat under layered dropdowns that merchants reopened every day.
Chose a rail over a top bar, trading horizontal space for a structure that absorbs new services without another dropdown layer.
The rail collapses to icons and keeps actions visible. Track parcel stayed in the top bar: important, but not part of the daily loop.
03 · DASHBOARD
The journey by stage, not the total
The old dashboard showed totals and percentages, with returns hidden entirely.
Chose density over calm. Totals told merchants the day was fine. Stage breakdowns told them which parcels needed a phone call.
Forward journey split across sorting, transit, hub, delivery, and hold, mirrored for returns and collapsed by default. Every stat links to its list, so a number is a starting point.
Drag the red handle to compare. Same data, now resolved into the stage where a parcel is actually sitting.
Drag the red handle to compare. Same data, now resolved into the stage where a parcel is actually sitting.
04 · PAYMENTS
Make the money cycle visible
Most parcels are cash on delivery. The old panel showed what had been disbursed and what was in process, but never what was landing tomorrow or what the merchant owed REDX.
Chose to show the whole cycle, including the dues. Unclear amounts were causing service suspensions merchants never saw coming.
Lifetime earnings anchors the panel, next day payment shows what lands tomorrow, and dues sit as a red card with Pay now.
Drag the red handle to compare. Two totals before, the full cycle after, with the action attached.
Drag the red handle to compare. Two totals before, the full cycle after, with the action attached.
05 · MOBILE
Split the dashboard into two tabs
Mobile merchants got totals and nothing behind them. No stage view, no way to open a number, and no sign of when money would arrive.
Chose to split the dashboard into Parcel and Payment tabs rather than compress the desktop layout into one scroll. Each tab answers its question in full instead of summarising both.
Parcel lists every stage with its count. Payment carries earnings, tomorrow's payout, dues, and invoices. Create parcel stays reachable the whole way down.
New dashboard
Old dashboard
06 · SYSTEM
Build REDX its own design system
The shared system carried the variety seven brands needed, had no dark mode, and REDX was branching into products of its own.
Chose a new system over extending the shared one, inside the same two months. Logistics patterns repeat across parcels, payments, and returns, so a smaller library covers them without a new component for every case.
Getting it agreed
Getting it agreed
Getting it agreed
Four positions I had to hold, and one I traded.
The flows above shipped. These were the calls that shaped how they feel.
Add more colour to the data
At this density colour is not clarity, it is a puzzle. The one I traded: iconography instead, only where a stage earns it, ranked with merchants and PMs.
At this density colour is not clarity, it is a puzzle. The one I traded: iconography instead, only where a stage earns it, ranked with merchants and PMs.
Show less data
Less data was the problem, not the fix. I brought the support tickets, Play Store reviews, and social analysis I had already run. Evidence, not opinion.
Less data was the problem, not the fix. I brought the support tickets, Play Store reviews, and social analysis I had already run. Evidence, not opinion.
Make the banners bigger, like the website
Make the banners bigger,
like the website
No merchant asked for it, and this is where someone handles thousands of parcels a day. REDX has social channels for offers.
No merchant asked for it, and this is where someone handles thousands of parcels a day. REDX has social channels for offers.
We do not want a new design system
The fair objection was cost. Mine was that the shared system already cost more: seven engineering teams in the path of every change, and no dark mode.
The fair objection was cost. Mine was that the shared system already cost more: seven engineering teams in the path of every change, and no dark mode.
Add more colour to the data
No single vendor covers travel, recharge, and conveyance, so HR juggles many partners.
Make the banners bigger, like the website
No merchant asked for it, and this is where someone handles thousands of parcels a day. REDX has social channels for offers.
Show less data
Invoices sit in different places, so finance cannot reconcile cleanly.
We do not want a new design system
Invoices sit in different places, so finance cannot reconcile cleanly.
Impact
Impact
Before vs after launch, from analytics, Hotjar events, and support ticket volume.
Before vs after launch, from analytics, Hotjar events, and support ticket volume.
27.6%
Faster time to first parcel
20%
Fewer support disbursement tickets
17.8%
More invoice views per merchant
12%
Better on-time dues paid
27.6%
Faster time to first parcel
17.8%
More invoice views per merchant
20%
Fewer support disbursement tickets
12%
Better on-time dues paid
Time to first parcel
New merchants used to sign up, fail to find where to start, and come back days later, if they came back. Now they create one in the same session.
New merchants used to sign up, fail to find where to start, and come back days later, if they came back. Now they create one in the same session.
Disbursement tickets
The calls that stopped were visibility questions: what is pending, what lands tomorrow. What remains is payment timing, a policy question, not an interface one.
The calls that stopped were visibility questions: what is pending, what lands tomorrow. What remains is payment timing, a policy question, not an interface one.
Reflection
Research outran the plan
Research outran the plan
A month of a two-month project, which left less room for exploration. Still the right trade, but I would scope it tighter.
A month of a two-month project, which left less room for exploration. Still the right trade, but I would scope it tighter.
Analytics only worked in aggregate
Analytics only worked in aggregate
Merchants share one login across staff, so nothing user-level from Hotjar held up. Every insight that changed the design came from interviews.
Merchants share one login across staff, so nothing user-level from Hotjar held up. Every insight that changed the design came from interviews.
Stage breakdowns beat totals
Stage breakdowns beat totals
Merchants valued knowing which parcels were stuck far more than knowing how many had been delivered.
Merchants valued knowing which parcels were stuck far more than knowing how many had been delivered.
The left rail earned its space
The left rail earned its space
The one decision merchants named unprompted, and it leaves room for services REDX has not built yet.
The one decision merchants named unprompted, and it leaves room for services REDX has not built yet.
Mobile needed its own structure
Mobile needed its own structure
Compressing the desktop layout would have buried the same numbers again. Splitting it into two tabs is what worked.
Compressing the desktop layout would have buried the same numbers again. Splitting it into two tabs is what worked.
The desktop dashboard is still dense
The desktop dashboard is still dense
One-on-one testing is the next step, to find what can come off without losing the drill-down.
One-on-one testing is the next step, to find what can come off without losing the drill-down.
Reflection
Break complexity into reusable parts
Shared components kept a feature heavy app coherent, and made each new flow faster to build.
Let research lead
The HR interviews and competitor study drove the structure, not my assumptions
A new market runs on some assumptions
This is a first mover in Bangladesh, and no one enters an untested market on research alone. The beta is how we learn which bets hold.
What I would change
Running a build this large solo taught me pacing. Next time I would validate the booking flows with real users before shipping.
What happened next
What happened next
The dashboard bought the rest of the site
The dashboard bought the rest of the site
REDX is revamping the whole panel now, flow by flow, migrating each one onto the new design system.
REDX is revamping the whole panel now, flow by flow, migrating each one onto the new design system.
Research runs with every flow
Research runs with every flow
Short interview bursts as each one is redesigned, so pain points surface during the work instead of after launch.
Short interview bursts as each one is redesigned, so pain points surface during the work instead of after launch.
Merchants asked for an app
Merchants asked for an app
Responsive web covers the dashboard. Everything else still needs a desktop, and they want notifications, parcel creation, and live sales on their phone.
Responsive web covers the dashboard. Everything else still needs a desktop, and they want notifications, parcel creation, and live sales on their phone.
The dashboard bought the rest of the site
REDX is revamping the whole panel now, flow by flow, migrating each one onto the new design system.
Research runs with every flow
Short interview bursts as each one is redesigned, so pain points surface during the work instead of after launch.
Merchants asked for an app
Responsive web covers the dashboard. Everything else still needs a desktop, and they want notifications, parcel creation, and live sales on their phone.
The first full REDX app
The first full REDX app
The old one showed data, carried none of the branding, and had no logistics features. I am designing this one with merchants now.
The old one showed data, carried none of the branding, and had no logistics features. I am designing this one with merchants now.
A wider market
A wider market
An app brings in small and hobby sellers, not only merchants shipping hundreds of parcels a day.
An app brings in small and hobby sellers, not only merchants shipping hundreds of parcels a day.
The first full REDX app
The old one showed data, carried none of the branding, and had no logistics features. I am designing this one with merchants now.
A wider market
An app brings in small and hobby sellers, not only merchants shipping hundreds of parcels a day.