Industry:
Fintech
Tool:
Figma, Photoshop, Notion
Client:
Manu Revath
Approach to Digital Product Design: A Seamless Blend of UI/UX
The Flexfi fintech e-wallet app simplifies digital transactions by allowing users to send money, pay bills, add funds, and scan bills for instant payment. Its key feature, money tracking, helps users monitor spending and manage finances effectively. With an intuitive interface and real-time insights, the app ensures a seamless, secure, and efficient financial experience.
The Flexfi fintech e-wallet app simplifies digital transactions by allowing users to send money, pay bills, add funds, and scan bills for instant payment. Its key feature, money tracking, helps users monitor spending and manage finances effectively. With an intuitive interface and real-time insights, the app ensures a seamless, secure, and efficient financial experience.
In this Project, I integrated biometric login and added subtle security cues within the UI to reassure users during critical actions. I also decluttered the interface by replacing raw numbers with meaningful visualizations, making information easier to scan and understand.
In this Project, I integrated biometric login and added subtle security cues within the UI to reassure users during critical actions. I also decluttered the interface by replacing raw numbers with meaningful visualizations, making information easier to scan and understand.
1. Problem/Solutions
Users often felt overwhelmed by complex financial workflows, making everyday transactions harder than necessary. Trust and security concerns were a major barrier, as many users hesitated to store money digitally due to fear of fraud or data misuse. Additionally, the interface was overcrowded with raw data and features, which reduced clarity and made it difficult for users to focus on key insights.
Users often felt overwhelmed by complex financial workflows, making everyday transactions harder than necessary. Trust and security concerns were a major barrier, as many users hesitated to store money digitally due to fear of fraud or data misuse. Additionally, the interface was overcrowded with raw data and features, which reduced clarity and made it difficult for users to focus on key insights.
I simplified the financial workflows by reducing unnecessary steps and guiding users with clear CTAs. To build trust, I introduced biometric login and embedded subtle security cues throughout critical moments in the experience. I also decluttered the interface by replacing raw numbers with clear data visualizations, improving scannability and overall usability.
I simplified the financial workflows by reducing unnecessary steps and guiding users with clear CTAs. To build trust, I introduced biometric login and embedded subtle security cues throughout critical moments in the experience. I also decluttered the interface by replacing raw numbers with clear data visualizations, improving scannability and overall usability.
2. Design Process
Analysis (3 Days)
I start by laying the groundwork. In this phase, I define the core problems, align on stakeholder goals, and scope out the technical requirements to ensure the project starts on the right track.
Analysis (3 Days)
I start by laying the groundwork. In this phase, I define the core problems, align on stakeholder goals, and scope out the technical requirements to ensure the project starts on the right track.
Research (4 Days)
Next, I gather insights. I spend this time studying user needs, analyzing competitors, and validating assumptions to build a data-driven foundation for the design decisions ahead.
Research (4 Days)
Next, I gather insights. I spend this time studying user needs, analyzing competitors, and validating assumptions to build a data-driven foundation for the design decisions ahead.
Branding (7 Days)
I then move to defining the visual identity. This is my longest phase, where I establish the mood, color palette, typography, and logo to ensure the product has a distinct and consistent voice.
Branding (7 Days)
I then move to defining the visual identity. This is my longest phase, where I establish the mood, color palette, typography, and logo to ensure the product has a distinct and consistent voice.
Wireframe (5 Days)
With the foundation set, I build the structure. I create low-fidelity blueprints to map out user flows, layout, and information architecture, focusing on functionality without visual distractions.
Wireframe (5 Days)
With the foundation set, I build the structure. I create low-fidelity blueprints to map out user flows, layout, and information architecture, focusing on functionality without visual distractions.
UI Design (5 Days)
Finally, I bring it all together. I apply the branding to the wireframes, adding color, imagery, and polish to create high-fidelity screens that are ready for development.
UI Design (5 Days)
Finally, I bring it all together. I apply the branding to the wireframes, adding color, imagery, and polish to create high-fidelity screens that are ready for development.
3. Typography/Colors/Components
Typography: Switzer
I evaluated several typefaces looking for a balance between geometric modernity and functional clarity. I ultimately selected Switzer because of its high legibility and neutral character. It performs exceptionally well across both large headers and small UI details.
Typography: Switzer
I evaluated several typefaces looking for a balance between geometric modernity and functional clarity. I ultimately selected Switzer because of its high legibility and neutral character. It performs exceptionally well across both large headers and small UI details.
Primary (#747BE0): I chose this vibrant violet-blue to drive the brand identity. It strikes a balance between professional trust and modern energy, used primarily for active states, key data points (like the credit card), and branding elements.
Surface & Structure: I utilized White (#FFFFFF) for cards and containers to maximize contrast and readability. I paired this with a soft Accent Gray (#F2F2F2) for background layers, creating a subtle hierarchy that separates content areas without needing harsh borders.
Primary (#747BE0): I chose this vibrant violet-blue to drive the brand identity. It strikes a balance between professional trust and modern energy, used primarily for active states, key data points (like the credit card), and branding elements.
Surface & Structure: I utilized White (#FFFFFF) for cards and containers to maximize contrast and readability. I paired this with a soft Accent Gray (#F2F2F2) for background layers, creating a subtle hierarchy that separates content areas without needing harsh borders.
I approached component design with scalability in mind. By standardizing elements like the "Transaction History" list, credit card modules, and navigation bars, I ensured a consistent user experience. I applied uniform rounded corners and soft, diffused shadows across all cards to create a "floating" effect, making the interface feel tactile and approachable. This modular approach allows the design to easily expand with new features while maintaining visual unity.
I approached component design with scalability in mind. By standardizing elements like the "Transaction History" list, credit card modules, and navigation bars, I ensured a consistent user experience. I applied uniform rounded corners and soft, diffused shadows across all cards to create a "floating" effect, making the interface feel tactile and approachable. This modular approach allows the design to easily expand with new features while maintaining visual unity.
GET IN TOUCH
Let's make your Interface shine.
@2025siyamabdullah
Siyam22249@gmail.com
Bangladesh
GET IN TOUCH
Let's make your Interface shine.
@2025siyamabdullah
Siyam22249@gmail.com
Bangladesh
GET IN TOUCH
Let's make your Interface shine.
@2025siyamabdullah
Siyam22249@gmail.com
Bangladesh
GET IN TOUCH
Let's make your Interface shine.
@2025siyamabdullah
Siyam22249@gmail.com
Bangladesh
a.Siyam
Siyam a.
BASED IN BANGLADESH
15:28:22
(+6 UTC)
a.Siyam
Siyam a.
BASED IN BANGLADESH
15:28:22
(+6 UTC)
a.Siyam
Siyam a.
BASED IN BANGLADESH
15:28:22
(+6 UTC)
a.Siyam
Siyam a.