Design System: “Pancake“
ABOUT
Fevo is a 70-person, Series-A venture-backed B2B social payments platform revolutionizing how groups pay.
A design system at Fevo is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.
RoleSr. Product Designer (UX/UI/Lead): Define the language, principles of the system, guide designers, champion, and align the vision throughout the company.
Tools: Sketch, Photoshop, Abstract, StoryBook, Invision, MIRO, Mind Meister
Skills: Design System, UI/UX, Composition, Interaction Design, Design Standards, Atomic Design, Whiteboarding, Information Architecture, Prototyping, Typography, Product Design Thinking, Competitive Analysis, User Interviews, Contextual Inquiry, Data Analysis: Quantitative & Qualitative, Journey Mapping, Card Sorting, Usability Testing
AuditingCode & Structure
At Fevo we have many projects: Emails, MyFevo, COCO, WeFevo, QR App, Templates, Internal Projects as well as clients from different industries like Sport, Hotels, E-games, Cruises, Merch, Movie theaters, Music festivals, and more.
Before I started working on the Design System, I looked into the code and structure of our products. Take a look at one example:
B2B Internal Web Platform: WeFevo
Sensitive information is hidden
The Problem
After looking into the code and the structure of all our projects, I discovered a lot of similar colors, fonts, duplicating elements, not scalable and non-responsive grids/layouts. After talking to developers, I was surprised that sometimes they were using the color picker to get the attributes from the designs.
54
Unique Fonts
122
Unique Colors
31
Unique Queries
The Goals
2
Unique Fonts
10
Unique Colors
4
Unique Queries
Alignment:
A Design System that responds to the needs of all platforms drives product alignment.
Speed:
Design System provides a shared library of reusable components and guidelines. Building products becomes much faster.
Time:
As building products becomes faster, developers and designers gain time they can invest in other areas.
TEAM MODELCentralized & Federated Design System Team Models
I decided to go with centralized and federated team models to avoid overload, and it was much better for scaling a design system.
2
Product Managers
To ensure the system is aligning to customers needs
12
Developers
To create modular, efficient code in the StoryBook and ensure design system conforms to standards like WCAG
4
Designers
To define the visual elements of the system and provide assets to developers.
RESEARCHCompetitive Analysis
Material by Google, Polaris by Shopify , DSM by Invision, Carbon by IBM, Atlassian, WIX and many more
The Process
The Design Team first works on developing out the fundamentals of the design system - like colors, fonts, and other components that support the overall implementation. After that, they design specific elements and components that will make up the front end.
The developers then take these and create a component library - common technical elements that will be used across the platform. Once these are in place, it will be simple to update the component library and have those changes reflected quickly across the entire site, apps, services, and platforms.
Core work: Naming, symbol organizing, accessibility tests, fonts, colors, smart-layers
Responsive Card made with smart layouts in Sketch to keep components flexible
The source of truth. A place for a design team to work on the design system, get feedback from developers, and convert into tasks (Jira) if necessary.
Storybook enabled developers to create components based on the Abstract.
We took advantage of the Jira to convert comments on the Abstract into tasks, and we had a timeline for the whole project, so everyone was aware of the milestones.
“It wasn’t hard to get them to follow the guidelines, it was hard to get them to agree on the guidelines.”
Lori Kaplan — ATLASSIAN
MethodologyBuilding Fevo Universe with Atomic Design System
Atoms
Atoms are the basic building blocks of all matter. Each chemical element has distinct properties, and they can’t be broken down further without losing their meaning: Typographic styles, Colors, Radio buttons, Checkboxes, Toggles, Buttons, Pills, Chips, Badges, Tags and etc.
Molecules
Molecules are groups of two or more atoms held together by chemical bonds. These combinations of atoms take on their own unique properties and become more tangible and operational than atoms.
Organisms
Organisms are assemblies of molecules functioning together as a unit. These relatively complex structures can range from single-celled organisms all the way up to incredibly sophisticated organisms like human beings.
Templates & Pages
Pages are specific instances of templates that show what a UI looks like with real representative content in place. Building on our previous example, we can take the homepage template and pour representative text, images, and media into the template to show real content in action.
Also, our design system supports DARK and LIGHT themes 🌓:
WHAT DID WE LEARNDesign System Insights
Too many choices may lead to inconsistencies.
Design System won’t be perfect, and mistakes are ok
Design system should live in a source control repository independent from your main codebase
There is no “one size fits all” design system
Presentations and documentation help to make sure everyone is on the same page
Build Design Systems with modularity in mind
Forward Thinking
As we know already - Fevo has different products on the various platforms, so I decided that we could implement Design Tokens approach so we can abstract design details like colors, fonts, rounded corner radius, etc., into a format that can be shared across platforms for all Fevo products.
To be Continued…
The Design System is a living, breathing system that’s flexible, maintainable, stable, scalable, and successful in the long-term. With the design system, we have one single source of truth for how the design looks across all of our products and pages. This single source of truth allows us to have a simple, unified design everywhere.
“Mikhail is top notch designer, full stop. His output is simply phenomenal. In the almost two years that I’ve worked with him, I’ve seen Mikhail create quality output for everything from fully scaled enterprise backends, to design systems, to even holiday cards. You’d be hard pressed to find a stronger individual contributor. But what makes Mikhail really special is how close he loves to get to the problem, and solve it from the user’s point of view.”
— Roman Gun, Chief Innovation Officer at Fevo