CF Hero
An app for kids with cystic fibrosis that turns daily breathing exercises into something they want to do, and do together.
Role: UI designer Client: CF Hero, NGO Platforms: Android and iOS
CF Hero is an NGO that helps kids with cystic fibrosis. Kids with CF have to do breathing exercises every day to clear dangerous bacteria from their lungs. CF Hero's app helps them do it, and I worked on it as the UI designer.
A character of their own
Every child has a character who helps them through the breathing and rewards them with points. Points are currency in the app's shop, where kids buy new clothes for their character. The exercise is the same every day; the character keeps changing.
The daily loop
The home screen is built around today. The top bar says how many inhalations are left today (Dnes ještě 4 inhalace) with a segmented progress bar, next to the points earned. Below the character are four ways in: the shop, comics, CF Heroes and the inhalation itself.
Breathing together
The card under the character shows how many other heroes are inhaling right now, with their avatars and a Join button (Přidat se). During an inhalation, the other kids appear in a row along the top with their names, next to a timer, one simple instruction and the mascot. A lonely medical routine becomes something you do with others.
My role
I worked on ideation, user flows and developer handoff, and I built CF Hero's design system library so the small team could keep the app consistent as it grew.