OVERVIEW

In order to help the developer community produce good and scalable designs for the products they were building, I built Finity Design System to improve their turn-around time, bring consistency and visually appealing designs. It was published in the Figma community having 5,400 components with a focus to include widely used Web3 components.

PRACTICES

UX Research • Product Strategy • Visual Design • Community Initiative

TEAM

1 Chief Architect • 1 Product Designer • 2 Product Design Intern • Content Writer • 3D Designer • VP • PM

MY ROLE

Chief Architect • Product Designer

COMPANY

Polygon Technology

TIMELINE

7 Months

Finity Design System is live on Figma Community and has over 11000+ downloads.

💻 Download Now!

Results on this project

11000

Downloads on Figma

5400

Components

50

Hours of Design Mentorship

#3

Product of the Day

Business Problem

Polygon Technology wanted to incubate early-stage companies and developers to build on Polygon blockchain. These companies and developers had strong backend knowledge but lacked skills in making user-friendly products and some were also having financial struggles in hiring a designer before finding product market fit.

I conducted weekly meetups to provide UX audits. Most of my work was helping them with resources, explaining what was not working, helping them with branding, and bringing consistency across different product offerings.

Some issues commonly observed during desk research

Inconsistencies in product flows.
Lack of color harmony.
No design guidelines across interfaces.
Random icon style and buttons placed at places.

Some screenshots of the companies compared during desk research.

Conducted 22 Interviews to learn about their workflow, their barriers, and finding solution spaces viable for Polygon to deliver

Early-Stage Companies Indie Developers

Key Findings

Developers had strong developmental skills but lack the product sense of how to make it user-friendly. Conversely, some expressed reluctance, saying their solution more simpler than others.

60% of participants expressed their issue that they were unable to differentiate their product from scammy products available on the internet.

18/22 of participants mentioned financial constraints in hiring a designer before finding a product market fit or traction for their product. Most of them wanted to raise funding to hire designers.

MOST VIABLE SOLUTION

Build a visual design system that is adaptable to diverse Web3 projects. Anyone should be able to create visually appealing designs with a cohesive brand identity.

Initial Scope

Open-Source

Modern and Scalable

I designed 5200 components in 3 months

Logo Guidelines Grid Layout Spacers Input fields Buttons & Caps Section Tabs Drop-downs Notifications Snackbars Steppers Toggle Switches Accordians Radio Buttons Checkbox Timer Progress Bar Alerts Pagination Wallet Badges Status Pills Pointers Web3 Modals File input drop List Items Chat Bubble Tool Tip Controls Sliders Cards Calendar 3D Abstracts Graphs Web3 Modals

Section Tab Animation

Toggle Switch Animation

Dropdown Animation

Revised Scope

It was difficult to scale the system and make for all the use cases of blockchain applications, so I led 2 interns to help me with making the built components customisable to the core layer, making it adaptable for every use case.

Open-Source

Modern and Scalable

Customizable to the core

Having Web3 Components

Created master sheet and its component system for scalablity

We had significant interactions in setting up a robust system framework that can be used to scale the component system later. The goal was to expand the system even after it was completed.

So we created tutorials on how to edit a master sheet to create new component variations.

Components that can be changed to the core ➔

My Learnings as a Chief Architect

Initially, my work was more inclined towards exploring and defining the scope of the system, identifying Web3 native components, and expanding the system which solves various use cases. During this time, I had to do a lot of back and forth to learn how to make a system that could be extended later. I connected with a lot of designers online and also learned from Google's Material, Uber's Base, and Apple design system to do the basic things right.

Realized to reduce the styling to avoid similar designs.

Post-launch, I attended events and the team conducted a hackathon to gain insights into how the system is working. We found a couple of critical issues which took an additional 3 months of work. We did style the system more than required, in terms of fonts, animation, and corner radius and our initial users never made changes and ended up producing similar designs. This made us realize to reduce the styling in the system. For eg. we reduced the corner radius from 24px to 4px, and reduced button animations to basic animations.

Simple V3 animation after feedback

Realized developers are having a hard time finding Figma tutorials

I created a few basic tutorials on how to get started with Finity. We also revamped our documentation adding more detailed step-by-step procedures.

What would I do differently with new updates in Figma?

Since now we have local variable in Figma, I would
1. Create collections for text, border, radius, spacing, etc.
2. Create number, color and string variables and assign them with relevant constraints.
3. Create more primitives collections, tokenize everything.
Create documentation on how to update your existing system with local variables.
Prototype components in the main component allow users to view different defaults, hover, click, and disable states in preview mode. These methods are useful in usability testing and developer hand-offs.

📞 Kindly Reach Out

Lets catch up if you would like to know more about my work on Finity Design System project.

Finity Design System

Finity Design System is live on Figma Community and has over 11000+ downloads.

💻 Download Now!