Goalsetter
Mobile banking app.
Role
Product Designer
Challenge
Inconsistent user experiences and slow development, a direct result of a fragmented design system. We implemented a unified and accessible design system, providing reusable components and clear guidelines.
Results
Accelerated development, enhanced user experience, and brand cohesion across all interfaces. Designers now create and share components faster, while developers maintain code sanity and product consistency.
What is a design system?
A design system is basically a set of rules that helps big design teams work better. It stops them from doing the same work twice and makes sure everything looks consistent. It includes lots of things like examples, screenshots, design guidelines, components and other digital assets essential for a product design company. All of these digital pieces are important for a company that designs products.
Process
The process of creating this well structured design system.
Empathize
Interviewing The Users
40% of users felt the interface was outdated and needed a revamp.
We've found that 50% of users had difficulty recognizing what could be tapped or clicked.
A significant 80% of users experienced issues with poor color contrast on numerous screens.
Card Sorting Summary
Users want a more modern app with a consistent interface across all platforms. They're looking for clearer, larger elements with better contrast that are easy to use. They also prefer simpler screens, avoiding too many elements on one page or excessive steps for a single process.
Define
Problem
We had a mobile app with over 5k users on the app stores that was plagued by design issues. From accessibility problems with colors and contrasts to inconsistent elements that made screens look like different brands. Both designers and developers also faced significant delays due to the lack of a robust and reliable design library.
Solution
Our team collaborated closely with the marketing team to strategize a complete company rebranding. This effort led to the creation of an extensive brand guidelines document, thoroughly explaining usage and applications, including clear 'do's and don'ts.' This guide served as a comprehensive resource for all brand elements, from typography and colors to logos, illustrations, and imagery. With this new branding as our foundation, I then embarked on building a new design system.
Ideate
First Steps
First, I studied good design systems already out there, especially ones using the atomic design way, like Google's Material Design. This gave me a good idea of how to design things visually, how different parts work, and how people will interact with them, all while being able to change it for each project. Plus, I followed WCAG guidelines to make sure every part was accessible to everyone.
Set Variables
Figma variables are key for design systems because they let you store and reuse important design details—things like colors, fonts, and spacing. This approach ensures your designs are consistent across the board and can grow easily, all while making your design system much simpler to handle.
Design Library
I kicked off my design library by defining its foundational atoms like typography, colors, spacing, elevations, radius and grids. The system truly began to take shape when I combined these elements to create molecules like buttons, form fields, and table cells. For each of these elements, add 'Usage Instructions' documentation for both Designers and Developers.
Prototype
Components
I started building each component using auto layout and variants, making them flexible and consistent. I focused on accessibility from the very beginning by checking color contrast. Most importantly, I documented every component clearly, explaining how to use it, its different states, and the technical details developers would need for a smooth setup.
Test
Feedback
Finally, after all the hard work, the final prototype was tested with various users. The feedback was fantastic! Their kind and warm words truly made all the time dedicated to every detail of this design system worthwhile. As always, we've taken every comment—positive, negative, and constructive—to keep improving and evolving it.
How did this help Goalsetter?
Designers
They can now create, share, and sync a wide range of components much faster. This also means easier onboarding and knowledge transfer for new team members.
Developers
The new component library has brought much-needed consistency to our code and the final product, improving overall code health.
Company
We successfully achieved our goal of ensuring all our businesses present a consistent brand image across every platform.
