How I got two brands to share one set of designs.
MCF and Reevo, two lending brands owned by Gojoko Technologies. As the senior designer, I built one shared set of design pieces that works for both. A new screen that took a full day now takes under an hour, and design and build time halved.
Problem.
Two apps run by the same team, taking customers through the same steps, designed twice in two separate files.
The same balance card, built two ways
One day a developer built the same card differently for each app. He hadn’t made a mistake. There was simply nothing telling him the right way.
Everything made twice
Whatever was made for MCF had to be made again for Reevo.
Drifting apart
The same cards, buttons and forms looked and worked differently.
Nowhere to check
Developers had no one place to look, so the same questions kept coming up.
In lending, doubt costs trust
When the same number looks different from screen to screen, people start to doubt it.
Idea.
The two brands already needed the same pieces. Build them once, then give each brand its own paint on top.
Like changing the theme on your phone: the apps stay where they are, only colours and style change.
One set of pieces in the middle
Cards, buttons and forms built once. Each brand just dresses them differently, so a fix lands in both apps at the same time.
The pieces
Layout, behaviour, spacing and names, identical for MCF and Reevo.
The paint
Colours, type and corner style, kept apart from the pieces.
A screen designed for MCF becomes a Reevo screen
With nothing to redraw. The design tool swaps one brand’s paint for the other in a single step.
Kits.
Four kits of design pieces, each with the same 30 pieces, the same names, arranged the same way.
matching kits: two brands, light and dark each.
MCF light
The original brand, daytime palette.
MCF dark
Same pieces, dark palette.
Reevo light
The second brand’s look on the same pieces.
Reevo dark
Dark palette for the second brand.
Replace one kit with another in one step
Because the kits match exactly, the design tool can swap them. The screen never changes, only the kit it uses. That is exactly what happens in the design file.
Switch.
The real test was the first new Reevo screen, with a developer beside me. Everything changed over by itself.
“I switched the kit from MCF to Reevo and the whole screen updated in front of us. The developer next to me said, ‘Wait, that’s it?’ That was when I knew it worked.”
A full day
Start from a blank page and rebuild every piece for the second brand.
Under an hour
Assemble from the MCF pieces, switch the kit, review.
Nobody worked faster
The repeat work simply disappeared: the second version of every screen no longer existed.
Results.
What changed for the team once both apps ran on matching kits.
less time spent designing and building screens.
less time handing designs over to developers.
to add a screen for the second brand.
differences creeping in between the two apps.
One place to check for both apps
A question answered once is answered for both. And changing a screen’s brand stopped being a project.
Lesson.
The switch only works if every piece has the exact same name in all four kits. I learned that the slow way.
Weeks of renaming
I set the naming rules after I had already built the first pieces, and spent weeks renaming things to make them match.
Rules before pieces
Agree the vocabulary before the first component exists.
It grows easily
Copy the pieces, add new paint, switch it on.
Gojoko Branding
The identity refresh for the parent company behind MCF and Reevo. My first brand project.
Talk.
Open to senior and lead product design roles in India or remote.