Atlas
Atlas
Atlas
Adaptive Onboarding Experience for an AI Financial Coach
Adaptive Onboarding Experience for an AI Financial Coach
Adaptive Onboarding Experience for an AI Financial Coach
Product Design · Rive · Interactive Motion · Mobile
Product Design · Rive · Interactive Motion · Mobile
Product Design · Rive · Interactive Motion · Mobile
Role: Product Designer & Motion Designer
Tools: Figma, Rive
Platform: Mobile
Focus: UX, illustration, interactive motion, state machines
Role: Product Designer & Motion Designer
Tools: Figma, Rive
Platform: Mobile
Focus: UX, illustration, interactive motion, state machines
Role: Product Designer & Motion Designer
Tools: Figma, Rive
Platform: Mobile
Focus: UX, illustration, interactive motion, state machines
Problem Statement
Problem Statement
Problem Statement
Financial apps often make users feel overwhelmed by asking for personal information before demonstrating their value, turning onboarding into a series of static forms rather than a personalized, engaging experience.
Financial apps often make users feel overwhelmed by asking for personal information before demonstrating their value, turning onboarding into a series of static forms rather than a personalized, engaging experience.
Financial apps often make users feel overwhelmed by asking for personal information before demonstrating their value, turning onboarding into a series of static forms rather than a personalized, engaging experience.
For Atlas, the challenge was to transform onboarding into an adaptive experience where users’ financial goals and emotional states shape the visuals, interactions, and overall journey.
For Atlas, the challenge was to transform onboarding into an adaptive experience where users’ financial goals and emotional states shape the visuals, interactions, and overall journey.
For Atlas, the challenge was to transform onboarding into an adaptive experience where users’ financial goals and emotional states shape the visuals, interactions, and overall journey.
“The goal was to make Atlas feel like it understands you, not just collects information from you.”
“The goal was to make Atlas feel like it understands you, not just collects information from you.”
“The goal was to make Atlas feel like it understands you, not just collects information from you.”
OVERVIEW
OVERVIEW
OVERVIEW
Atlas is a concept for an AI-powered financial coach that helps people build better financial habits, save money, reduce debt, and work toward long-term goals.
Atlas is a concept for an AI-powered financial coach that helps people build better financial habits, save money, reduce debt, and work toward long-term goals.
Atlas is a concept for an AI-powered financial coach that helps people build better financial habits, save money, reduce debt, and work toward long-term goals.
I designed an adaptive onboarding experience where the interface responds to the user's choices through interactive Rive animations.
I designed an adaptive onboarding experience where the interface responds to the user's choices through interactive Rive animations.
I designed an adaptive onboarding experience where the interface responds to the user's choices through interactive Rive animations.
Rather than treating onboarding as a sequence of static screens, the goal was to make the experience feel like Atlas was already learning about the user.
Rather than treating onboarding as a sequence of static screens, the goal was to make the experience feel like Atlas was already learning about the user.
Rather than treating onboarding as a sequence of static screens, the goal was to make the experience feel like Atlas was already learning about the user.
THE CONCEPT
THE CONCEPT
THE CONCEPT
Atlas features a six-screen onboarding experience that gradually builds a picture of each user by exploring their financial goals and emotional relationship with money, using their responses to shape the visual language and animations throughout the experience.
Atlas features a six-screen onboarding experience that gradually builds a picture of each user by exploring their financial goals and emotional relationship with money, using their responses to shape the visual language and animations throughout the experience.
Atlas features a six-screen onboarding experience that gradually builds a picture of each user by exploring their financial goals and emotional relationship with money, using their responses to shape the visual language and animations throughout the experience.
By leveraging Rive, animation becomes more than a decorative element; it becomes an integral part of the product logic, bringing personalization to life.
By leveraging Rive, animation becomes more than a decorative element; it becomes an integral part of the product logic, bringing personalization to life.
By leveraging Rive, animation becomes more than a decorative element; it becomes an integral part of the product logic, bringing personalization to life.
DESIGNING THE ONBOARDING FLOW
DESIGNING THE ONBOARDING FLOW
DESIGNING THE ONBOARDING FLOW
01 — Welcome
01 — Welcome
01 — Welcome
The experience opens with a friendly AI companion that establishes Atlas’s personality through subtle interactions, breathing, and blinking animations, creating an inviting first impression without distracting from the onboarding journey.
The experience opens with a friendly AI companion that establishes Atlas’s personality through subtle interactions, breathing, and blinking animations, creating an inviting first impression without distracting from the onboarding journey.
The experience opens with a friendly AI companion that establishes Atlas’s personality through subtle interactions, breathing, and blinking animations, creating an inviting first impression without distracting from the onboarding journey.
02 — Choose Your Goal
02 — Choose Your Goal
02 — Choose Your Goal
Users select their primary financial goal: saving more, paying off debt, investing, or building an emergency fund. Atlas dynamically transforms its central illustration to reflect their choice, making personalization tangible from the very first interaction.
Users select their primary financial goal: saving more, paying off debt, investing, or building an emergency fund. Atlas dynamically transforms its central illustration to reflect their choice, making personalization tangible from the very first interaction.
Users select their primary financial goal: saving more, paying off debt, investing, or building an emergency fund. Atlas dynamically transforms its central illustration to reflect their choice, making personalization tangible from the very first interaction.
03 — How Do You Feel About Money?
03 — How Do You Feel About Money?
03 — How Do You Feel About Money?
The next question explores the user's emotional relationship with money. Users can choose from Confident, Overwhelmed, Curious, or Stressed, with the AI companion responding through subtle changes in expression, posture, and motion.
These reactions were intentionally restrained to acknowledge the user's emotional state without caricaturing it, reinforcing Atlas as a supportive coach rather than another financial dashboard.
The next question explores the user's emotional relationship with money. Users can choose from Confident, Overwhelmed, Curious, or Stressed, with the AI companion responding through subtle changes in expression, posture, and motion.
These reactions were intentionally restrained to acknowledge the user's emotional state without caricaturing it, reinforcing Atlas as a supportive coach rather than another financial dashboard.
The next question explores the user's emotional relationship with money. Users can choose from Confident, Overwhelmed, Curious, or Stressed, with the AI companion responding through subtle changes in expression, posture, and motion.
These reactions were intentionally restrained to acknowledge the user's emotional state without caricaturing it, reinforcing Atlas as a supportive coach rather than another financial dashboard.
04 — Building the Plan
04 — Building the Plan
04 — Building the Plan
This transition turns the user's onboarding choices into a personalized experience. Instead of showing a conventional loading spinner, Atlas visually assembles the user's plan, with charts, progress markers, goals, and other elements appearing based on their selected goals.
The loading state becomes part of the product experience, showing users that their answers are actively shaping what comes next.
This transition turns the user's onboarding choices into a personalized experience. Instead of showing a conventional loading spinner, Atlas visually assembles the user's plan, with charts, progress markers, goals, and other elements appearing based on their selected goals.
The loading state becomes part of the product experience, showing users that their answers are actively shaping what comes next.
This transition turns the user's onboarding choices into a personalized experience. Instead of showing a conventional loading spinner, Atlas visually assembles the user's plan, with charts, progress markers, goals, and other elements appearing based on their selected goals.
The loading state becomes part of the product experience, showing users that their answers are actively shaping what comes next.
05 — Meet Your Financial Companion
05 — Meet Your Financial Companion
05 — Meet Your Financial Companion
The AI companion becomes more personalized, adapting its visual behavior to reflect the user's financial goal and emotional context. Subtle interactions, such as tapping, trigger responsive gestures and reactions.
At this stage, the companion evolves beyond an illustration and becomes an active part of Atlas's interaction model.
The AI companion becomes more personalized, adapting its visual behavior to reflect the user's financial goal and emotional context. Subtle interactions, such as tapping, trigger responsive gestures and reactions.
At this stage, the companion evolves beyond an illustration and becomes an active part of Atlas's interaction model.
The AI companion becomes more personalized, adapting its visual behavior to reflect the user's financial goal and emotional context. Subtle interactions, such as tapping, trigger responsive gestures and reactions.
At this stage, the companion evolves beyond an illustration and becomes an active part of Atlas's interaction model.
06 — You're Ready
06 — You're Ready
06 — You're Ready
The final screen brings the experience together as a personalized visual environment expands around the companion, reflecting the user's journey and creating a subtle moment of celebration before entering Atlas.
Users can then enter Atlas or review their choices, giving the onboarding a clear conclusion while keeping the experience flexible and user controlled.
The final screen brings the experience together as a personalized visual environment expands around the companion, reflecting the user's journey and creating a subtle moment of celebration before entering Atlas.
Users can then enter Atlas or review their choices, giving the onboarding a clear conclusion while keeping the experience flexible and user controlled.
The final screen brings the experience together as a personalized visual environment expands around the companion, reflecting the user's journey and creating a subtle moment of celebration before entering Atlas.
Users can then enter Atlas or review their choices, giving the onboarding a clear conclusion while keeping the experience flexible and user controlled.
MAKING THE MOTION INTERACTIVE
MAKING THE MOTION INTERACTIVE
MAKING THE MOTION INTERACTIVE
I didn't want the onboarding to feel like six separate animations playing from start to finish. Instead, I built the experience as an interactive system using Rive's View Models, Data Binding, and State Machines.
I didn't want the onboarding to feel like six separate animations playing from start to finish. Instead, I built the experience as an interactive system using Rive's View Models, Data Binding, and State Machines.
I didn't want the onboarding to feel like six separate animations playing from start to finish. Instead, I built the experience as an interactive system using Rive's View Models, Data Binding, and State Machines.
For example, when a user selects a financial goal, the selectedGoal property updates the experience and drives the corresponding visual state.
For example, when a user selects a financial goal, the selectedGoal property updates the experience and drives the corresponding visual state.
For example, when a user selects a financial goal, the selectedGoal property updates the experience and drives the corresponding visual state.
Save More → savings-focused illustration
Pay Off Debt → progress and debt-focused visuals
Start Investing → growth and investment visuals
Emergency Fund → protection and stability visuals
Save More → savings-focused illustration
Pay Off Debt → progress and debt-focused visuals
Start Investing → growth and investment visuals
Emergency Fund → protection and stability visuals
Save More → savings-focused illustration
Pay Off Debt → progress and debt-focused visuals
Start Investing → growth and investment visuals
Emergency Fund → protection and stability visuals
The same system controls the user's emotional state, character behavior, loading experience, and final celebration.
This makes the animation responsive to the user's journey, allowing it to behave more like a product component than a video.
The same system controls the user's emotional state, character behavior, loading experience, and final celebration.
This makes the animation responsive to the user's journey, allowing it to behave more like a product component than a video.
The same system controls the user's emotional state, character behavior, loading experience, and final celebration.
This makes the animation responsive to the user's journey, allowing it to behave more like a product component than a video.
Result and Impact
Result and Impact
Result and Impact
Atlas demonstrates how interactive motion can become part of the product experience rather than simply sitting on top of it.
The project combines product design, illustration, motion, and Rive state machines to create an onboarding flow that responds to users and makes personalization visible.
More importantly, it explores how a motion designer can contribute earlier in the product process by helping shape how an experience behaves, not just how it looks.
The result: an adaptive onboarding concept designed to feel personal from the first interaction.
Atlas demonstrates how interactive motion can become part of the product experience rather than simply sitting on top of it.
The project combines product design, illustration, motion, and Rive state machines to create an onboarding flow that responds to users and makes personalization visible.
More importantly, it explores how a motion designer can contribute earlier in the product process by helping shape how an experience behaves, not just how it looks.
The result: an adaptive onboarding concept designed to feel personal from the first interaction.
Atlas demonstrates how interactive motion can become part of the product experience rather than simply sitting on top of it.
The project combines product design, illustration, motion, and Rive state machines to create an onboarding flow that responds to users and makes personalization visible.
More importantly, it explores how a motion designer can contribute earlier in the product process by helping shape how an experience behaves, not just how it looks.
The result: an adaptive onboarding concept designed to feel personal from the first interaction.
Reflections
Reflections
Reflections
Key Learnings
Key Learnings
Key Learnings
Motion can communicate product intelligence
Motion can communicate product intelligence
Motion can communicate product intelligence
Animation can demonstrate personalization through meaningful visual changes, making the experience feel responsive rather than simply telling users it is personalized.
Animation can demonstrate personalization through meaningful visual changes, making the experience feel responsive rather than simply telling users it is personalized.
State machines change how I think about motion
State machines change how I think about motion
State machines change how I think about motion
Building with Rive shifted my focus from individual animations to interactive systems, considering user inputs, state transitions, character behavior, and reusable components.
Building with Rive shifted my focus from individual animations to interactive systems, considering user inputs, state transitions, character behavior, and reusable components.
The best motion supports the UX
The best motion supports the UX
The best motion supports the UX
Every animation should serve a purpose: acknowledging an action, communicating a change, or reinforcing a decision.
Every animation should serve a purpose: acknowledging an action, communicating a change, or reinforcing a decision.
