Button system for FlowBank
Links
➡️ Presentation of the project
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
- Payment Form: Primary for "Send", Secondary for "Edit Amount".
- Account Deletion: Destructive for "Delete", Tertiary for "Cancel".
- 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. 🙏
Tools used
From brief
Topics
Share
Reviews
1 review
I’ve carefully reviewed all your slides, analyzed the button states, and looked at how the final UI comes together. You’ve done an excellent job in crafting a well-structured button system that aligns with the "design brief" while maintaining clarity, accessibility, and a strong visual hierarchy.
Visual Design
Your approach to "color, typography, and hierarchy" is well thought out. The "primary button" in "electric blue (#1A73E8)" is a great choice—it stands out clearly and ensures users can easily recognize key actions. The "secondary and tertiary buttons" create a clear distinction in importance without overwhelming the interface. The "destructive button" in "red (#D32F2F)" is used perfectly for irreversible actions, ensuring users take a moment before proceeding.
One small area to refine could be the "tertiary button," which currently relies on "blue text only." If placed on a light background, it might not be as noticeable. A slight increase in text weight or an underline could help improve its visibility.
Accessibility
Your button system meets "WCAG 2.1 guidelines" and ensures an inclusive user experience. It’s great to see that you’ve incorporated:
- "A minimum button size of 44x44px" for better touch accessibility.
- "Clear focus states" to support keyboard navigation.
- "Descriptive labels" to assist screen reader users.
One small thing to check is the "disabled state buttons." If they appear too faded, users with low vision might find them hard to distinguish. Adding a subtle border or a different styling cue could make them more recognizable.
Presentation
Your slides are well-structured and do a fantastic job of showcasing the "button priorities, states, and real-world use cases." The way you’ve broken down each button type—"primary, secondary, tertiary, and destructive"—makes it easy to understand their functions and hierarchy.
The "final UI design" looks polished and intuitive. The "transaction screen" is particularly well executed, presenting financial interactions in a structured and easy-to-follow way. The "account deletion confirmation modal" is also well-designed, ensuring users go through a clear and careful confirmation process before making a critical decision.
You’ve created a button system that is not only functional but also thoughtfully designed with "visual hierarchy, accessibility, and real-world usability" in mind. With just a few small refinements—like improving the "tertiary button’s visibility" and making "disabled states more distinguishable"—this would be even stronger.
Overall, this is a fantastic submission, and your attention to detail shows. Keep up the great work! With just a little fine-tuning, this button system will be even more polished and ready for real-world application.
You might also like

Sojo NFT Marketplace

From Idea to Full-Stack Web App

Docto

Fundraising Website

Hulu Through My Eyes - A Cinematic UI Exploration (unofficial)
