RockFlow metallic unicorn and trading candlestick visual

APP Product · Website · Branding System

MEET
ROCKFLOW

From product design to brand transformation,
building a unified experience for a global AI fintech platform.

Project Overview

About RockFlow

RockFlow is a Singapore-based AI fintech company building a global investment platform for the next generation of investors. Powered by AI and quantitative research, the platform brings together stocks, options, ETFs, and digital assets into one seamless investing experience. As the company's sole designer, I led the evolution of the product, visual identity, and design system—helping shape a unified AI-native ecosystem across every user touchpoint.

My Role

Sole Product Designer
I led the end-to-end design of RockFlow, building a unified design ecosystem across product, user experience, visual design, and brand.

Design Scope:

  • Product Design
  • User Experience
  • Visual Design
  • Design System
  • Brand Identity
  • Marketing Design

Design Challenge

RockFlow began in 2019 with a simple idea: make investing feel less intimidating and more enjoyable. Its early identity was built around retro comic aesthetics, playful illustrations, and a game-inspired visual language that helped the brand stand out.

As the company expanded, the product evolved from a trading tool into a broader AI-powered investment platform. The original visual language, while distinctive, could no longer support a growing product ecosystem, cross-platform consistency, or the trust expected from a global fintech brand.

The challenge wasn't simply redesigning the interface—it was redefining the entire experience. My goal was to lead RockFlow's transition toward a cleaner, more mature, AI-native design language while preserving the sense of warmth and curiosity that had always been part of the brand.

TO CREATE AN INVESTMENT PLAYGROUND
WHERE EVERYONE CAN PARTICIPATE FREELY AND
EXPRESS THEMSELVES EFFORTLESSLY.

Transforming investment into a lifestyle for young people, powered by AI.

DESIGN STRATEGY

From Trading Tool to AI-native Platform. Smarter Investing: From trading to AI-powered decisions.
FromTrading Tool
ToAI-native Platform
/ Smarter InvestingFrom trading to AI-powered decisions.
RockFlow product experience interface overview

PRODUCT EXPERIENCE

RockFlow mobile investment product with market cards and AI-powered trading experiences
Project TypeMobile Application
IndustryFintech / Stocks Investing / AI Agent

RockFlow App is the core product behind the RockFlow ecosystem. Combining Bobby AI with Hong Kong and U.S. stock trading, it makes investing simpler and more approachable. Every interaction is designed to help users invest with greater clarity and confidence.

PROBLEM
&SOLUTION

Every design decision started with understanding what users truly needed—and what the product needed to become.

Solution

Making investing simple and fun.

By combining Bobby AI, intuitive product design, and a more approachable visual language, I transformed investing into an experience that feels easier to start, more enjoyable to explore, and rewarding to return to.

Problem

Investing wasn't designed for the
next generation.

Most trading apps felt complex and intimidating, while younger investors expected an experience that was simple, engaging, and easy to navigate.

RockFlow App shown across mobile devices with intelligent stocklists, portfolio data and AI investment cards

USER
PERSONA

Curious about investing and excited by AI, but new to the market. Looking for a simple, guided experience that makes investing feel easy, engaging, and approachable.

Alex Chen

Alex Chen

First-time Investor

24
Age
Male
Gender
SF. USA
Location
“Investing should feel as easy and
intuitive as the apps I use every day.”

Goal

  • Start investing with confidence.
  • Learn while building a long-term portfolio.
  • Discover new investment opportunities with AI.
  • Make smarter decisions without spending hours researching.
  • Enjoy an investing experience that feels modern and engaging.

Needs

  • Clear guidance instead of financial jargon.
  • Simple and intuitive trading flows.
  • Personalized AI insights and recommendations.
  • A fun, interactive experience that encourages exploration.
  • A trustworthy platform that makes investing feel less intimidating.
RockFlow mobile interfaces showing copy trading and stock analysis

Trade with Confidence

Follow top investors and discover AI-powered strategies.

Clarity First

Simple screens that make investing easy to understand.

RockFlow AI fintech campaign and mobile app icon visuals

DESIGNSYSTEM

More than a visual system, it's a foundation for building consistent and scalable product experiences.

RockFlow typography, spacing grid and mobile interface design system

Colors

Dark Mood

#886AFFPrimary Action
#1B1533Secondary Surface
#000000App Background
#FFFFFFPrimary Type
#949494Secondary Type
#727272Disabled
#242424Divider
#0EF8C0Positive
#FF38A3Negative

