Product Design Case Study · Fintech · AI
IFI —
AI-Powered
Investment Platform
Designing a complete consumer-facing application from scratch — translating a proprietary AI forecasting engine into a trusted, actionable investment experience for retail investors.
Role
Product Designer
Scope
End-to-End Product Design
Domain
Fintech · AI/ML
Platform
iOS Mobile App
Project Overview
Problem Definition
Research
Design Solution
Outcome
View Designs
9:41
9:41
9:41
Apple Computer
AAPL
181.63
+1.83 (3.88%)
↑ 14.6%
Forecast
Confidence Score
77%
Overall: 87%
Sector: 32%
Forecast
AI
01
Project Overview
A client came to me with a functional AI engine and no product — the challenge was to build the entire consumer-facing application from the ground up.
The Starting Point
The client had already built a proprietary machine learning forecasting engine capable of generating stock and ETF price predictions using a combination of financial indicators, momentum signals, and market sentiment data. What they did not have was any consumer-facing product — no interface, no user experience, no information architecture, and no design system. The AI model existed as an internal technical tool, entirely disconnected from the people who would eventually use it.
My mandate was to design IFI from scratch: to take a powerful but opaque AI system and build a product experience that would make its outputs understandable, credible, and actionable for retail investors. This was not an iteration or redesign — it was a complete product design engagement, from strategy through to final UI.
Greenfield Product
AI/ML Output Design
Fintech
Mobile-First
Subscription Model
Target Audience
Self-directed retail investors
Casual market participants
Data-curious individuals new to investing
Active traders seeking AI-informed signals
Business Goals
Drive user engagement & retention
Build trust in algorithmic predictions
Convert free users to paid subscriptions
Communicate value across pricing tiers
🧭
Product UX Strategy
Defining how the AI engine's capabilities would map to user-facing features, and how those features would drive the core business outcomes.
🗺️
Information Architecture
Designing the full product structure — page hierarchy, navigation model, and content organization across all screens.
🔀
End-to-End User Flows
Mapping every critical journey from onboarding through discovery, analysis, watchlisting, and subscription conversion.
🎨
UI Design
Designing all major screens with a visual system that communicates data clearly without overwhelming non-expert users.
⚡
Prototyping & Interactions
Building interactive Figma prototypes to simulate navigation flows, micro-interactions, and onboarding tutorial overlays.
🎓
Onboarding & Education
Designing onboarding flows and contextual tutorial overlays to accelerate first-time user comprehension of AI-driven features.
02
Problem Definition
Before any design work could begin, I needed to define the real problem — not the surface-level ask, but the fundamental tension between what the AI could produce and what users could actually trust and act on.
⚠️
Core UX Challenge
Retail investors struggle to trust and interpret AI-generated financial predictions. Without transparency into how a forecast is generated, without historical evidence of its accuracy, and without a clear narrative connecting signals to conclusions, algorithmic outputs feel opaque and unreliable — regardless of how technically sound they are. The product's job was to close the gap between the AI's confidence in its predictions and the user's confidence in acting on them.
01
The Black-Box Problem
AI predictions without explanation are simply numbers. When users cannot understand why a stock is forecast to rise 14%, they default to distrust. The system's logic needed to be surfaced in a human-readable way without becoming technically overwhelming.
02
Financial Data Overload
Investment data is inherently dense — price targets, confidence intervals, signal breakdowns, fundamentals, sector analysis. Presenting all of this at once creates paralysis. The challenge was determining what to show, when, and in what order.
04
Subscription Value Communication
Monetizing through subscriptions requires that users clearly understand what they're missing on the free tier. The paywall experience needed to feel like a natural extension of value, not a hard block — converting through desire rather than frustration.
03
Validation Before Decision
Investors don't make decisions on a single data point. They need to verify. They want to see if the AI has been right before, how the current prediction compares to historical accuracy, and whether the signals align with their own understanding of the market.
How Might We — Reframing as Design Opportunities
🔍
HMW — How might we make AI forecasts feel transparent and trustworthy without requiring users to understand machine learning?
📊
HMW — How might we simplify complex financial signals into directional insights that retail investors can immediately act on?
📈
HMW — How might we give users enough historical evidence to calibrate their own confidence in a prediction?
💎
HMW — How might we surface premium value continuously so that subscription upgrade feels like a natural next step?
03
Research & Discovery
Research happened in two directions simultaneously — inward, to understand the AI system's capabilities and constraints, and outward, to understand real investor behaviors and mental models.
🤝
Stakeholder Interviews
AI Engineers
Product Stakeholders
Business Stakeholders
Understand the AI engine's outputs, accuracy rates, confidence scoring logic, and which data points were technically reliable enough to surface directly to users.
🎙️
User Interviews
Beginner investors
Active traders
ETF-focused investors
Understand how retail investors currently research stocks, what signals they trust, where they feel overwhelmed, and what would make them act on an algorithmic recommendation.
🔬
Competitive Benchmarking
Robinhood
Seeking Alpha
Motley Fool
TipRanks
MarketBeat
Identify interaction patterns that users already understood, find gaps in how competitors communicated predictive signals, and spot opportunities for differentiation.
Key Research Insights
01
Navigation Pattern
Directional signals come before deep analysis
Users consistently wanted to know the 'direction' first — is this stock expected to go up or down, and by how much — before committing attention to signal breakdowns or technical indicators. The headline forecast needed to lead every experience.
→ Design Impact
Drove the decision to make the forecast percentage the dominant visual element on every stock card and detail page.
02
Trust Signal
Confidence scores were the single highest-trust driver
When shown a forecast with and without a confidence score, users reported significantly higher trust in the version that included one. They treated it as a proxy for the AI's own certainty — a kind of 'how sure is the machine?' indicator.
→ Design Impact
Confidence score became a persistent, prominently displayed element alongside every forecast, not hidden in detail pages.
03
Credibility
Historical accuracy validates predictions in real time
Users wanted to know not just the current forecast, but whether the AI had been accurate on this stock or in this sector before. Historical accuracy acted as a credibility filter — low accuracy meant they'd discount the forecast; high accuracy meant they'd consider acting.
→ Design Impact
Drove the design of the 'Historical' tab and the accuracy percentage on the stock detail page's forecast view.
04
Retention Behavior
Watchlisting is a common pre-investment behavior
Almost every user interviewed described some form of monitoring behavior before committing to a trade — saving stocks, checking back on prices, following news. The product needed to support this native behavior rather than push users toward immediate action.
→ Design Impact
Drove the Watchlist as a core navigation destination, not a secondary feature, with Conf and Rank columns to support ongoing evaluation.
Competitive Benchmarking Observations
Opportunity
Most platforms lead with raw price data rather than predictive signals, creating a gap for a forecast-first experience.
Opportunity
AI-generated recommendations on competing tools are typically buried in article format, requiring significant reading before understanding the signal.
Opportunity
Confidence or accuracy indicators are rarely present — users are expected to evaluate forecast quality with no calibration tool.
Insight
Existing tools structure information around company financials first, predictions second — which mirrors analyst workflow but not investor behavior.
Decision
Subscription paywalls on competing platforms often block entire sections, creating hard friction. Progressive feature gating would be a more trust-building approach.
Core Differentiator
None of the benchmarked tools offered a signal breakdown that explained which underlying indicators drove a prediction — leaving users to either trust blindly or dismiss entirely.
Platform
Forecast Visibility
AI Explainability
Confidence Score
IFI Opportunity
Robinhood
Analyst ratings only
None
None
Full AI forecast stack
Webull
Basic targets
Minimal
None
Confidence + signal count
Bloomberg
Rich, subscription-locked
Moderate
Partial
Mobile-first access
Seeking Alpha
Community-driven
Quant ratings
Star-based
Single AI source of truth
Trade Ideas
Technical signals
Moderate
None
Retail-accessible UX
04
Ideation & Feature Strategy
Research insights needed to become product decisions — not just features listed on a backlog, but a coherent feature strategy organized around what users needed and what the business required.
⚖️
Prioritization Framework
Features were prioritized on two axes: user impact (does this directly address a validated user need?) and usability (can this be understood and used without training?). Features that scored high on both were designated as core and included in MVP scope. Features with high impact but complexity were designed with progressive disclosure — surfaced at depth, not on the main view. Features that primarily served business goals without direct user benefit were positioned as contextual upsells, never as primary navigation.
🔒
Trust Features
Every feature in this category was designed to answer one user question: 'Should I trust this prediction?' The AI's credibility had to be earned through transparency, not assumed through authority.
Confidence Score
Displayed prominently alongside every forecast. Functions as a qualitative trust indicator — users don't need to understand the algorithm if they can see that the algorithm has high confidence in its own output.
Historical Accuracy
Shows the AI's track record on this specific stock, displayed as a percentage. Provides empirical evidence rather than theoretical credibility — past performance as a validation proxy.
Signal Breakdown
Surfaces the individual ML signals — categorized by Fundamental, Momentum, etc. — with their score and importance weight. Makes the 'why' of a forecast legible without requiring financial expertise.
AI-Generated Explanation
Plain-language summary generated from the model's outputs, contextualizing the forecast narrative. Directly addresses the black-box problem by giving users a human-readable interpretation of machine-generated insights.
🧭
Discovery Features
Discovery features were designed to create entry points for users who don't know what to look for — transforming the platform from a lookup tool into a proactive idea-generation surface.
Explore Dashboard
The primary landing experience — leads with market-level forecast data (SPY, QQQ, IWM) before individual stocks, establishing macro context before micro decisions.
Heatmap
Visual density tool for scanning the market broadly. Color-coded by forecast direction allows users to identify opportunities at a glance without reading individual cards.
Smart Search
Search returns stocks enriched with forecast data and rank by default — not just a name lookup, but a decision-support tool that surfaces AI signals at the point of search intent.
Themes
Thematic groupings (Digital Finance, Food Security, Future of Mobility) allow users to explore stocks through narrative lenses they understand, with sector sentiment scores providing directional cues.
🔄
Retention Features
Retention was not treated as a growth hack — it was treated as a design problem. If users could easily monitor their identified opportunities, they had a reason to return.
Watchlist
Core persistence mechanism. Includes Forecast, Confidence, and Rank columns to support the pre-investment monitoring behavior identified in research. Swipe-to-delete interaction reduces friction in list management.
Ranking Indicators
A proprietary rank number for each stock, displayed in search, watchlist, and stock cards. Gives users a quick sorting signal and creates a vocabulary for comparing opportunities.
Most Significant Events
Surfaces material events (FDA approvals, earnings, analyst actions) with their associated ticker and impact — connecting news to forecast context and giving users a reason to check the app daily.
💎
Monetization Features
The subscription model required features that demonstrated value at every tier without making the free experience feel broken. The principle: free users should feel well-served, but premium users should feel equipped.
Subscription Tiers (Free / Fan / Fanatic)
Three tiers create a clear value ladder: basic directional signals for free, price targets and ETF analysis for Fan ($9.99/mo), and the full toolkit including idea generation and exclusive market content for Fanatic ($19.99/mo).
Feature Gating
Premium features are visible to all users but locked with a contextual prompt to upgrade. This pattern prioritizes conversion through demonstrated value over hard access blocks that create frustration.
Pricing Page
Designed with a 'try free for 30 days' CTA for paid tiers, a clear 'What's included?' expandable on each plan, and the current plan badge — making the decision context clear and the upgrade path frictionless.
05
Information Architecture
The product's structure was designed to support three distinct user mental models simultaneously: the browser, the analyst, and the monitor — without forcing any of them through the wrong flow.
06
User Flows
Four primary flows were designed to cover the complete spectrum of user intent — from first encounter to daily habit to subscription decision.
07
Wireframes & Early Exploration
Low-fidelity wireframes served as the primary tool for structural decision-making — not aesthetic exploration. Every layout choice at this stage had to justify itself through information hierarchy and cognitive load reduction.
Why Lo-Fi First
At this stage, the most dangerous design decisions were structural, not visual. The question wasn't what color a confidence score should be — it was whether the confidence score should appear on the stock card, on the detail page header, or only inside the Forecast tab. Wireframes stripped away visual noise so those architectural questions could be answered on their own terms, without the distraction of aesthetics.
Tab Segmentation Testing
The stock detail page was the most structurally challenging screen in the product. Early wireframes tested two competing approaches: a single long-scroll layout and a tab-segmented layout. The long-scroll approach was abandoned after walkthroughs consistently showed users either stopping early (missing key data) or feeling overwhelmed before reaching the AI analysis. Tab segmentation won because it made the information density a user choice rather than a design imposition.
Modular Card System
The Explore dashboard and Search results were both explored as list layouts and card-based layouts. Card-based layouts were selected because they allowed forecast percentage, price, and rank to coexist legibly at a glance — critical for the 'scan-before-dive' behavior identified in research. Cards also established the visual grammar that carried through from discovery into the watchlist.
Stock Detail — Long Scroll vs. Tab Layout
Long Scroll ✗
Header / Price
Forecast Data
Signals (20+ items)
AI Summary
Historical
Fundamentals
Events
Graphs
Cognitive overload ↓
Tab Layout ✓
FC
AI
Hist
Ev
Gr
Primary Forecast
Price Target
Confidence
Rankings
30D Visual
Controlled depth ✓
Explore Dashboard — Card Layout Exploration
SPY
QQQ
IWM
Best Ideas
Popular
Watchlist
08
Design Solution & Final Product
The final product translates the AI engine's outputs into a layered investment experience — designed for users who want a quick signal as much as those who want deep analysis.
✨
Onboarding & Authentication
Setting expectations before the product delivers them
Onboarding and Login Screens
9:41
Login Screen
9:41
Onboarding Philosophy
The 4-screen onboarding carousel introduces the product's core concepts — AI-powered forecasts, confidence scores, signal counts — without teaching the interface. Each screen addresses a potential trust barrier: "What is this?" → "How does it work?" → "Why should I trust it?" → "What can I do with it?" The watsonx partnership branding on the AI data screen lends institutional credibility before the user has seen a single forecast.
Login Design Decisions
The login screen is minimal by design — the IFI brand mark, two fields, and a primary CTA. Forgot Password is accessible without leaving the flow. No social login complexity at launch; email authentication is sufficient and reduces onboarding abandonment caused by OAuth friction.
🧭
Discovery Experience
From macro context to individual opportunity
Explore Dashboard
The Explore dashboard leads with macro-level forecast context — SPY, QQQ, and IWM indices with their 1-month forecast — before presenting individual stocks. This mirrors how experienced investors think: market direction first, then sectors, then individual names. The three-tab structure (Best Ideas / Popular Stocks / My Watchlist) allows different user intents to coexist on the same screen without confusion.
Search with Forecast Context
Search was designed as a decision-support tool, not a lookup utility. Returning forecast percentage and rank alongside every result means users can evaluate an opportunity at the point of search intent — before clicking through. The Stocks / ETF toggle at the top defines the search domain without hidden behavior.
Explore Dashboard
Best Ideas
Popular
Watchlist
9:41
Search + Forecast
9:41
📊
Stock Analysis Experience
The core product screen — five layers of depth on demand
Stock Detail Page
9:41
Forecast % as Primary Visual Anchor
The forecast percentage is the largest, most visually prominent element on the stock detail page — not the current price. This was a deliberate inversion of convention: the AI's prediction is the product, and the current price is context. Users should understand what the stock is expected to do before evaluating where it is now.
Confidence Score — Always Visible
The confidence score dial sits in the Forecast tab alongside the prediction — never hidden in an AI analysis tab. It is the first trust signal users see. A score below a certain threshold prompts natural skepticism; a high score encourages deeper investigation.
AI Explanation Reduces the Black-Box Effect
The AI Analysis tab surfaces signal counts (positive/negative), a categorized signal table with importance weights, and a plain-language summary of what's driving the forecast. Users don't need to understand the ML model — they need to understand the reasoning.
Tab-Based Layout Controls Cognitive Load
Five tabs allow users to access exactly the depth they want — from the headline forecast to granular signal breakdown to historical performance — without being overwhelmed by a single scrolling surface.
👁️
Monitoring & Retention
Supporting the pre-investment monitoring behavior
Watchlist — Tutorial Overlays
The Watchlist is intentionally data-dense: Symbol, Price, Forecast %, Confidence Score, and Rank all visible at a glance. Color-coded left borders (green/red) provide directional orientation without requiring column reading. This gives users a fast-scan surface for monitoring multiple stocks simultaneously.
Pricing Plans
Over three types of pricing plans for the users for better retention and also provisioning screens were designed according to each pricing plan to monetise the product easily as well as retain the users
My Watchlist
9:41
Heatmap View
9:41
⚙️
System & Settings
Menu structure and theme system
Menu, Themes and Events
9:41
Menu as Secondary Navigation
Features accessed less frequently — ETFs, AI Chat, Themes, Heatmap, Pricing, Account — are housed in a dedicated Menu screen rather than competing for bottom tab real estate. This keeps the primary navigation clean and focused on the highest-frequency actions while ensuring secondary features remain accessible.
Themes — Narrative-Led Discovery
The Themes feature groups stocks under investment narratives users already understand — Digital Finance, Food Security, Future of Mobility. Each theme shows constituent companies and a sentiment percentage, giving users a macro-to-micro entry point that doesn't require knowledge of individual tickers.
Events page
Get quipped with the news and events happening in the world related to your stocks and ETF investing which make sit easier for the user to take decisions freely with insights.
09
Prototyping
Interactive prototypes served a specific purpose at each stage of the project — from early structural validation to stakeholder communication to user testing.
🏗️
Structural Prototypes
Early-stage Figma prototypes connected the primary navigation flow — Explore → Stock Detail → Watchlist — to validate that the tab architecture and bottom navigation model felt natural. These were deliberately low-fidelity so feedback would focus on structure, not aesthetics.
Figma
⚡
Interaction Prototypes
Mid-stage prototypes added interaction detail: tab switching on the stock detail page, the Watchlist swipe-to-delete gesture, the onboarding carousel step progression, and the Search-to-StockDetail drill-down. These were used in internal walkthroughs to identify interaction friction before visual polish.
Figma Smart Animate
Auto Layout
🎓
Onboarding Tutorial Simulation
A dedicated prototype simulated the complete first-time user experience — from the onboarding carousel through login, first Explore view, stock detail tutorial overlay, and watchlist tutorial. This prototype was used to evaluate whether the education system helped users navigate independently after completing it.
Figma Overlay
Component States
10
Challenges & Trade-offs
Every significant design decision on IFI involved a genuine trade-off. These were not failure points — they were the places where the real design thinking happened.
🤖
Simplifying AI Outputs Without Losing Credibility
The central tension of the product. Oversimplifying the AI's outputs (e.g., showing only 'Buy' / 'Hold' / 'Sell') would have made the product feel like a toy and undermined trust in the underlying engine. Showing too much — full model parameters, signal weights, feature importance scores — would have made the product impenetrable for retail investors. The trade-off was resolved through progressive disclosure: directional forecasts on cards, confidence scores always visible, signal breakdowns available on demand in the AI Analysis tab.
→ Trade-off Accepted
Accepted that some expert users would want more raw data access. This was flagged as a roadmap item.
📊
Managing Financial Data Density
Financial data is inherently dense. Price, forecast range, confidence, accuracy, signal count, fundamental metrics, sector comparisons — all of this is contextually relevant but collectively overwhelming. The trade-off was deciding what to defer. Fundamental data (EPS, Revenue, Market Cap) was moved to a collapsible summary rather than displayed prominently, because research showed users used it for verification, not for initial decision-making.
→ Trade-off Accepted
Some users with a fundamentals-first mental model found the initial view too prediction-forward. Addressed through the tab structure giving them a dedicated path.
🔒
Designing Trust for Algorithmic Predictions
Trust is not a single design element — it's a system. On IFI, trust was built through four independent mechanisms: institutional AI partnership branding (watsonx) on onboarding, confidence score always co-presented with the forecast, historical accuracy providing empirical evidence of past performance, and plain-language AI explanations demystifying the model's reasoning. The challenge was that any single one of these alone was insufficient. Designing trust required all four to work in concert.
→ Trade-off Accepted
Trust features added significant design complexity to the stock detail page. The tab architecture was partially created to manage this — trust features are deep, not wide.
💎
Balancing Free Features with Paid Functionality
The free tier needed to provide genuine value — not a degraded experience designed to frustrate users into paying. A free tier that feels broken will drive uninstalls, not upgrades. The trade-off was deciding which AI-powered features to gate: directional forecasts were free (the core AI product); price target ranges and ETF analysis were Fan-tier; advanced idea generation and exclusive content were Fanatic-tier. This required close alignment with the business team on which capabilities were commercially significant enough to gate.
→ Trade-off Accepted
Accepted that the free tier would convert fewer users on feature urgency alone; the strategy relied on habitual use building the case for upgrade over time.
11
Outcome
IFI was designed from zero — from a brief, a technical engine, and a target audience — into a complete, launch-ready product experience.
The final product successfully translates a proprietary AI forecasting engine into a consumer-facing investment platform that retail investors can understand, evaluate, and act on — without requiring any prior knowledge of machine learning or advanced financial analysis. Every major design decision — from the forecast-first visual hierarchy to the tab-based stock detail page to the progressive disclosure of AI signals — traces directly back to a validated user need or a specific business requirement.
The product was delivered as a complete design specification covering all major screens, a documented design system, interactive Figma prototypes for all primary user flows, annotated component specs for engineering handoff, and onboarding and tutorial systems that reduce time-to-value for new users without requiring training.
🖥️
30+
Screens Designed
All major product screens including onboarding, auth, explore, search, stock detail (5 tabs), watchlist, heatmap, themes, pricing, menu, and account
🔀
4
User Flows Documented
New user, discovery, retention, and conversion flows — each with annotated step-by-step documentation and design rationale
💎
3
Subscription Tiers
Free, Fan, and Fanatic — each with clearly differentiated feature sets and a coherent value proposition communicated through the pricing page
⚡
3
Prototypes
Structural navigation prototype, full interaction prototype, and onboarding tutorial simulation — all built in Figma
📊
5
Stock Detail Tabs
Forecast, AI Analysis, Historical, Events, and Graphs — each with a distinct information scope and a clear user intent mapped to it
🔒
4
Trust Features
Confidence score, historical accuracy, signal breakdown, and AI-generated plain-language explanation — working as a coherent trust system
What the Product Achieved
AI Transparency
A machine learning engine that previously existed as an internal technical tool was made legible to non-expert users through a layered disclosure system — without simplifying it into meaninglessness.
Trust Architecture
Four independent trust mechanisms (institutional branding, confidence score, historical accuracy, AI explanation) work together as a coherent system that earns user confidence through evidence rather than authority.
Behavioral Alignment
The product architecture — directional signal → deep analysis → watchlist monitoring → decision — maps precisely to the actual pre-investment behavior pattern documented in user research.
Monetization Clarity
Three subscription tiers with clearly differentiated value propositions, a non-punitive free experience, and a conversion flow designed around demonstrated value rather than access frustration.