case study / design systems / lending apps

How I got two brands to share one set of designs

MCF and Reevo are two lending brands owned by the same company. Their apps do the same job, but each had to be designed from scratch. I built one shared set of design pieces that works for both. A new screen that used to take a full day now takes under an hour.

My role

Only designer

Company

Gojoko Technologies

Brands

MCF and Reevo

People using it

100,000+

MCFSK
Good morningSam Kaur
Left to pay
£4,250.00
62% paid offOn track
Next payment
£320.00
Due 1 Oct
Time left
14 months
Ends Nov 2027
Make a payment
MCF
ReevoSK
Good morningSam Kaur
Left to pay
£4,250.00
62% paid offOn track
Next payment
£320.00
Due 1 Oct
Time left
14 months
Ends Nov 2027
Make a payment
Reevo

Same screen, two brands. Built once, then switched to the other brand’s look in one step.

The problem

Every screen was designed twice, once per brand. Over time the two apps started to look and behave differently.

What I did

Built one set of ready-made design pieces, in four matching versions. Switching a screen to the other brand takes one step.

What changed

New screens: a full day down to under an hour. Design and build time cut in half.

01 / the problem

Two apps that should have matched, but didn’t

MCF and Reevo are run by the same team and take customers through the same steps. The only thing that should differ is the look: colours and style.

But each brand was designed in its own separate file, so everything was made twice. Then one day a developer built the same balance card two different ways, one for each app. He hadn’t made a mistake. There was simply nothing telling him the right way.

MCF version
Reevo version
  • Different corners
  • Different spacing
  • Different wording
  • Different text weight

The same card, made twice. None of these differences were on purpose. They crept in because nobody had one place to check.

With money, this matters. When the same number looks different from screen to screen, people start to doubt it. In lending, doubt costs trust.

Double the work

Everything made for MCF had to be made again for Reevo.

Mismatched apps

The same cards, buttons and forms looked and worked differently.

No single answer

Developers had nowhere to check, so the same questions kept coming up.

02 / the idea

Same pieces, different paint

Think of changing the theme on your phone. The apps stay exactly where they are; only the colours and style change.

The two brands already needed the same pieces: the same cards, buttons and forms. So I built those pieces once, and gave each brand its own “paint” to put on top.

MCFpieces + MCF paint
The shared piecesbuilt once
Reevopieces + Reevo paint

One set of pieces in the middle. Each brand just dresses it differently.

03 / what i built

Four matching kits, one switch

I made four kits of design pieces: MCF light, MCF dark, Reevo light and Reevo dark. Each kit has the same 30 pieces, with the same names, arranged the same way. Only the colours and style change.

Because the kits match exactly, the design tool can replace one kit with another in a single step. A screen designed for MCF becomes a Reevo screen, with nothing to redraw.

Pick a brand and a mode to switch the screen.

Try it. The screen never changes, only the kit it uses. This is exactly what happens in the design file.

04 / the moment it worked

The first new Reevo screen took under an hour

The real test came with the first new screen for Reevo. The old way meant starting from a blank page and spending a day rebuilding everything. Instead, I put it together from the MCF pieces and switched the kit. Everything changed over by itself.

Before
A full working day
After
Under an hour

Time to make a new Reevo screen. Nobody worked faster. The repeat work simply disappeared.

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.

Tanshay, on the first switch

05 / results

What changed for the team

50%

less time spent designing and building screens

40%

less time handing designs over to developers

Under 1 hour

to make a new screen for the second brand, instead of a full day

0

differences creeping in between the two apps, because both use matching kits

Developers now have 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.

06 / what i learned

Agree on names first

The switch only works if every piece has the exact same name in all four kits. I set those naming rules after I had already built the first pieces, and spent weeks renaming things to make them match. Next time, the rules come first.

It also grows easily. A third brand just needs its own kits: copy the pieces, add new paint, switch it on.

AVAILABLE FOR THE RIGHT WORK

Let's build something that actually works.

If you’re building a product that needs clarity, structure, craft and you care about getting the UX right. I’d like to hear about it.

Noida, Bangalore. Open to remote.

AVAILABLE FOR THE RIGHT WORK

Let's build something that actually works.

If you’re building a product that needs clarity, structure, craft and you care about getting the UX right. I’d like to hear about it.

Noida, Bangalore. Open to remote.

AVAILABLE FOR THE RIGHT WORK

Let's build something that actually works.

If you’re building a product that needs clarity, structure, craft and you care about getting the UX right. I’d like to hear about it.

Noida, Bangalore. Open to remote.

Create a free website with Framer, the website builder loved by startups, designers and agencies.