Prime Trust
Our main software were using a mix of MUI, Boostrap and custom items, causing confusion and disorder in the display and usage of the different UI components.
Some of our users start complaining about the new features that we implement because they feel and look like completely different from the old ones, having the sensation that they're using a different software in each section of our product.
Company:
Prime Trust
Role:
Product Designer, UX Researcher
Date:
Jan 2022
Tools:
Figma, Miro, Github
Why should we had to implement a Desing System and component library?
By providing a standardized set of components and guidelines, these tools help maintain a uniform look and feel across the application. This uniformity not only enhances the user experience but also streamlines the development process, allowing for quicker iterations and easier maintenance.
As a result, the application becomes more cohesive, reliable, and scalable, significantly improving both the development workflow and the end product.
0 1 . C O N S I S T E N C Y
Ensure that the design system promotes a consistent look and feel across all components. Establish clear guidelines for typography, color schemes, spacing, and other design elements to maintain a cohesive visual identity.
0 2 . A C C E S S I B I L I T Y
Design components with usability and accessibility in mind. Follow best practices to ensure that all users, including those with disabilities, can interact with the components effectively. This includes considering keyboard navigation, screen reader support, and color contrast.
0 3 . S C A L A B I L I T Y
Create components that are scalable and adaptable to various contexts and screen sizes. Design systems should be flexible enough to accommodate new features and changes without requiring a complete overhaul.
0 4 . D O C U M E N T A T I O N
Provide comprehensive documentation and clear guidelines for using the design system and components. This should include usage instructions, code snippets, examples, and best practices to help developers and designers implement the system correctly.
0 5 . C O L L A B O R A T I O N
Foster collaboration between designers, developers, and other stakeholders. Encourage continuous feedback and iteration to improve the design system. Regularly update the system based on user feedback and evolving needs to keep it relevant and effective.
P L A N N I N G
At the beginning, the project scope was just the look 'n feel but we cannot avoid the functionality issues and stakeholders feedback, so we had to set different and achievable goals.
I N V E N T O R Y
While doing the catalog, I figure out that there was more components that I estimated at the beginning, there was a lot of components that only shows up in really specific use cases.
S O F T W A R E
Most of the designs were in Sketch App, so it was difficult to collaborate with other designers, so we decided to move to Figma and also capacitate our engineering team to start using it.
