Problem-to-Prototype Using AI Tools
Goal: Demonstrate how AI tools can drastically reduce the time from problem to prototype.
Objective:
To rapidly ideate, design, and prototype a feature for a mental health app using AI-assisted tools, while identifying the line between human creativity and machine augmentation. Using AI tools I redesigned an AI-powered recommendation experience for a mental health app in 5 hours instead of the typical 3 - 5 days.
Constraints:
Solo project without support of a product
No direct access to stakeholders or user data
Limited time (completed in under a day)
Approach:
Blend human-centred thinking with AI tools to accelerate ideation, competitor research, user flows, and UI design.
Context
The mental health app has a feature that includes content and tools that users have learned throughout their chosen course. They can refer back to this content any time.
A sub-feature is Recommendations, which, based on a machine learning engine, provides users with blog articles relevant to their situation in life.
How it works:
Article Delivery: Users receive 3 blog articles matched to their course and interests
Rating System: Users rate article relevance using thumbs-up or thumbs-down interaction
Save Functionality: Articles can be saved for future reference
Feedback Loop: User ratings are fed back to the recommendations engine to improve future suggestions
Content Refresh: New articles are provided weekly or daily
The qualitative and quantitative insights provided by the App were crucial in identifying emotional tension points and user expectations. Here's how I interpreted the research:
| Insight | Design Implication |
|---|---|
| 70% of users are inexperienced with AI | Users need simple, non-technical language and guided onboarding. |
| Top benefits: efficiency, support, medical care | Leverage these perceptions by positioning AI as an assistant, not a decision-maker. |
| Top concerns: unethical use, misinformation, loss of empathy | Design must build ethical transparency, use empathetic tone, and clearly show the human-in-the-loop. |
| Fear of AI replacing psychotherapists | Messaging should emphasize AI as a supportive layer to enhance—not replace—human care. |
| Emotionally distraught reactions | The interface must feel emotionally safe: soft visuals, human-centered language, and clarity about boundaries of AI use. |
The Challenge
How might we design a clear, trustworthy, and emotionally intelligent experience that helps users understand when and how AI is used, without triggering fears around automation or loss of human empathy, especially in a sensitive space like mental health?
Requirements
1) Improve user understanding of the AI-driven technology during their first use of the feature
2) Ensure the design instils confidence, trust and a sense of safety in users in a visually delightful way
3) Create a design communication system that clearly communicates when AI is used across both the app and website
4) Improve the intrinsic value to users and increase usage of the feature through delight
Timeline: AI-Accelerated Design Process
Here’s a visual breakdown of how I structured my working time:
| Phase | Tools Used | Duration | AI vs Human |
|---|---|---|---|
| Competitor Analysis | Screenshots, observation notes |
45 mins
|
AI for research, Me for insights |
| User Flows | Me (ideation), We.O (visualization) |
30 mins
|
Co-created |
| Wireframes (Clickable) | Stitch |
20 mins
|
AI-generated |
| Final UI | Figma |
1 hr
|
Me |
| Prototype Export | (Placeholder: Bolt / Lovable) |
10 mins
|
Tool-assisted |
| Reflection + Learnings | Me + ChatGPT for synthesis |
30 mins
|
Me |
Total time: 3 hours 15 minutes
Competitor analysis
Based on an analysis of Ai-companions that curate content/results, I indentified the followings trends, ChatGPT summarised the stickies according to the categories asked for in my prompt:
1 )Transparency Through Visual Storytelling
Visual Elements: Soft, organic shapes and warm color palette suggesting human touch
Copy Tone: "We're learning about you, not judging you"
Trust Signals: Privacy badges, data usage explanations in plain language
Safety Features: Clear data controls, "Pause AI" option always visible
Delight Factor: Gentle animations showing AI "thinking" with breathing-like motions
2) Human-AI Partnership Language
Visual Elements: Dual-tone design showing human input + AI processing
Copy Tone: "Your insights + our intelligence = better content"
Trust Signals: Real user testimonials about recommendation accuracy
Safety Features: Explanation of what data is NOT used (no personal journal entries)
Delight Factor: Celebration animations when ratings improve recommendations
3: Progressive Accuracy Indicators
Visual Elements: Confidence meters showing recommendation strength
Copy Tone: "Getting to know you better" with percentage improvements
Trust Signals: Accuracy metrics and improvement tracking
Safety Features: Easy "Start over" option to reset preferences
Delight Factor: Achievement badges for helping train the AI
4: Emotional Safety First Design
Visual Elements: Calming gradients and rounded corners throughout
Copy Tone: "Gentle suggestions" rather than "recommendations"
Trust Signals: Mental health professional endorsements of AI safety
Safety Features: Content warnings and emotional impact indicators
Delight Factor: Seasonal themes and gentle personality in AI interactions
Apps analysed: Wysa, Dot, Pillow, Gemini, Arc
Concept
To be able to prompt any tool for any next steps, I had to be clear on the concept and their user flows, and it was fastest and easiest for me to map it out directly in Figma. the competitor research and the Ai text-organisation helped me decide on the concepts I wanted to focus on for this project:
An Ai helper
2. A learn-at-your-will system
Tone: Warm, companion-like, emotionally supportive
Direction: A clearly framed AI helper as a co-learning partner that evolves alongside the user. Focused on trust, progress, and collaboration.
Tone: Transparent, empowering, no fluff
Direction: A self-guided, logic-first onboarding with strong UX around control, visibility, and user empowerment. AI is present, but in the background.
User Flows
For the user flows, I wanted to focus more on inform ( app informs the user) as the goal is to inspire trust in the feature.
Wireframes
Now this is the part I was most looking forward to because I planned to try using Stitch which I’d never used before.
My usual wire- framing process looks like this:
Write down screen elements > Wireframe in Figma
However this time, this is what my process (with low exceptions) looked like:
Write down screen elements > Generate the perfect Stitch prompt via ChatGPT > Generate wireframe in Stitch > Edit in Figma
