ASAP
AI-Scaffolded Action Planner
An AI-native mobile app that helps people navigating major life transitions break down overwhelming tasks — one step at a time — acting as a coach, not an assistant.
- Team
- 4 Members
- My Role
- Research Lead · UX Design
- Tools
- Figma · Claude · Cursor · Perplexity · Anara
- Status
- Post Round 1 Testing · Pre-deployment
100%
Real AI integration at hi-fi
6+
Design research interviews
4
Usability test scenarios
3
Fidelity levels, lo to hi
2
Modes — dark & light
At a Glance
What role are you targeting?
AI UX / Product Designer
Roles at AI-native companies where UX shapes how people interact with LLMs.
Is your work relevant to that role?
Live Claude API integration
Designed an AI-powered academic planner that is deployed and running — not a concept.
Can I quickly understand your contribution?
Research Lead & UX Design Director
Ran 6 interviews, designed 4 usability scenarios, directed IA and visual design for both app modes.
Is there evidence of thinking, not just polish?
Research reframed the problem
Students needed scaffolding, not another calendar — that insight drove every design decision.
Do outcomes look credible?
Live prototype, tested
Available at asap-flame.vercel.app, validated through 4 structured usability scenarios with real users.
01 · Problem
The paralysis
of starting over.
Whether it’s starting college, switching careers, or launching a business — major transitions dump an entirely new set of tasks on people who don’t yet know how to handle them. The result: overwhelm, avoidance, and stagnation.
The problem isn't motivation — it's scaffolding. People know they have things to do. They don't know how to start, sequence, or break them down without help.
The Gap
Existing tools either dump tasks on users or complete them entirely. Neither builds independent planning skills.
The Moment
The blank screen moment is the biggest barrier. Users freeze before they type a single word.
The Goal
ASAP fills this gap: coach, not complete. Guide users through their own thinking — don't think for them.
02 · My Role
Research lead & UX director.
I led user research end-to-end — literature review, design research interviews, usability testing — and translated findings into design direction. I directed the IA and screen flow, drove the color system for both modes, and kept every decision grounded in what participants actually said.
03 · Design Process
Six phases, two full cycles.
A structured double-diamond process with two planned usability testing rounds. Round 2 is scheduled post-deployment to test with real usage context.
01
✓ Complete
Problem Definition
Literature review, competitive analysis, problem framing
02
✓ Complete
Early Ideation
Lo-fi wireframes, screen flows, AI-assisted initial output via Figma Make
03
✓ Complete
Round 1 Testing
6 participants, 4 scenarios, happy path mapping
04
✓ Complete
First Iteration
Mid-fi to hi-fi with real Claude API integration, dark + light mode
05
→ Up next
Deployment
App goes live before Round 2 to capture real-use patterns
06
→ Planned
Round 2 Testing
Post-deployment iteration based on real usage findings
Lo-fi Wireframes — Phase 02
Initial lo-fi explorations. Three rounds of lo-fi built the foundation: where core actions live, how the AI coaching flow is triggered, and what information the user needs at each step.
Method note
Where core actions live, how the AI coaching flow is triggered, and what info the user needs at each step — mapped before a single hi-fi pixel.
Mid-fi Wireframes — Bridge to Hi-Fi
Mid-fidelity added structure and hierarchy. This is where visual language was established — spacing, component placement, and the information architecture that carried through to the final hi-fi build.
Happy Path — Core User Journey
The happy path maps the ideal flow from first open to a completed, AI-broken-down action plan — with the clarification and coaching steps visible.
04 · User Research
Who we designed for.
6 design research interviews with participants aged 18-34, each currently or recently navigating a major life transition. Four scenarios shaped the entire design: College Student, Tech Newbie, Career Swapper, Entrepreneur.
Users didn't lack ambition — they lacked a clear first step. The blank screen moment was the biggest barrier to action.
Onboarding Flow — What users see first
The onboarding was designed to immediately signal the app’s purpose: scaffolded guidance, not another to-do list. Users enter their transition type before the AI can personalise its coaching responses.
Literature Review
Method
Established research foundation for AI scaffolding in executive function support and task management for transitioning adults.
Competitive Analysis
Method
Benchmarked against Todoist, Notion AI, and general-purpose LLMs — identified the coaching gap none of them filled.
Design Interviews
Method
6 participants across 4 transition types. Surfaced emotional triggers — paralysis, shame, overwhelm — alongside practical friction points.
Persona Development
Method
Built from real interview findings, not assumptions — to keep design decisions grounded throughout the project.
05 · AI in Our Process
Where AI helped — and where it didn’t.
AI was embedded in how we designed and built it. An honest account of what worked and what fell short.
Task Entry — Where coaching begins
The task input screen is intentionally minimal. The AI doesn’t act immediately — it first asks a clarifying question to understand the user’s context before breaking down the task. This was a direct research finding: users felt heard before being guided.
Figma Make
Initial wireframe generation
Fast starting point for early flows. Needed significant rework — lacked nuance but unlocked team alignment quickly.
Perplexity + Anara
Research synthesis
Useful for scanning literature quickly. Saved hours in the literature review phase. Citations needed manual verification.
Claude + Cursor
Hi-fi build + AI integration
The hi-fi prototype is live with real Claude API integration for task breakdown and coaching. Biggest technical unlock of the project.
AI accelerated ideation and build speed significantly. It struggled with context-depth — the same gap we identified in the product itself.
06 · Design System
Calm by design.
The core principle: the app must not add to the noise. Users are already overwhelmed. Every decision — color, type, layout — reduces cognitive load.
Slate Teal Primary
Color
Grounded, non-stimulating palette. Warm neutrals with earthy sage and amber accents. Built for both light and dark modes.
Inter Throughout
Type
Clean, accessible, readable across screen sizes without visual weight. Lets users focus on the task, not the interface.
Neutral & Unambiguous
Buttons
No unnecessary flair. Users always know what to tap next without thinking. Less friction, more flow.
AI Breakdown — Screen 4
The first AI response screen shows the broken-down task with confidence labels. The calm design language prevents the screen from feeling overwhelming — intentional use of whitespace, muted secondary text, and a single primary action.
Subtask Detail — Screen 5
Subtask detail view. Each step is presented one at a time to prevent re-triggering the blank screen effect. The coaching nudge appears contextually — not on every screen.
Progress View — Screen 6
Progress tracking. The design uses a minimal progress indicator — not a gamified streak — to avoid creating anxiety around incomplete tasks. The goal is momentum, not pressure.
Deep Focus Mode — Screen 7
Deep Focus is a distraction-free view for users who want to work through a single task without switching between screens. Calendar access is intentionally housed here — a Round 1 finding: users wanted it earlier in the flow. Iteration 2 will surface it sooner.
Profile + Settings — Screen 8
Profile and settings. Transition type is stored here — a key input for personalising the AI’s coaching responses. In Iteration 2, this will inform contextual memory across sessions.
Additional Screens — 9 to 11
Remaining light-mode screens covering edge cases, empty states, and the onboarding completion flow.
Team Alignment Activity
Figma — component library, design tokens, and the full screen set. Also the board used for the in-class alignment activity: collaborative problem framing and feature prioritisation.
07 · Usability Findings
What Round 1 testing revealed.
Participants spanned all four transition types. A product with a strong emotional foundation but significant functional gaps limiting real-world adoption.
ASAP's voice is its superpower. Its intelligence depth is its ceiling.
✓ What worked
- Warm, honest tone — didn't feel generic or robotic
- Confidence labels felt refreshingly different from other AI tools
- One-step-at-a-time pattern helped users who freeze at blank screens
- Clarification flow caught vague inputs — called a "hidden gem" by one participant
- Welcome copy that acknowledged life transitions resonated emotionally
- Soft refusal and coach fallback responses felt supportive, not dismissive
✗ What didn’t
- Subtasks too surface-level — all personas got roughly the same output
- 5 steps insufficient for multi-day or complex projects
- No due date functionality breaks the planning loop
- Clarification flow powerful but hidden — users didn't know it existed
- No onboarding tutorial before the first task
- Edit button ambiguous; no save progress indicator
- Calendar only accessible in Deep Focus — users wanted it earlier
08 · What’s Next
Iteration 2 roadmap.
Deployed before Round 2 testing — intentionally. Real usage data will surface friction that controlled testing can’t capture.
- 01
Deeper subtask personalisation — role-aware breakdowns that adapt to context, not canned outputs
- 02
Contextual memory — remember transition type and build on previous sessions
- 03
Due date functionality + calendar integration — close the planning loop
- 04
Onboarding tutorial — surface the clarification flow and confidence labels on first use
- 05
Sub-role granularity — engineer vs. nurse vs. sales rep need meaningfully different scaffolding
- 06
Round 2 usability testing — post-deployment to validate iteration decisions
Takeaway
Building the coach,not the answer. A tool that does everything for you isn’t scaffolding — it’s dependency. The goal was always to make itself unnecessary. That’s still the north star.
