The Challenge
ANNA Money is a business account and tax app designed for small businesses. The UI Components library of ANNA Money consisted of multiple components for banking and administrative features, which needed to be organized and transformed into a Design System.
My responsibilities included designing and maintaining both old and new components. Additionally, I acted as a bridge between the Designers and Engineers, providing them with a comprehensive handoff document and implementing Design Tokens.
Since its inception, ANNA Money lacked a formalized design system, resulting in significant inconsistency in user experience across platforms. I was faced with a substantial UI components library in Sketch that lacked any form of inventory or documentation.
In order to understand better the problems designer’s face, I conducted a series of interviews with people from different departments, from designers to engineers.\
After these initial interviews, we discovered that we need to:
Identify all the design issues in ANNA banking and ANNA admin app
Understand how to approach the principles of a successful design system
What I found:Pressure for agile solutions without discovery and research.
Siloed teams working with disjointed communication.
The inventory for the migration to Figma
In order to understand better the problems designers face, I did a complete inventory of all components that existed in their sketch library. Here are some problems that I found:
No guidelines and direction.
Duplication of common components.
Inconsistencies across all components.
One request from the stakeholders was the replacement of the used family font, from Proxima Nova to Inter.
As mentioned before, the stakeholders had requested the replacement of the font family to Inter. The plan was to migrate all legacy component from Sketch to Figma, changing the font and bringing all the necessary enhancement. First, we needed to create Design Tokens to ensure flexibility and unity across all product experiences.
Sharing the design token work with the developers had us questioning what would the next approach be. As a team we decided that would help to improve and bring consistancy, if we would use Figma Token Plugin and create and apply component’s specific tokens as well.
Manually write out the token’s name for every property that this component is created from. This is faster and better to check as a list than doing one by one in plug-in.
Creation a good handoff document make everyone’s life easier. Worked together with developers to come up with the best template for the handoff process.
It’s true that Figma Tokens do a lot of the work, but there are plenty of annotations to keep processes and documentation better.
Create a good documentation template to apply to all components
Worked together with developers to come up with the best template, also for documentation.
The content includes:
Anatomy
States
Scale
Layout
Creating the new components
As we were transfering all the legacy from sketch to figma, all best pratices were considered, such as:
• Accessibility
• Intuitivity
• Aesthetic
Comparing pre-design system to one month post-launch.
App looks great and will be consistent
Better Accessibility for people with low vision
Less UI bugs
Components are easier to support
Design system requires constant and careful support
The system is scalable and future proof.