Winking Star
Family habit tracker shipped on iPhone, iPad, and web. One Firebase backend, one earthy palette, three form factors. Solo design and build.
about.
Project Overview
Winking Star is a habit tracker for families. A grown-up sets weekly activities, each superstar earns stars, and a weekly milestone reveals a pet pal that grows over the following weeks.
It runs as a native iOS app on iPhone and iPad, plus a web app at winkingstar.com. Same Firestore backend, same earthy design language, three form factors. I designed and built it solo, with AI coding agents as build partners.
My Role
Solo. Design, brand, copy, illustration direction, React Native + Expo build, Firebase backend, Apple Sign In, and App Store Connect submission. Five real families tested it through interview-led research and weekly iteration.
Design Thinking Process
I ran the build through five Design Thinking phases with five families recruited for short remote interviews. Each phase closed on a tested assumption before the next began.
Interviews shaped two big decisions: pet pals had to be a surprise, not a choice; and the star sheet had to exist in both worlds, fridge and phone.
Brand Identity
Warm and earthy. The Winking Star brand sits in cream, sage, terracotta, and cocoa, with hand-drawn doodle illustrations replacing flat icons across the headers and tab bar. Light mode only. The product is built to feel like an open picture book, not a dashboard.
The terracotta and divider tokens were retuned for WCAG AA in April after an accessibility sweep flagged the original values. Body text now sits at 12.4:1 on cards, section headings at 5.1:1.
Cross-platform: iPhone + iPad + Web
One Firebase project, one token system, three form factors. The web app at winkingstar.com and the iOS app at com.winkingstar.app share the same Firestore data, the same earthy palette, and the same Nunito typography.
The iOS app runs natively on iPhone and iPad. The iPad layout is a full pass across the five-tab IA so it reads as designed for iPad, not stretched iPhone. The iOS app adds custom haptics, push notifications, star-sheet scanning, and universal links. The web app supports laptop and TV-cast use.
Decisions
Decision 1. Native iOS, not just responsive web.
Options considered: PWA only, responsive web wrapped in WebView, native React Native + Expo build.
What I chose: native RN/Expo.
Why: haptics, push notifications, universal links to winkingstar.com, App Store distribution, and real mobile gestures all needed a native runtime. A PWA would have shipped the same screens but felt like a web page on iOS.
Decision 2. Pet pals are a random surprise, themes are chosen.
Options considered: let superstars pick their pet pal, let them pick both, randomise both.
What I chose: themes are picked by the grown-up per superstar; pet pals appear as a surprise after a weekly milestone.
Why: two different design jobs. Themes are personalisation. The superstar should see themself in the page chrome every day. Pet pals are dopamine. Surprise drives the moment, and freedom of choice would have killed the reveal.
Decision 3. Physical star sheet, digital sync.
Options considered: digital-only stars, printable star sheet with no sync, printable sheet with camera scan-back.
What I chose: printable activity sheet with a camera scan that mirrors stars back to the chart.
Why: families wanted both the physical moment of putting a star on the fridge and the digital memory in the app. Scanning closes the loop without making the grown-up double-track.