Overview
In partnership with 1st90, Brady UX was tasked with creating a habit-forming streak tracking feature to reinforce user momentum within a daily learning app. There was no prior streak feature in place. This was a ground-up design system that required brand integration, UX storytelling, and behaviorally-driven engagement.
What we built:
A new carousel UI module for the home screen
A celebration flow on step completion (EOS)
A motivational AI assistant (Foozi) introduced visually and contextually for the first time
A modular, animated streak tracker (week view, stats, drawer integration)
Full dev handoff in Figma, with scalable logic and accessibility baked in
Goals & Challenges:
Help users form long-term habits within a 90-day journey
Visualize streaks without adding cognitive overload
Make daily use feel rewarding without gamification gimmicks
Ensure all animations were lightweight and intuitive
Introduce Foozi as a companion experience, not just a chat assistant
Deliver responsive designs for both web and mobile
Key Innovations:
✨ The Emergence of Foozi: From Console to Companion
Foozi had previously existed only in the chat console. This project marked his first appearance as a UI-integrated companion—surfacing context-aware motivational messages that followed the user through their experience.
We designed message bubbles to appear across the app—from the homepage carousel to the end-of-step celebration modal—transforming Foozi into a branded, supportive guide.
🌠 The Foozi Comet Icon
Alongside the message bubble system, we introduced the Foozi Comet: a symbolic, animated representation of momentum. While not Foozi himself, the comet became a metaphor for the user's journey and a visual bridge to Foozi’s presence.
Designed with AI-generated illustration and fine-tuned in Figma, the comet adds motion and excitement to key flows like the home screen carousel and step completion.
🌐 Home Screen Carousel
We designed a 3-panel carousel module on the homepage that cycles through:
1: A dynamic Foozi message
2: A stat panel (path %, points, rank)
3: A week-based streak panel (straight + perfect)
The module auto-scrolls once on load, then rests on the streak panel. Arrows appear on hover (web) or autoplay cycles (mobile), and the entire component is fully keyboard-accessible.
📅 Weekly Tracker That Doesn’t Get in the Way
Instead of cluttering the screen with a full calendar, we designed a minimal but expressive tracker that shows:
1: Days completed this week (X/5)
2: Straight weeks (1+ day/week)
3: Perfect weeks (5+ days/week)
Animations only trigger when data changes. This keeps the visual system feeling alive without overwhelming users. Numbers animate one-by-one with 600ms delays using CountUp.js and Animate.css.
🎉 End of Step = Moment of Celebration
When users complete a step, we trigger a celebration modal:
1: Foozi reappears with a motivational message
2: Stats animate in
3: A visual calendar shows which days were completed
This flow builds positive reinforcement and gives users a reason to keep going. All visuals are accessible, responsive, and branded to match 1st90’s visual system.
🔄 Drawer Integration with Minimal Load
The redesigned "Your Progress" drawer now includes streak data. But we did so without adding noise:
1: Animations were reused and simplified
2: Daily and weekly views were combined into a single bar
3: Visual hierarchy prioritizes readability, not decoration
We considered touch zones, device constraints, and hover/focus behavior to ensure the drawer felt just as intuitive as the homepage.
AI’s Role in the Work
Brady UX used AI throughout this project to:
1: Generate early Figma drafts with First Draft
2: Explore multiple animation and stat logic variants
3: Design the Foozi Comet icon
4: Develop the look of Foozi’s message bubble system
5: Write and categorize 30+ motivational messages
6: Draft logic trees for message delivery
AI gave us speed. Human design gave us soul.
Outcomes
A streak system that motivates without pressuring
Foozi as a true brand personality and UX guide
Fewer clicks, less visual noise, more emotional reward
A visual system that now matches the quality of 1st90’s mission
Testimonial (pending)
“_____” — Mike Heslin, CPO @ 1st90
Roles
Brady Starr – Lead Product Designer, UX Strategist, AI Integration
Olya Androsik – UX Director, Visual Systems, Animation Oversight
Mike Heslin – Client Stakeholder, Chief Product Officer @ 1st90
Olya Androsik – UX Director, Visual Systems, Animation Oversight
Mike Heslin – Client Stakeholder, Chief Product Officer @ 1st90
Designed With Love by Brady UX
Figma prototype links (web + mobile): Delivered.
Developer Handoff Doc: https://docs.google.com/document/d/1iL1goQJ0tuCqFCYXOIcreFfDsWSE4MS7jT1JBxaCWKQ/edit?tab=t.0#heading=h.j6kor0j4jkfp
Developer Handoff Doc: https://docs.google.com/document/d/1iL1goQJ0tuCqFCYXOIcreFfDsWSE4MS7jT1JBxaCWKQ/edit?tab=t.0#heading=h.j6kor0j4jkfp
For questions, contact brady@bradyux.com
