Button system for FlowBank

Links

➡️ Presentation of the project

🎨 Figma file

Introduction

FlowBank is a digital banking platform designed for freelancers and entrepreneurs. User experience is at the core of their approach, requiring an efficient, accessible, and harmonious button system. This document details the decision-making process, rationale, and design choices made while developing the FlowBank button system.

Button System Objective

The primary goal of the button system is to ensure a clear hierarchy of actions while adhering to accessibility and ergonomic principles. Since financial applications involve critical user interactions, buttons must be visually distinguishable, highly responsive, and compliant with industry best practices.

Decision-Making Process and Design Rationale

1️⃣ Establishing a Clear Visual Hierarchy

Financial transactions require precision. To guide users effectively, we established a structured visual hierarchy:

• Primary buttons (high emphasis): Used for main CTAs such as "Send Payment" or "Deposit Funds."
• Secondary buttons (medium emphasis): Supportive actions such as "View Transactions" or "Manage Payment Methods."
• Tertiary buttons (low emphasis): Navigation and auxiliary options like "Edit Profile."
• Destructive buttons (high emphasis, warning): Actions with irreversible consequences, such as "Delete Account."

2️⃣ Color Theory and Branding Considerations

We chose colors that align with fintech best practices while maintaining FlowBank’s brand identity:

• Primary Button (Electric Blue #1A73E8): Evokes trust, reliability, and security—essential in financial services.
• Secondary Button (Transparent Background with Blue Border): Provides a subtle yet clear distinction for actions that require less attention.
• Tertiary Button (Blue Text Only): Keeps the UI lightweight while indicating clickable elements.
• Destructive Button (Red #D32F2F): Universally associated with warnings and critical actions.

This color scheme ensures high contrast, aiding users in quickly identifying and prioritizing actions.

3️⃣ Accessibility Compliance

Adhering to WCAG 2.1 guidelines, our buttons meet the required contrast ratio for legibility (minimum 4.5:1 contrast ratio for small text). We also ensured:

• Minimum button size of 44x44px for touch accessibility.
• Keyboard navigability with visible focus states, making buttons usable for all users, including those relying on assistive technologies.
• Descriptive ARIA labels for screen readers, ensuring clear communication of each button's purpose.

4️⃣ Interactive Feedback for Better UX

Financial applications require user confidence. We implemented interactive states to confirm button actions:

• Hover State: Slightly darker background and a subtle shadow to indicate interactivity.
• Active (Pressed) State: Adds a pressed effect to visually confirm the action.
• Focus State: A strong outline to support keyboard navigation and accessibility.
• Disabled State: Lower opacity with no interactivity, preventing accidental actions.

5️⃣ Consistency Across Devices

Since FlowBank is a mobile-first platform, our button system was optimized for smaller screens:

• Buttons are large enough for touch interactions without accidental clicks.
• Spacing and padding were carefully adjusted for clarity and usability.
• Adaptive behavior ensures a seamless experience on both mobile and desktop interfaces.

Button Types and Implementation

Primary Button

• Usage: Main actions like "Send Payment," "Withdraw Funds."
• Color: Electric blue (#1A73E8) with white text.
• States: Default, Hover, Active, Disabled, Focus.

Secondary Button

• Usage: Supporting actions like "View Transactions," "Manage Cards."
• Color: Blue border, blue text, transparent background.
• States: Default, Hover, Active, Disabled, Focus.

Tertiary Button

• Usage: Text-only navigation elements like "Edit Profile."
• Color: Blue text only.
• States: Default, Hover, Active, Disabled, Focus.

Destructive Button

• Usage: Critical actions such as "Delete Account."
• Color: Red (#D32F2F) with white text.
• States: Default, Hover, Active, Disabled, Focus.

Use Cases

1. Payment Form: Primary for "Send", Secondary for "Edit Amount".
2. Account Deletion: Destructive for "Delete", Tertiary for "Cancel".
3. Navigation: Tertiary for "Back", Secondary for "View More".

Conclusion

FlowBank's button system ensures smooth navigation, a clear visual hierarchy, and optimized accessibility. It seamlessly integrates into our design system and enhances the user experience on our mobile app. By prioritizing accessibility, interactivity, and brand consistency, this button system significantly improves user engagement and operational efficiency.

📌 Next Steps: Test implementation in real-world scenarios, gather user feedback, and refine based on usability studies.

Thank you for your attention! Feel free to give me feedback so I can improve myself. 🙏