Visual design
Visual design
Visual design
BrightPlan - Budget application
My role
My role
My role
UX/UI designer
UX/UI designer
UX/UI designer
Company
Company
Company
BrightPlan
BrightPlan
BrightPlan
Duration
Duration
Duration
11 months
11 months
11 months
Project type
Project type
Project type
Desktop application
Desktop application
Desktop application
Contribution
Contribution
Contribution
Create a Design System
Create a Design System
Create a Design System
Organization
Organization
Organization
High-fidelity Prototype
High-fidelity Prototype
High-fidelity Prototype
Tools
Tools
Tools
Sketch
Sketch
Sketch
Zeplin
Zeplin
Zeplin
InVision
InVision
InVision
About
About
About
BrightPlan is a digital financial advisor that guides you in achieving your financial goals and allows you to track your financial life through an easy-to-use dashboard.
BrightPlan is a digital financial advisor that guides you in achieving your financial goals and allows you to track your financial life through an easy-to-use dashboard.
Project details
Project details
Problem definition
The detailed view of the landing page confused users. Also, the inconsistent design patterns hindered the development, and the color palette lacked accessible contrast.
The detailed view of the landing page confused users. Also, the inconsistent design patterns hindered the development, and the color palette lacked accessible contrast.
The detailed view of the landing page confused users. Also, the inconsistent design patterns hindered the development, and the color palette lacked accessible contrast.
Design criteria
I defined design tokens and compiled a catalog of components. To create cohesive workflows within the web app, I needed to understand both business requirements and user needs.
I defined design tokens and compiled a catalog of components. To create cohesive workflows within the web app, I needed to understand both business requirements and user needs.
I defined design tokens and compiled a catalog of components. To create cohesive workflows within the web app, I needed to understand both business requirements and user needs.
My role
My role consisted on helping during the project to define the principles of the DS, sections of the system, and create new features coordinated with the P.O., according to the company's and user needs.
My role consisted on helping during the project to define the principles of the DS, sections of the system, and create new features coordinated with the P.O., according to the company's and user needs.
My role consisted on helping during the project to define the principles of the DS, sections of the system, and create new features coordinated with the P.O., according to the company's and user needs.
Analysis
Analysis
We analyzed the web user flow and screens, identifying key areas for improvement.
We analyzed the web user flow and screens, identifying key areas for improvement.
Design inconsistency:
Design inconsistency:
Design inconsistency:
The app had inconsistent design patterns, making the development unnecessarily complex. In addition, the color palette failed on bringing an accessible contrast.
The app had inconsistent design patterns, making the development unnecessarily complex. In addition, the color palette failed on bringing an accessible contrast.
The app had inconsistent design patterns, making the development unnecessarily complex. In addition, the color palette failed on bringing an accessible contrast.
Outdated interface:
Outdated interface:
Outdated interface:
Users found the large scroll required to check information on the landing page disorienting and difficult to navigate.
Users found the large scroll required to check information on the landing page disorienting and difficult to navigate.
Users found the large scroll required to check information on the landing page disorienting and difficult to navigate.
Component scalability:
Component scalability:
Component scalability:
Component scalability was problematic, especially on mobile phones, where adapting the components proved to be challenging.
Component scalability was problematic, especially on mobile phones, where adapting the components proved to be challenging.
Component scalability was problematic, especially on mobile phones, where adapting the components proved to be challenging.
Design solution
Design solution
We enhanced product consistency using the design system and developed new components to match the flow.
We enhanced product consistency using the design system and developed new components to match the flow.
Create a Design System:
Create a Design System:
Create a Design System:
We defined the design tokens, and we listed the components in a catalog. Thus, this will work as a framework to update the components gradually.
We defined the design tokens, and we listed the components in a catalog. Thus, this will work as a framework to update the components gradually.
We defined the design tokens, and we listed the components in a catalog. Thus, this will work as a framework to update the components gradually.
New components:
New components:
New components:
New components were integrated, and we redesigned the information hierarchy to improve the user experience.
New components were integrated, and we redesigned the information hierarchy to improve the user experience.
New components were integrated, and we redesigned the information hierarchy to improve the user experience.
Updated interface:
Updated interface:
Updated interface:
The interface was updated to align with the new design system, ensuring a more cohesive and modern user experience.
The interface was updated to align with the new design system, ensuring a more cohesive and modern user experience.
The interface was updated to align with the new design system, ensuring a more cohesive and modern user experience.
Final Design
Final Design
