The Journey at a Glance
TARGET USER
Persona
User Journey
Pain Points
Student Disengagement
65% of teachers reported drops in attendance, showing students are disengaged from learning.
Reignite Motivation through AI Support
Chat with StudyOwl for homework help or casual conversation.
Chats are private and visible only to the student.
Upload or take a photo for quick feedback.
Talk to StudyOwl by voice or text — whichever feels easier.
Academic Decline
Over 50% of teachers saw declines in academic performance.
Make Learning Interactive and Rewarding
Fun, reward-based quizzes that make learning feel like a game.
Short course videos to review lessons anytime.
Multiple-choice questions for quick understanding checks.
Quiz audio support for accessibility and inclusivity.
Classroom Anxiety
Many students feel anxious or embarrassed to ask questions in class.
Build Confidence through Progress Tracking
Track progress easily to build confidence.
Earn streaks and rewards for consistent effort.
View weekly XP graphs for motivation.
See how close you are to leveling up — learning made encouraging, not intimidating.
Wireframe
Sketch
Showcasing my AI-driven UX workflow, this project uses Figma Make and generative tools to design StudyOwl, an adaptive learning app that helps students learn confidently while easing teacher workload.
Wireframe
Starting from my sketch, I built a lo-fi wireframe in Figma to test layout and flow. After refining it into a cleaner version, I learned that wireframes only need enough detail to communicate structure and intent clearly.
AI Prototype
I explored Figma Make AI to build an interactive React prototype using vibe code prompts. The AI also helped fill in missing design areas, speeding up iteration. By prompting in smaller, focused steps, I learned how to construct a functional React prototype through AI collaboration.
High-Fidelity Design
Moodboard
I used Nano Banana AI to generate design concepts by uploading my color palette, logo, and wireframes. Through several iterations, I built a series of moodboards that guided my visual direction. This helped me explore multiple concepts quickly and accelerated the overall design process.
Design Assets
I uploaded my owl logo into Nano Banana AI to generate complementary visuals and themes. These iterations helped me build a strong, cohesive brand identity that stayed consistent across all StudyOwl designs.
Hi-Fi Wireframe
StudyOwl’s bright, colorful interface helps students track progress easily and get private, AI-powered homework help — making learning feel fun, supportive, and effortless.
Hi-Fi Wireframe
StudyOwl keeps learning fun and focused with bite-sized lessons that fit into any schedule. Students can review key concepts through short videos, earn XP and badges for progress, and stay motivated while mastering new skills.
Hi-Fi Wireframe
Turn learning into an adventure! Students battle the Grammar Monster and other bosses in fun, turn-based quizzes. Each correct answer earns XP, real rewards, and helps them level up while keeping practice engaging and motivating.
Hi-Fi Wireframe
StudyOwl keeps learning personal and empowering. Students can track their progress, earn badges, and set daily goals at their own pace. Accessibility options like high contrast and reduced animation make it inclusive for everyone, while 24/7 live chat and video tutorials ensure help is always close by.
Prototype
Prototype
I experimented with Figma Make to build a high-fidelity prototype, but the results lacked the visual polish I needed. In this case, using the traditional Figma prototyping method proved more efficient and easier to update—especially with a design system already in place to maintain consistency.
Branding
Marketing
Since most teachers are active on Facebook, I designed a targeted ad optimized for that platform. Using Figma, OpenAI, and Nano Banana, I also created an Apple App Store mockup to extend the StudyOwl brand across both web and mobile marketing channels.
Merch
I used Nano Banana and the StudyOwl mascot to generate a range of branded merchandise, giving the project a more realistic, market-ready feel. Then, I used Adobe Firefly to enhance and extend the visuals, creating high-quality mockups that strengthened the overall brand presentation.
Website
A fully realized product experience for StudyOwl, designed and built in Framer.
From concept to launch, the site brings together product thinking, interface design, and real-world execution.
Key Takeaway
