Colour design consistency
How we improved app's consistency and scalability.
Company
Neon
Year
2020
Role
Design Lead
Context
Neon Pagamentos, a leading Brazilian fintech, operates as a digital bank aiming to serve Brazil's unbanked population. Established in 2016, they provide diverse financial services, including digital checking accounts, credit cards, loans, and investments. In 2020, the design consistency of the app's dashboard became a focal point regarding the company's growth.
OBJECTIVES & GOALS
Improve user experience by ensuring intuitive interactions regardless of the dashboard's colour scheme.
Streamline the design process by reducing variations in primary design elements.
Enhance the design consistency and scalability of the Neon app's dashboard.
The process
The Neon app's dashboard, emblematic of the brand, had a unique colour scheme for each vertical menu tab.
This design choice, while visually appealing, created practical limitations. For instance, each colour necessitated a distinct version of our primary button and a specific colour scheme for illustrations. Furthermore, changing the order of the dashboard's menu items meant revisiting and adjusting all impacted flows.
Before proposing any changes and to gain clarity on user perception, we undertook qualitative research to determine whether users associated the background colour with specific features.
MAIN CHALLENGES
Keeping the design intuitive while transitioning away from the established colour pattern.
Addressing conflicts arising from the app's illustration style sharing the same colour palette as the dashboard.
Ensuring changes to the dashboard's arrangement did not require significant reviews and redesigns.
Navigating the complexities of designing with six different colour variations.
The team delivery
Post-research, it became evident that the current background colour system was irrelevant once the users did not link the background colour to specific app features. Based on this information, I collaborated with the designer to reduce the background colour of our internal flows to just one single colour and create a harmonious transition for all six dashboard options. The solution we landed on was transitioning from the menu tab colour through our brand gradient, culminating in our primary brand colour.
IMPACT & RESULTS
Reduction in the time and effort required to update the dashboard's list order.
We achieved our goal of making the order change in the dashboard easier. As an extra result, we helped the Design System team reduce the primary button variations from six to only one.