-
Fintech Ecommerce Customers
Instant understanding and confidence in using the UI
-
Marketing, Creative, Analytics, and Compliance teams
Provide a modern and intuitive design system that can scale and allows for quick iteration
-
Document current design system
Import styles into Figma
Figma training for product team
-
Content Audit
-
Figma - Design System
Managing Design Systems
Challenge: There is no documentation of the current design system and there is a decline in customers’ view of the site
Hypothesis: Documenting the current design system in an accessible way will allow the product team to iterate faster and provide quicker UI updates to the site
Metric Goal: 8% increase in customer satisfaction around ‘look and design’
“I need to understand the value of spending all the time and resources to update the look of our components”
Many ads showcase the mobile UI as the selling point of the product
Making the Case
Documenting the current state of a design system has many challenges and the biggest one can be getting buy-in from stakeholders.
Bringing data to the table is my favorite approach. The customer service team had just reported that the ‘look and design’ of the site decreased by 6%
Using data helps share the importance of a design system
What’s the Font?
I created a public Figma file and shared it with the entire product team.
I provided an introduction to Figma to ensure everyone felt comfortable navigating and using it.
This file became the source of truth for maintaining and iterating on the design system for the site and mobile app
Documenting the font system in Figma to ensure easy access and iteration
Oo Colors!
Documenting the brand color system in Figma
During discovery, I learned the product team didn’t have a clear understanding of all the brand colors.
I met with the Marketing/Creative teams to confirm the brand colors and their applications.
This accelerated iteration time and gave devs a clear guide for all future color choices.
Components
The key to fast iteration is creating a reusable component library.
A component library accelerates project timelines and facilitates easier maintenance and scalability.
This unified approach not only improves efficiency but also strengthens team collaboration by providing a single source of truth for design and development.
Figma enables for simple components management
Variants allow for easy creation and updates
Complete Design System built in Figma
All In One Place
Having a design system in Figma streamlines collaboration, keeps your designs consistent, and speeds up the whole design-to-development process. Figma's real-time collaboration means anyone can jump in and work together seamlessly, cutting down on miscommunication.
Getting everyone on board means providing clear documentation and training to ensure the whole team is aligned with the system's guidelines.
Despite these hurdles, setting up a design system in Figma can boost efficiency, product quality, and team harmony.
Enterprise Tools Design System
I also created a way to manage and update a design system for enterprise tools.
For more on Enterprise Tools Design System
