Say hello :)

Mesha’s Design System

Overview

Mesha’s design system was originally built by a third-party agency, but as we scaled, it became clear it wasn’t quite working for our product. The colors weren’t accessible, the typography made scanning harder, and after pivoting from Crypto to a business finance platform, the brand just didn’t reflect what we had become.

Instead of doing a full overhaul, we tackled it piece by piece—fixing what mattered most first while keeping things moving.

This case study walks through that process, from refining colors and typography to improving components and making design and dev work better together.

Instead of doing a full overhaul, we tackled it piece by piece—fixing what mattered most first while keeping things moving.

This case study walks through that process, from refining colors and typography to improving components and making design and dev work better together.

Instead of doing a full overhaul, we tackled it piece by piece—fixing what mattered most first while keeping things moving.

This case study walks through that process, from refining colors and typography to improving components and making design and dev work better together.

Role

Founding Product Designer

Company

Mesha

Timeline

2023

Highlights

Why a new design system?

Mesha’s design language was created by a third-party agency with a focus on brand design.

It was designed before my time and overtime, I realized it didn’t translate well to UI. But we had to prioritise user requests and business goals first. Now, with a stable app and a growing user base, it was the perfect time for a refresh.

Our brand didn’t align with the product after the pivot .

We were thinking a lot about who we are as a brand and how we’ve grown. After the pivot, it became clear that the bright, bold UI that once defined us no longer felt aligned with the product we’re building or the way we want to show up for our users.

To put it simply, Mesha felt like a guy in his early twenties rocking bright sneakers and an oversized tee.

It’s fun, but it’s not quite who we are anymore. We were ready to evolve into someone more refined—still approachable, but more mature.

Think early thirties, swapping the oversized tee for a well-fitted blazer, but still rocking fun socks and a pocket square that’s just a little offbeat—someone you’d trust with important things, who’s confident, capable and still knows how to keep it real.

The pivot

Where we started

Mesha began as a platform where startups could manage both fiat and crypto transactions in one place. While the idea was exciting, it became clear that the market wasn’t ready—crypto adoption was still niche, and most businesses preferred separate tools for fiat and crypto.

Why we pivoted

We soon realized our users had bigger challenges. They didn’t just need help managing transactions—they needed a way to simplify their entire accounting process. That’s when we decided to pivot.

And, now

Today, Mesha helps companies manage all their accounting needs in one place— bookkeeping, transaction reconciliation, tax compliance, and more.

Fixing the basics

We needed a plan to ensure the update didn’t disrupt the product velocity or break anything.

After a lot of research and chatting with product designers from various companies, I came up with a plan: tackle one component at a time and update it throughout the app.

Some elements might look inconsistent during the process. But it was a tradeoff we were willing to make. As long as this approach let us ship updates faster, we’d have a polished app in no time!

Moving away from the neon green.

One of the main issues with our old UI was accessibility. Our primary color was neon green, which we used for buttons and highlights. It has high luminance, so the high contrast against a white background made it hard on the eyes.

To improve this, we introduced purple for badges, avatars and things like this, and used our darkest gray for buttons. We still use neon green sparingly in the app but kept it more prominent on our marketing site to reflect the fun side of our brand.

And, hello Inter!

We decided to switch from Power Grotesk to Inter. While Power Grotesk has personality, it wasn’t the most practical for an interface—it made scanning harder, and let’s be real, people mostly scan on the internet. Inter, on the other hand, is designed for UIs—it’s easier to read at small sizes, has better spacing, and feels more balanced in our data-heavy interface.

Setting up variables.

We use Tailwind CSS, so our developers are more familiar with Tailwind utilities instead of pixels, which I usually work with in Figma. To make handoffs smoother, I set up Tailwind utilities as variables on Figma - padding, gap, rounded corners, breakpoints, texts and colors.

Now, both design and development speak the same language.

With Figma’s new dev mode (at that time), developers could see the variables in mockups. This helped us tremendously improve design-to-dev consistency and saved us a ton of time.

Finding the right tools.

After researching and talking to my devs, we decided to test Chromatic for reviewing new components and use Storybook to manage them. Storybook acts as a central place to document and showcase components, while Chromatic, built on top of it, helps with versioning, designer sign-offs, and comments to make sure everything looks and works as expected.

I see every project as a chance to improve how I work with developers. I set up quick 15-minute retros to talk through any challenges, see how I can make handoffs easier, and just connect to build a good relationship!

I see every project as a chance to improve how I work with developers. I set up quick 15-minute retros to talk through any challenges, see how I can make handoffs easier, and just connect to build a good relationship!

Now, the fun part

Redesigned buttons, input fields, modals and everything in-between.

I redesigned the atoms first - buttons, input fields, and badges—and tested them in our UI to see how everything came together. The buttons were rolled out first. We replaced old buttons with the new one everywhere, and tested thoroughly. A few things broke (as expected) but our rockstar devs fixed them in no time.

What do you see all the time in a finance app?

You guessed it—tables. They’re such a big part of the product, so getting them right was absolutely essential. After a lot of iterations, I think I nailed it! Check out the before and after 👇

A cooler side nav!

The new the colors, typography, and icons made a big difference in the side nav, but I also fine-tuned it to feel more polished. Added a collapse feature for better usability and small design tweaks to make everything look sleeker.

It was so cool to see everything come together!

Seeing everything come together was awesome! As we updated the colors, text styles, and core components one by one, the app started to feel just right—sleeker, more readable, and way easier to use.

Retrospective

For this project (and honestly, most projects), I apply something I learned the hard way from a failed startup and a major pivot—waiting to ship something until it’s perfect is a mistake.

Shipping this quickly gave us insights we didn’t expect, but it also validated things we already assumed. That’s why, whenever we’re launching something new, I always push for getting a draft version out in a week or two, then putting it in front of users to see if they actually want it.

From there, we can refine based on what they need, rather than spending months polishing something that might not hit the mark.

Draft version. Ship early and validate fast.

Use data. Let real user feedback shape the next iteration.

Adapt. This works great for new features, but for redesigns, where the goal is improving UX, you sometimes need to slow down and refine the details before shipping. There’s no one-size-fits-all workflow—you just adapt to what makes sense for each unique project.