Foxly AI
Foxly AI
A better approach to homework helping solution apps
See Live Project
MY ROLE
MY ROLE
Lead Product Designer & Sole-Developer
Lead Product Designer & Sole-Developer
MY PARTNERS
Claude Opus 4.6 & Gpt 4.0 Codex
Claude Opus 4.6 & Gpt 4.0 Codex
TOOLS
FIGMA , CURSOR & CODEX
FIGMA , CURSOR & CODEX
TIMELINE
2026
2026
THE PROBLEM
This project was inspired by a simple observation. Students already know they need to understand their homework and not just copy answers. However the existing apps designed for this purpose fail horrible, they encourage getting quick answers and do not encourage learning in any form. As a result of this UX flaw they tend to be treated more like utility apps rather than consumer apps.
This project was inspired by a simple observation. Students already know they need to understand their homework and not just copy answers. However the existing apps designed for this purpose fail horrible, they encourage getting quick answers and do not encourage learning in any form. As a result of this UX flaw they tend to be treated more like utility apps rather than consumer apps.
EXTRA RESOURCES
If you would like to see the Market Research and Design systems in more details click the buttons here to the detailed notion pages
If you would like to see the Market Research and Design systems in more details click the buttons here to the detailed notion pages
Discovery and Research
Discovery and Research
The Genesis
The Genesis
My kid sister loves maths, she gets good grades in her homework but she sucks in classwork and quizzes. As her older brother I needed to know why this was , I sat her down and had her explain how she conducts her personal study. The important things I got from the conversation with her were, she used homework helping apps to do her homework, they got her answers but she didn’t learn anything. I thought would be a interesting problem to solve so I went down a very deep rabbit hole.
My kid sister loves maths, she gets good grades in her homework but she sucks in classwork and quizzes. As her older brother I needed to know why this was , I sat her down and had her explain how she conducts her personal study. The important things I got from the conversation with her were, she used homework helping apps to do her homework, they got her answers but she didn’t learn anything. I thought would be a interesting problem to solve so I went down a very deep rabbit hole.
Market Research
Market Research
To really understand how these apps work I downloaded 5 of them and used them myself for a couple of weeks, it took a while but i finally understood why my sister did not learn anything. These apps were design for students to get answers and leave. As you can see in the audit I conducted , none of these apps made an attempt at rewarding learning, not a single one decided to attempt the slightest form of emotion design, not even something as little as a cute mascot (this is very important considering their core audience is kids from 8-16 from grade school - high school level).
To really understand how these apps work I downloaded 5 of them and used them myself for a couple of weeks, it took a while but i finally understood why my sister did not learn anything. These apps were design for students to get answers and leave. As you can see in the audit I conducted , none of these apps made an attempt at rewarding learning, not a single one decided to attempt the slightest form of emotion design, not even something as little as a cute mascot (this is very important considering their core audience is kids from 8-16 from grade school - high school level).
Competitive Audit Table
Competitive Audit Table
My Proposed Solution
My Proposed Solution
As we have identified the problem is these app tend to do not encourage learning and have 0 retention mechanics in place. So the obvious solution would be to engineer a retention mechanism , but how?
Simple, we reference the world’s most popular Edtech application , with a 12$ Billion valuation, an average monthly download rate of 5Million and a 40% DAU/MAU rate, i’m taking about Duolingo.
So what made Duolingo so popular and well received that these apps do not make use of
A streak , level and point system made to reward learning.
A mascot that inspires emotional connection, it’s important that the mascot is able to mirror a large variety of human emotions for example duo (duolingo’s mascot ) is able to mimic sadness when you’re gone, excitement when you return after a hiatus and even anger when you’re gone for too long just to name a few.
Branded audio design , a tactic which is extremely under explored in the EDtech niche
My core hypothesis is by implementing these three tactics an Edtech application can boost their DAU/MAU ratio from 10-15% to 20-25% , and students like my sister get benefit in terms of learning from these apps.
As we have identified the problem is these app tend to do not encourage learning and have 0 retention mechanics in place. So the obvious solution would be to engineer a retention mechanism , but how?
Simple, we reference the world’s most popular Edtech application , with a 12$ Billion valuation, an average monthly download rate of 5Million and a 40% DAU/MAU rate, i’m taking about Duolingo.
So what made Duolingo so popular and well received that these apps do not make use of
A streak , level and point system made to reward learning.
A mascot that inspires emotional connection, it’s important that the mascot is able to mirror a large variety of human emotions for example duo (duolingo’s mascot ) is able to mimic sadness when you’re gone, excitement when you return after a hiatus and even anger when you’re gone for too long just to name a few.
Branded audio design , a tactic which is extremely under explored in the EDtech niche
My core hypothesis is by implementing these three tactics an Edtech application can boost their DAU/MAU ratio from 10-15% to 20-25% , and students like my sister get benefit in terms of learning from these apps.
2026 Sensor Tower Data
2026 Sensor Tower Data
Design Strategy and Principles
Design Strategy and Principles
Target Persona
Target Persona
The Core Bet
The Core Bet
So far I had established core problem with the current apps and a proven solution to apply. The next step was to establish design based guideline for myself
So far I had established core problem with the current apps and a proven solution to apply. The next step was to establish design based guideline for myself
Camera-First Interaction : The camera should be the primary input. If the first interaction isn’t faster than typing into google or doesn’t match it’s competitors then the app fails before it’s even given a try.
Camera-First Interaction : The camera should be the primary input. If the first interaction isn’t faster than typing into google or doesn’t match it’s competitors then the app fails before it’s even given a try.
Learning Over Answers : Every solution set should be structured like this Question → Answer → Explanation. The answer is immediate and the explanation is one level below that. By doing this I could prevent cognitive overload while preserving understanding.
Learning Over Answers : Every solution set should be structured like this Question → Answer → Explanation. The answer is immediate and the explanation is one level below that. By doing this I could prevent cognitive overload while preserving understanding.
Retention through personalization : Make use of streaks, Xp, achievements and a shareable profile can give the user a sense of pride in their achievement which made the feeling of completing homework far more rewarding. The product then become part of the user’s identity. If you’ve ever seen a person with a 7 day streak on Duolingo, you’ll understand what i’m talking about.
Retention through personalization : Make use of streaks, Xp, achievements and a shareable profile can give the user a sense of pride in their achievement which made the feeling of completing homework far more rewarding. The product then become part of the user’s identity. If you’ve ever seen a person with a 7 day streak on Duolingo, you’ll understand what i’m talking about.
Emotional Engagement : Use a mascot with a personality , sound design that feels very intentional and haptic feedback that feels very intentional. The goal here is to make studying feel less like a chore and more like an interactive experience.
Emotional Engagement : Use a mascot with a personality , sound design that feels very intentional and haptic feedback that feels very intentional. The goal here is to make studying feel less like a chore and more like an interactive experience.
Information Architecture
Information Architecture
Wireframes
Wireframes
Home page
Home page
Home page
Answers page
Answers page
Answers page
Profile page
Profile page
Profile page
Core User Flows
Core User Flows
Camera to Solution: The student opens the app and the camera is already active. They take a photo of their problem, crop it in-context then send it in for processing, while the AI processes their answers there is a mascot to acknowledge the processing state. The answer then appears with their answers , if they want deeper explanations its ready available a level deeper. When a user decides to get deeper explanations they are present with a chat box modal where they converse with professor foxly.
Camera to Solution: The student opens the app and the camera is already active. They take a photo of their problem, crop it in-context then send it in for processing, while the AI processes their answers there is a mascot to acknowledge the processing state. The answer then appears with their answers , if they want deeper explanations its ready available a level deeper. When a user decides to get deeper explanations they are present with a chat box modal where they converse with professor foxly.
Personalized onboarding: The onboarding flow serves two purposes , first personalizes the AI tutor for the student and collects relevant data which dictates the language and complexity level the AI tutor uses to converse with students.
Twenty pages, each asking a question. The cognitive overload per screen is basically 0, student simply pick an option and progress to the next step. The collection of data happens long before the paywall , by this time the student is invested into the process (a tactic shared by zach yadegari the founder of CAL AI, an app in the fitness niche doing $50M in ARR currently, he discovered this by doing massive A/B testing on his onboarding and paywall, yadegari’s findings reveals sunk cost fallacy increases conversion). The mascot appears on every page guiding the student through the onboarding process as a character with a variety of emotional expressions as well.
Personalized onboarding: The onboarding flow serves two purposes , first personalizes the AI tutor for the student and collects relevant data which dictates the language and complexity level the AI tutor uses to converse with students.
Twenty pages, each asking a question. The cognitive overload per screen is basically 0, student simply pick an option and progress to the next step. The collection of data happens long before the paywall , by this time the student is invested into the process (a tactic shared by zach yadegari the founder of CAL AI, an app in the fitness niche doing $50M in ARR currently, he discovered this by doing massive A/B testing on his onboarding and paywall, yadegari’s findings reveals sunk cost fallacy increases conversion). The mascot appears on every page guiding the student through the onboarding process as a character with a variety of emotional expressions as well.
Free to Premium: This free trial for foxly lasts 3 day, now you may think that’s very counter intuitive. There is a simply psychology that plays into this. By shortening the decision window to fully commit from the conventional 7-14 day window down to just 3 days , it creates a sense of urgency. After that users gat 3 free captures where they can enjoy the full usage of the app.
Free to Premium: This free trial for foxly lasts 3 day, now you may think that’s very counter intuitive. There is a simply psychology that plays into this. By shortening the decision window to fully commit from the conventional 7-14 day window down to just 3 days , it creates a sense of urgency. After that users gat 3 free captures where they can enjoy the full usage of the app.
Gamification System: Foxly AI implements a full progression economy this includes XP, Levels, Streaks, achievements, and a shareable identity.
The XP Economy: Rewards meaningful action such as answering questions, creating solution sets, generating study cards. Bonus XP fires at streak milestones and level-ups, creating a compounding feedback loop where engagement breeds more engagement.
The Level System: It has size tiers , Beginner through Grandmaster deliberately made this way to create a quick early progression that slows as into longer-term goals.
Daily Streaks: Track consecutive days with custom illustrations for each day. The streak is surfaced cross three touch points, home , profile and saved sets ensuring visibility without disruption.
A Shareable Profile Card: Displays the student’s title, level, and streak count. This helps to turn progression into a sort of social currency. As my target audience would say this make gives them aura.
Gamification System: Foxly AI implements a full progression economy this includes XP, Levels, Streaks, achievements, and a shareable identity.
The XP Economy: Rewards meaningful action such as answering questions, creating solution sets, generating study cards. Bonus XP fires at streak milestones and level-ups, creating a compounding feedback loop where engagement breeds more engagement.
The Level System: It has size tiers , Beginner through Grandmaster deliberately made this way to create a quick early progression that slows as into longer-term goals.
Daily Streaks: Track consecutive days with custom illustrations for each day. The streak is surfaced cross three touch points, home , profile and saved sets ensuring visibility without disruption.
A Shareable Profile Card: Displays the student’s title, level, and streak count. This helps to turn progression into a sort of social currency. As my target audience would say this make gives them aura.
The Mascot (Foxly): Foxly is a fox character that appears throughout the app in 15+ emotional states, each mapped to a specific user context ranging from greeting users enthusiastically to begging fo reviews.
This was modelled directly based on Duolingo’s duo the owl, plus my sister really likes foxes.
The Mascot (Foxly): Foxly is a fox character that appears throughout the app in 15+ emotional states, each mapped to a specific user context ranging from greeting users enthusiastically to begging fo reviews.
This was modelled directly based on Duolingo’s duo the owl, plus my sister really likes foxes.
Sensory Design (Audio + Haptics) : Foxly uses a layered sensory feedback system made up of five custom audio cues paired with haptic responses designed to make every interaction feel intentional.
The app opens with a brand signature sound that frames the session. Progression from page to page in the onboarding is paired with a soft whoosh sound and button clicks have a gamified click sound.
Beyond these paired interactions, native haptics extend to 20+ touch points for example camera capture , error states, achievement unlocks, streak celebrations.
Sensory Design (Audio + Haptics) : Foxly uses a layered sensory feedback system made up of five custom audio cues paired with haptic responses designed to make every interaction feel intentional.
The app opens with a brand signature sound that frames the session. Progression from page to page in the onboarding is paired with a soft whoosh sound and button clicks have a gamified click sound.
Beyond these paired interactions, native haptics extend to 20+ touch points for example camera capture , error states, achievement unlocks, streak celebrations.
Foxly Onboarding Screens
Foxly Onboarding Screens
Visual Design
Visual Design
Color System & Rationale
Color System & Rationale
The palette is warm and neutral , it’s deliberately made to distinguish it from the common Red and Blue color schemes used by most apps in this niche.
The background is warm off-white (‘ #FFFCF9 ’) rather than pure white. This reduces blue light and pupil fatigue over sessions longer than 20 minutes, relevant for students working through multi-problem sets at night. Cards it on pure white (‘ FFFFFF ’), creating subtle elevation without relying on drop shadows. Dividers use warm gray (‘#D1C8C0’) that harmonizes with the background.
The color system uses 16 tokens organized by role, text hierarchy (four levels from primary black to placeholder gray) , surfaces (background , card, search) , borders (three weights), and two accent colors. Interactive Blue (‘’#007AFF’) handles tappable elements. Accent Orange (‘#EE7B0F’) is reserved exclusively for conversion CTAs.
The palette is warm and neutral , it’s deliberately made to distinguish it from the common Red and Blue color schemes used by most apps in this niche.
The background is warm off-white (‘ #FFFCF9 ’) rather than pure white. This reduces blue light and pupil fatigue over sessions longer than 20 minutes, relevant for students working through multi-problem sets at night. Cards it on pure white (‘ FFFFFF ’), creating subtle elevation without relying on drop shadows. Dividers use warm gray (‘#D1C8C0’) that harmonizes with the background.
The color system uses 16 tokens organized by role, text hierarchy (four levels from primary black to placeholder gray) , surfaces (background , card, search) , borders (three weights), and two accent colors. Interactive Blue (‘’#007AFF’) handles tappable elements. Accent Orange (‘#EE7B0F’) is reserved exclusively for conversion CTAs.
Snippet of Color Token System in figma
Snippet of Color Token System in figma
Typography System
Typography System
The typeface used is INTER. Inter is designed specifically for screens, with a higher x-height and wider aperture. For an app that renders mathematical notations and multi-step solutions at body text sizes , the legibility difference at small sizes matters. Inter’s open counters in characters like ‘ 6 ’ , ‘ 8 ‘ , ‘ 9 ‘ reduce misreading, this is critical misreading characters especially in context dependant subject like maths can be the difference between success and failure for students.
The typeface used is INTER. Inter is designed specifically for screens, with a higher x-height and wider aperture. For an app that renders mathematical notations and multi-step solutions at body text sizes , the legibility difference at small sizes matters. Inter’s open counters in characters like ‘ 6 ’ , ‘ 8 ‘ , ‘ 9 ‘ reduce misreading, this is critical misreading characters especially in context dependant subject like maths can be the difference between success and failure for students.
Snippet of Typography Token System in figma
Snippet of Typography Token System in figma
Iteration and Measurement
Iteration and Measurement
Closing the feedback loop
Closing the feedback loop
When a student cancels their subscription, the app captures why in a structured overlay with six common responses (too expensive, not using enough, found a better app, technical , missing features, other ). Every response is persisted with timestamps and context, creating a queryable churn dataset that grows with every cancellation. This was lost revenue also serves as feedback.
When a student cancels their subscription, the app captures why in a structured overlay with six common responses (too expensive, not using enough, found a better app, technical , missing features, other ). Every response is persisted with timestamps and context, creating a queryable churn dataset that grows with every cancellation. This was lost revenue also serves as feedback.
Conclusion
Conclusion
What’s next
What’s next
The next phase of deepening the learning loop:
The next phase of deepening the learning loop:
Interactive Quiz Model: Quiz UI, generation logic, and integration with saved sets. Overlay artwork , wireframes and test versions are ready.
Spaced Repetition: Scheduling view sessions based on solution history and difficulty signals, moving from passive saving to active recall.
Card Difficulty Rating System: User-reported difficult per solution, feeding back into the spaced repetition scheduler and AI tutor calibration.
Interactive Quiz Model: Quiz UI, generation logic, and integration with saved sets. Overlay artwork , wireframes and test versions are ready.
Spaced Repetition: Scheduling view sessions based on solution history and difficulty signals, moving from passive saving to active recall.
Card Difficulty Rating System: User-reported difficult per solution, feeding back into the spaced repetition scheduler and AI tutor calibration.
Home