LUMIERE
A unified digital dashboard that bridges the gap between bank and crypto. By centralizing assets into one secure interface, users gain a 360 degree view of their net worth with simple, guided flows for complex actions like crypto transfers and
card payments.
Home Card Dashboard
-
Visual Hierarchy (The "Active" State): I utilized a larger scale for the primary card to immediately communicate which payment method is currently "top of wallet." This reduces decision fatigue during high pressure moments like a physical or digital checkout.
-
Contextual Actions: The "Set as Default" button is placed directly under the primary card. This follows Fitts’s Law, keeping the most likely action within easy reach of the user's thumb.
-
Horizontal Scaling: To manage "Available Cards," I implemented a horizontal carousel. This allows the user to browse their entire card llist without losing the context of their primary card or the bottom navigation.
-
Glassmorphism: The use of subtle gradients and blurred "glass" effects isn't just for looks; it creates a premium, high security feel. In Fintech, a "high end" look often correlates with user trust in the app’s security which also blends with current design standards.
Card Rewards
-
Gamified Progress Tracking: I implemented a prominent progress bar for the "Obsidian Tier." By showing the user they are "85% to Next Tier," I leverage the Endowed Progress Effect, which promotes users to complete tasks (like spending or swapping) to reach the next milestone.
-
Multiplier Clarity: Users often find credit card rewards confusing. I designed clean "Multiplier" tokens (eg. 5x Travel) with distinct icons. This provides immediate clarity on how users can maximize their earnings based on their spending habits.
-
Exclusive Home Card (Obsidian Elite): The card design here is darker and more minimal than the standard cards. This "elite" styling provides visual "social proof" and a sense of status, which is a key psychological driver in premium fintech products.
-
Data Hierarchy: The "Available Balance" is placed in a high contrast container at the bottom. I chose a large, bold font for the points balance (95,000) to ensure the user’s primary "reward" is the most readable element on the screen.
Multi Card Dashboard
-
Visual Continuity: While each card has its own unique color glow (Gold, Teal, Purple), I maintained a strict layout grid across the stack. This ensures the user’s eyes always find the card number and the "Manage" button in the same place, reducing cognitive load.
-
Brand First Identification: By using large, high contrast typography for the card providers (MASTERCARD, VISA, RUPAY), I prioritized "scannability." Users can identify the card they want to use by brand name and color before they even read the card digits.
-
The "Manage" Call to Action (CTA): I used a consistent secondary button style for "Manage." Placing it on the right side follows standard mobile design patterns (the "thumb zone"), making it easy to perform deeper card actions with one hand.
-
Card Hierarchy: I included sub labels like "Gold Edition," "Infinite," and "Platinum." This adds a layer of information architecture that helps the user distinguish between different accounts they might have with the same provider.
-
The "Swap" Mental Model: I used the industry standard "Pay" and "Receive" card structure. By visually separating the "input" and "output" with a central toggle icon, I created a clear directional flow for the transaction, reducing the risk of accidental mistakes.
-
Progressive Transparency: Crypto fees can be confusing. Instead of hiding them until the final step, I included "Exchange Rate" and "Network Fee" directly on the entry screen. This builds User Trust by providing all necessary financial data before the user commits to a click.
-
Real Time Feedback: I included a dollar value approximation (~$0.00) directly under the crypto amount. This helps users ground the abstract value of Bitcoin or Ethereum in a familiar currency (USD), making the transaction feel more "real" and manageable.
-
High Contrast Primary Action: The "Review Swap" button uses the brand’s signature purple. It is large and spans the width of the screen to ensure it is the most prominent element, guiding the user toward the next step in the conversion funnel.
Asset Exchange Flow
-
The "Hero" Metric: I placed the Total Vault Value ($95,000) at the very top in the largest font size. This follows the Principle of Hierarchy, ensuring the most critical information is the first thing a user sees upon opening the app.
-
Performance Visualization: Below the total balance, I included a "24h Change" indicator with a mini spark line graph. This provides immediate context the user doesn't just see what they have, but how their portfolio is performing at a glance.
-
Asset Categorization: In the "Assets" list, I used a "Double Line info" pattern.
-
Primary Line: Shows the Asset Name and the USD value.
-
Secondary Line: Shows the Coin Quantity and the percentage change. This allows the user to see four different data points per asset without the screen feeling cluttered.
-
Visual Consistency: Each asset is housed in its own "glass" container. This card based layout makes the list feel organized and touch friendly for mobile users.
Unified Asset Dashboard
-
Identity & Status: I placed the user's profile picture and "Premium Obsidian Member" badge at the top. This reinforces the sense of belonging and they could personalize the app according to their preferences.
-
Logical Grouping: I organized settings into high level categories (Security, Linked Banks, App Theme, Support). By using list style "Cards" with descriptive sub text, I reduced the user’s cognitive load, allowing them to find what they need without digging through deep sub menus.
-
Security First Design: In a Fintech app, trust is everything. I placed "Security" as the very first option. This placement signals to the user that protecting their assets (via 2FA and Biometrics) is the app’s highest priority.
-
Iconic Navigation: Each setting category features a unique icon. This helps with visual mapping a shield for security, a bank for accounts, and a palette for themes allowing for faster recognition than text alone.