Light Mood

#6F00FFPrimary Action
#F3F1FFSecondary Surface
#FFFFFFApp Background
#000000Primary Type
#717275Secondary Type
#C2C2C2Disabled
#ECECECDivider
#09CA4FPositive
#FF3D00Negative
RockFlow stock detail screen in dark mode RockFlow stock detail screen in light mode

Icon Sets

RockFlow interface icon set

Illustration System

RockFlow illustration system overview

3D Asset System

RockFlow 3D asset system
RockFlow mobile interfaces showing performance sharing and trading hotspots

PRODUCTEXPERIENCE

Turning strategy into experiences users interact with every day.

「On Boarding」

「Exploring」

Portfolio Overview

Track your assets with clear performance trends and real-time portfolio insights.

RockFlow Explore long page

「Stocks Trading」

RockFlow stock trading flow across five mobile screens

A clean interface puts the most important market data front and center. Every interaction is designed to make trading faster, simpler, and more intuitive.

「Copy-Trading」

RockFlow copy-trading experience across two mobile screens

Copy Trading makes professional investment strategies accessible to everyone. Users can follow top traders with ease while learning through real market performance.

「AI Strategy」

RockFlow AI Strategy mobile interfaces

AI Strategy transforms complex market data into clear, actionable insights powered by AI. It helps investors discover opportunities faster and make more confident trading decisions.

「Smarter Options Trading」

RockFlow smarter options trading across three mobile screens

Trade smarter with Dip Sniper, Baby Bear, and Baby Bull. Simplify strategies, build positions, and maximize opportunities. Options trading made easy for everyone.

「Asset and Profile」

RockFlow asset and profile mobile interfaces

A centralized space for managing assets, portfolios, and personal preferences. Clear information architecture and personalized settings help users stay organized and in control throughout their investing journey.

「Astrology Strategy」

RockFlow astrology strategy and lucky stock card mobile experiences

By combining astrology with market insights, RockFlow creates a more personal investing experience for a new generation. It makes investing feel more engaging, approachable, and fun.

「Crypto ETFs」

RockFlow makes crypto ETF investing simple and accessible through a seamless trading experience. It helps users diversify their portfolios with one of the fastest-growing asset classes.

RockFlow crypto ETF investing experiences across three mobile screens
Bobby AI investment companion shown beside blue crystal formations
Project TypeMobile Application
IndustryFintech / AI Agent

Bobby AI is your personal investment companion, bringing intelligent assistance to every investing journey. Powered by natural language interaction, Bobby helps users discover strategies, analyze opportunities, and complete complex tasks. As RockFlow’s AI core, Bobby creates a smarter and more personalized investing experience.

Bobby AI hot trades experience displayed on a mobile device above blue crystals

Bobby
Your 24/7 AI Investment Assistant

Conversational portfolio builder icon

Conversational Portfolio Builder

Turn Ideas into AI Portfolios – Just Say It

Tell Bobby a theme—like 'green energy' or 'AI chips' —and Bobby builds a back-tested AI portfolio you can copy with just $1.

Smart options icon

Smart Options Made Simple

Hedge, Bet, or Protect – Let Bobby Engineer the Math

Fear market swings? Need protection or extra income? Bobby designs option spreads and sends them to our regulated AI broker app in seconds.

Voice-first trading icon

Voice-First Trade

Trade Like Tony Stark – Talk, Tap, Done

Say 'Buy $100 of Tesla', and Bobby places the order instantly — no typing, no mistakes.

Adaptive portfolio learning icon

Learns Your Style

Bobby Learns Your 'Investment DNA'

Bobby tracks your risk level and auto-rebalances each AI portfolio, so your strategy stays on target without busywork.

Mood Board

Translating Bobby AI’s personality into a visual language that feels intelligent, approachable, and unique.

Bobby AI mood board exploring intelligent, personal and inspiring visual themes Intelligent Personal Inspiring

Design System

Establishing a flexible design system to support consistent experiences across AI products and platforms.

01· Logo
Bobby AI logo and mobile application icon

Bobby AI inherits the unicorn symbol from RockFlow, creating a natural connection between the AI assistant and the existing brand ecosystem.

Through soft gradients and a distinctive sparkle detail, the logo captures the feeling of intelligence, curiosity, and unexpected possibilities brought by AI.

Bobby AI logo construction and proportion guide
02· Typography

Playfair Display

