I helped design a mobile habit tracker where parents can set goals for each of their kids and keep up with them at home. We worked with Brilliant Cities over three months to extend the support families get from their in-person programs.
Brilliant Cities mostly connects with families during in-person programs.
Families didn’t have an easy way to keep building healthy habits after a program ended, and Brilliant Cities didn’t have a way to see how they were doing in between.
She wants her kids to develop healthy habits, but doesn’t have time to attend the programs.
Simple things she can do at home, and a way to see whether they’re sticking.
Where she came fromCynthia came from conversations with a Brilliant Cities program manager who works directly with families. She combines common patterns around why parents come to programs, what makes attendance difficult, and what support they need at home, rather than representing one person we interviewed.
We split screens between us and collaborated on most of the components. The filter-pill search was mine — I designed the pills and how they behave, and that pattern ended up carrying the whole search flow.
Most of our users were adults who may not use apps often, so I kept screens simple and obvious.
The language around habits and age groups needed as much attention as the interface itself.
The client wanted a mobile website, since families would mostly reach it through their site on a phone.
Scope shifted during the project, so we had to stay flexible while still designing and getting the experience to production within one semester.
Brilliant Cities gave us a branding kit — colors, fonts, and a few components like accordions — but not a full component library. I worked with another product designer to build the rest of what our screens needed: forms, tags, buttons, and more. Having it settled early meant our screens matched even though we were splitting them between us.
We collaborated on most of the components. The filter pill search was mine — I designed the pills and how they behave, and that pattern ended up carrying the whole search flow.
Typing means remembering the exact category name. We took inspiration from shopping-site filters, where icons and colors let people recognize an option instead.
Filter pills with category icons and colors replace a search bar. I designed the pills and how they behave, and the pattern carried the whole search flow.
Pills take up more space than a search bar. We thought that was worth it since parents don’t have to type or remember anything.
Splitting habits up by category lets a parent see all the options in one area before moving on, which made the most sense for a mobile site.
Unlike a typical search, parents can only browse set options, which may feel less intuitive to those used to searching freely.
Brilliant Cities was specific about the categories they wanted, but the names alone didn’t tell a parent which habits were in each one. Cards let us show that.
Cards take up more room than a list on a phone. Multi-select lets parents choose several categories in one pass instead of repeating the selection flow.
We had wording the psychologist approved but no format for it. Steps help parents figure out the interface the first time, and grouping by age gets them to habits that fit their kid.
A parent with kids in different age ranges has to look at more than one group.
Parents can add as many habits as they want, so a page per child keeps each list from getting crowded. A floating button adds more, and grouping by goal makes progress in one area easier to see.
Switching between kids takes an extra tap, but each list stays short, which matters more on a phone.
Parents get reminders to keep up with each goal and stay connected to Brilliant Cities between programs.
The final product is a mobile web app where parents set habit goals for each child, get reminders to keep up with them, and stay connected to Brilliant Cities between programs. We established the shared component patterns before splitting up the screens, so work across both designers stayed consistent.
This was my first time designing alongside another designer. We spent time getting to a shared vision and learning how each other works, and that turned out to matter as much as the design itself.
Working with a PM, developers, and a child psychologist on a one-semester timeline taught me to weigh what I wanted to design against what the team could realistically build and support.
