Fyne Design System

Building a design system

for rapidly scaling startup

Building a design system

for rapidly scaling startup

Building a design system

for rapidly scaling startup

Scroll down to read

Building a design system at a fast-paced startup

I leveraged a lean design system approach that quickly brought cohesion and consistency to the product and features that the Refyne design team has built. This project became the company’s foundation for more strategic (and less expensive) product development.

Introduction

Our company Refyne is a fintech organization in the B2B2C space, which provides financial solutions to blue-collar workers in various sectors. Like any early-stage startup, for the first few years, the focus was to ship features, test out hypothesis, and other stuff that an early stage startups do. Building product with consistency in mind was not in the scope. Now, we are at a stage where we should and need to bring consistency to our design and platform. Hence, the building of the Fyne design system started in Q4 of 2023.

Role

I took ownership of building the design system for the company with 2 engineers assigned to the design system.
P.S: Those two engineers were also involved in their BAU & sprint tasks, the same story with me. :(

Challenges

  1. Products at various stages of incompleteness: Priorities were hard to define, and pieces were tackled partially and inefficiently.

  2. No product culture: The engineering culture was unharmonious and inexperienced in terms of iterative, user-centered approach.

Planning the design system

Now, we had our scope defined. It was time to plan and execute our design system.

“How might we use a design system (instead of feature development) to unify multiple product in an all-in-one platform?”

“How might we use a design system (instead of feature development) to unify multiple product in an all-in-one platform?”

Auditing for a baseline

I took stock of existing usability issues with my own heuristic evaluation and feedback from users and user-facing teammates. A newly discovered trend was that our users were defaulting to mobile, even for long sessions of administrative tasks. Addressing visual inconsistencies from feature to feature was the lowest-hanging fruit to quicken adoption and improve repeat session experience.

Distributing the design system

I created a scope for the very initial design system that struck a good balance. It was simple enough to create a sense of uniformity and expected convention across all major user flows.


  1. 🌈 Foundations (Atoms)

  2. 🎛 Components Library (Molecule)

  3. ♼ Patterns Library (Organisms)

  4. 💚 Icon Library

Building strong 🌈 Foundations

Defining design tokens. We wanted to have solid tokens sets because it helps to sail of design system smoothly.

Our token approach

There are total of 3 layers of tokens.

We wanted to keep our nomenclature simple, understandable & scalable.

Semantic Tokens

Snapshot of semantic tokens

Illustrations

Illustrations

Illustrations

Making simple but modular 🎛 Components Library

Buttons are buttons. As we have limited bandwidth of engineering and no prior experience of building a design system, we wanted to build components in a way which were easiest to develop with industry standard quality.


As our tech stack was ‘Flutter’, we took all molecule level components like Buttons, Chips, Radios, Input fields etc from that we required. So, we saved lot time and cost with all the industry standard interaction of those components with our set of tokens.

Categorising the components

File structure

Brining consistency via ♼ Pattern Library

Design system helps in executing solution faster. We want to build all-in-one consistent product that have same patterns made by combing the molecules which we have built. Also, it helps designer to make innovative solution by combining the components which can be used by other team members.

Setting up consistent 💚 Icon Library

Goal of of icon library was not only to bring consistency and good communication but also make bundle size small for the icons.

Giving icons it’s own character

I want to give subtle but unique character to the icons. So, I researched about i financial iconography styles and found about “Project Pratima”.

Project Pratima: An icon library for all financial institutions in India
An initiative to support RBI's vision of driving adoption and simplifying digital payments. Taking this as base ground and combing with “Remix icon” library. We have made my own icon library

Reflection

Lesson learned

My biggest takeaway from this project was to not hesitate to lead, even if technical areas were led by engineering. After previous attempts by the company to build a design system I was able to leverage my expertise in startersing and taking ownership of the entire design system.

I also realised the lack of understanding of design systems in startup culture and disconnect between a design system and its use in Figma with coded componentisation is more profound than I had realised especially in India.

This allowed me to provide thorough education to inexperienced parties and create the first ever fully functional design system in the rapidly scaling startups of India.

My philosophy about design system

Just like, adding extra strings to a guitar doesn't necessarily result in extraordinary music! Similarly, incorporating additional components, tokens, and extra flexibility doesn't necessarily lead to the creation of a good design system and adding constraints allows us solve problem that goes beyond consistency, allowing consistent solutions.

A design system isn’t a project. It’s a product serving products.

Nathan Curtis

EightShapes