ProphetX: Scaling Fintech UI through AI-Assisted Workflows

Accelerating Fintech visual production x4 with an AI-Integrated Workflow

Project Type

FinTech · AI Integrations · Design Systems

Duration

4 weeks

TOOLS

Figma, Gemini3, FigmaMake

My Roles

UI/UX Design

Prompt Engineering

System Architecture

Team

project manager (client)

frontend developer

backend developer

me

Problem

Unclear Client Wants

The client’s vision for ProphetX was ambitious but lacked a defined hierarchy. The challenge was migrating an existing, sophisticated user base from a crypto web dashboard to a dedicated mobile prediction market.

As the Lead UI/UX Designer, I was responsible for the end-to-end design lifecycle. I operated as a strategic bridge between the client's ambitious growth goals and the technical constraints of real-time market data.

The client’s vision for ProphetX was ambitious but lacked a defined hierarchy. The challenge was migrating an existing, sophisticated user base from a crypto web dashboard to a dedicated mobile prediction market.

As the Lead UI/UX Designer, I was responsible for the end-to-end design lifecycle. I operated as a strategic bridge between the client's ambitious growth goals and the technical constraints of real-time market data.

understand past transactions
understand past transactions

Solution

Navigate Ambiguity with AI Workflows

To transform an incoherent brief into a functional fintech product, I engineered an AI-augmented design pipeline that acted as extra teammates I can manage throughout the project.

This accelerated the production workflow by 400% and a successful dev-ready handoff.

To transform an incoherent brief into a functional fintech product, I engineered an AI-augmented design pipeline that acted as extra teammates I can manage throughout the project.

This accelerated the production workflow by 400% and a successful dev-ready handoff.

make informed decisions
make informed decisions

Discovery

AI-Augmented Prototyping

To bridge the gap between client intent and functional UI, I used Nano-Banana to generate rapid user flows, wireframes, and IA.

I utilized these initial AI outputs as a structural baseline, refining them into a custom clickable prototype that addressed client's needs.

This quick turnaround led to an immediate increase in client engagement during the first walkthrough.

Mapping client intent into IA and user flows
persona-driven wireframes iterated through Gemini 3 to identify and mitigate high-friction edge cases
persona-driven wireframes iterated through Gemini 3 to identify and mitigate high-friction edge cases

Strategy

Persona-Driven Flow Generation

I leveraged Gemini3 to simulate different user personas and generate unique user flows to identify specific user pain points.

This process allowed me to help the client surface critical missing features, such as localized Bet Chance Displays (EU vs. American modes) and Language Toggles, which were essential for the project's international launch scope.

Adding in more specific UX choices based on client's needs
lofis built off the initial wireframes, more fleshed out ideas
lofis built off the initial wireframes, more fleshed out ideas

Development

Automating Systems

To ensure the developer-ready handoff was seamless, I used Claude to generate WCAG-compliant Design Tokens for a high-contrast 'Dark Mode.' This automated the typography ramps and color variables, allowing me to focus my manual effort on the custom 3D asset generation (via Nano-Banana) and high-fidelity interaction polish.

Deployed working code
dark mode screens implemented using custom Design Tokens
dark mode screens implemented using custom Design Tokens

Gamified High-Density Data

The final UI is a blend of trading app simplicity and high-density data. I utilized AI for custom 3D asset generation to create specific, crypto-esque visuals that are typically time-prohibitive to model manually.

I concluded by animating the Live Prediction Charts, ensuring the most critical data point was visually 'shiny' and engaging for the user.

live chart animation

Results

Successful Handoff!

By integrating an AI-driven workflow, I accelerated the visual production and system architecture phases by 400%, moving from an incoherent brief to a dev-ready handoff ahead of timeline.

By integrating an AI-driven workflow, I accelerated the visual production and system architecture phases by 400%, moving from an incoherent brief to a dev-ready handoff ahead of timeline.

hi-fidelity screens polished and optimized for developer handoff
hi-fidelity screens polished and optimized for developer handoff

Results

  • Initial interactive prototype completed within 48 hours

  • Engineered a Variable-based Design System (Tokens) that supports instant Light/Dark mode switching and WCAG 2.1 AA compliance

  • Smooth implementations

Reflections

I understand the importance of making it exist before making it happen. I learned to stop chasing visual perfection and focus on delivering what's needed.

Leveraging AI tools like Gemini and Claude allowed me to spend less time on repeated actions and more time solving high-stakes interaction problems like live-chart feedback and betting logic.

Even when faced with shifting client requirements and technical constraints, having a solid, automated foundation allowed me to pivot quickly without sacrificing quality.

What's next?

  • Transition from fixed spacings to a responsive grid system to support desktop views

  • Stress-testing the card components with real-time data hooks

  • Expanding variable modes to support right-to-left (RTL) languages and specific regional data-display logic

app demo

UniLink: Community App UX Research

BridgeUs: Career Tool for Students Redesign

TravelBestie: AI Travel Planning App Hackathon (1st Place)

AI Workflow for Prediction Market App

Projects

Daphne Cheng

LinkedIn

Resume

LinkedIn

Resume