Aa  Bb  Cc  Dd  Ee  Ff  Gg  Hh  Ii  Jj  Kk  Ll
Mm  Nn  Oo  Pp  Qq  Rr  Ss  Tt  Uu  Vv
Ww  Xx  Yy  Zz

Geist

Aa  Bb  Cc  Dd  Ee  Ff  Gg  Hh  Ii  Jj  Kk  Ll
Mm  Nn  Oo  Pp  Qq  Rr  Ss  Tt  Uu  Vv
Ww  Xx  Yy  Zz

Light   |   Regular   |   Medium   |   Semibold

03· Color Scheme
Bobby blue and lilac identity gradient
Band Gradient · Bobby Identity#3168FF   #B19BFF   #F1B5FF
Bobby light dark and accent color balance
80%Light15%Dark5%Accent

Neutral Foundation

App Background#FAFAFA
Base canvas
Primary Surface#FFFFFF
Cards · Inputs
Secondary Surface#F3F3F3
Chips · Disabled
Divider#EEEEEE
Borders · Rules
Secondary Text#707070
Labels · Icons
Tertiary Text#AAAAAA
Placeholder
Primary Action#080909
Buttons · Send
Positive#FAFAFAPositive Tint#E5F8ED
Negative#E9252BNegative Tint#FDEBEC
Alert#F05033Alert Tint#FFF0EC
04· Illustrations
Bobby AI mobile hot trades interface
Abstract bank and market decline illustration Abstract AI market intelligence illustration Abstract currency market illustration Abstract cryptocurrency illustration Abstract energy market illustration Abstract growth and opportunity illustration

Designed to humanize complex investment concepts through abstract storytelling.

The illustrations combine dreamy textures, futuristic gradients, and subtle financial symbols to create a visual experience that feels intelligent, approachable, and inspiring.

AI leaders hot trades card Bitcoin breakout hot trades card Dollar strength hot trades card
iPhone displaying the Bobby AI welcome experience
Four Bobby AI screens demonstrating investment analysis and stock discovery

You see the move,Bobby sees the why

Bobby helps with real-time analysis that tells you not just what moved, but why

Bobby voice trading interface beside a person speaking

Trade withBobby’s voice mode

Just speak — Bobby understands your intent and places the trade

Bobby personalized portfolio insights beside an investor

You ask,
Bobby remembers

The more you talk with Bobby, the better Bobby knows your style and preferences

Bobby automated Tesla trading rule shown among blue crystals

You Decide,
Bobby Executes

Set your trading rules once. Bobby automatically places orders when your conditions are met.

Two Bobby AI mobile experiences above a futuristic planet

Investing, Reimagined.

An AI companion that understands your goals, learns your preferences, and turns conversations into confident investment actions.

RockFlow Trading Platform displayed on a purple-lit laptop
Project Type
Website
Industry
Fintech / AI Agent

RockFlow.ai is the digital hub of the RockFlow ecosystem, combining the brand experience with a powerful web trading platform. Built for desktop-first investors, it delivers a seamless investing experience with greater efficiency, clarity, and confidence.

Official Website

The digital gateway to the RockFlow ecosystem, connecting brand storytelling with product discovery.

Complete RockFlow website experience
RockFlow feature guide shown on a desktop display

Feature Guide

Interactive walkthroughs make Bobby’s key features easy to explore and understand. Users can quickly learn how each feature works before experiencing it in the app.

AI Strategy Preview

Experience a simplified version of Bobby’s AI Strategy directly on the web. Explore how AI generates investment ideas and discover the value before entering the app.

AI strategy preview shown on a desktop display
RockFlow web brand experience on a laptop

WEB TRADING PLATFORM

A professional desktop experience that brings the power of RockFlow investing to the web.

Bobby AI website displayed on a desktop monitor

Built for desktop workflows, Bobby AI provides a more comprehensive view of the market and your portfolio. With more space for analysis and conversation, investing becomes faster, smarter, and more efficient.

Bobby prediction markets desktop experience
Track real-time prediction markets with live probabilities and market signals. Bobby helps users uncover emerging trends before they happen.
Bobby personalized investing workspace
Your AI-powered investing workspace for personalized insights and portfolio intelligence. From market analysis to actionable recommendations, Bobby turns information into decisions.
Bobby AI editorial website displayed on a laptop
Bobby AI curated market story feed
A curated feed of market stories, powered by AI. Bobby filters the noise and surfaces the events worth your attention.
Bobby AI market story analysis
Every story comes with context, not just content. Bobby breaks down complex market events into clear insights and actionable takeaways.