Case Study: Designing "Streaks" for 1st90

bradyux
5 days ago
3 min read

Brady UX x 1st90 | Summer 2025

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 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 personality, not just a chat assistant
Deliver responsive designs for both web and mobile

Key Innovations

✨ The Foozi Comet: From Console to Companion

Foozi had existed as a messaging system, but not as a visual, branded element in the UI. We changed that.

Using AI-assisted design and animation tooling, we created the Foozi Comet, a small animated companion that flies in during key moments—offering support, encouragement, and delight. This was the first time Foozi had physical form within the app interface.

🌐 Home Screen Carousel

We designed a 3-panel carousel module on the homepage that cycles through:

A dynamic Foozi message
A stat panel (path %, points, rank)
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:

Days completed this week (X/5)
Straight weeks (1+ day/week)
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:

Foozi reappears with a motivational message
Stats animate in
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:

Animations were reused and simplified
Daily and weekly views were combined into a single bar
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:

Generate early Figma drafts with First Draft
Explore multiple animation and stat logic variants
Create the Foozi Comet visual concept
Write and categorize 30+ motivational messages
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
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

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

For questions, contact brady@bradyux.com