![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 82 82" xmlns="http://www.w3.org/2000/svg"><path d="M 0 3.106 L 3.123 0 L 20.135 16.926 C 20.409 17.197 20.626 17.519 20.775 17.875 C 20.924 18.23 21 18.611 21 18.996 C 21 19.38 20.924 19.761 20.775 20.117 C 20.626 20.472 20.409 20.794 20.135 21.066 L 3.123 38 L 0.003 34.895 L 15.969 19 Z" fill="rgb(49, 49, 49)" height="38px" id="s7PhIa9un" transform="translate(30.212 21.908)" width="21px"/></svg>)
Ripple: Turning Small Habits
Into Big Waves
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 82 82" xmlns="http://www.w3.org/2000/svg"><path d="M 0 25.714 L 0 34.286 L 51.75 34.286 L 51.75 42.857 L 60.375 42.857 L 60.375 34.286 L 69 34.286 L 69 25.714 L 60.375 25.714 L 60.375 17.143 L 51.75 17.143 L 51.75 25.714 Z M 43.126 8.572 L 51.751 8.572 L 51.751 17.143 L 43.125 17.143 L 43.125 8.572 Z M 43.126 8.572 L 34.5 8.572 L 34.5 0 L 43.126 0 Z M 43.126 51.428 L 51.751 51.428 L 51.751 42.857 L 43.125 42.857 L 43.125 51.428 Z M 43.126 51.428 L 34.5 51.428 L 34.5 60 L 43.126 60 Z" fill="rgb(255, 255, 255)" height="59.99999755566683px" id="MM6SLOagw" transform="translate(7 11) rotate(90 34.5 30)" width="69px"/></svg>)
Competition
CISSA Hackathon
Role
Lead Product Designer
Timeline
3 days
Ripple is a social well-being app built during a 3-day hackathon that tackles the challenge of habit abandonment. Research shows that 30% of goals fail due to a lack of accountability. We designed a gamified solution where habits are visualized as living fish. If you stick to your goal, your fish thrives; if you slack off, it gets sick. I hand-illustrated the entire UI from scratch and delivered a high-fidelity prototype that earned an Honorable Mention and specific praise for "Best UI" from the judges.
Context
The "Boring List" Syndrome Checkboxes don't inspire emotional investment.
Standard habit trackers fail because they lack emotional stakes.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 82 82" xmlns="http://www.w3.org/2000/svg"><path d="M 82 82 L 0 82 L 0 0 L 82 0 Z M 35.306 68.334 L 44.417 68.334 L 44.417 36.445 L 35.306 36.445 Z M 34.167 22.778 C 34.167 26.058 36.609 28.464 39.861 28.464 C 43.114 28.464 45.556 26.058 45.556 22.851 C 45.556 19.498 43.187 17.092 39.861 17.092 C 36.609 17.092 34.167 19.498 34.167 22.778 Z" fill="rgb(0, 0, 0)" height="82px" id="D3F9kcYvK" width="82px"/></svg>)
No Visceral Feedback
Missing a day just leaves a blank space on a calendar. It doesn't feel bad.
Isolation
Success (or failure) happens in a vacuum.
The "Why" Gap
Users forget why they started once the initial excitement fades
We needed a way to make habit-tracking feel alive.
▲ 30% of goals die young
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 82 82" xmlns="http://www.w3.org/2000/svg"><path d="M 0 25.714 L 0 34.286 L 51.75 34.286 L 51.75 42.857 L 60.375 42.857 L 60.375 34.286 L 69 34.286 L 69 25.714 L 60.375 25.714 L 60.375 17.143 L 51.75 17.143 L 51.75 25.714 Z M 43.126 8.572 L 51.751 8.572 L 51.751 17.143 L 43.125 17.143 L 43.125 8.572 Z M 43.126 8.572 L 34.5 8.572 L 34.5 0 L 43.126 0 Z M 43.126 51.428 L 51.751 51.428 L 51.751 42.857 L 43.125 42.857 L 43.125 51.428 Z M 43.126 51.428 L 34.5 51.428 L 34.5 60 L 43.126 60 Z" fill="rgb(255, 255, 255)" height="59.99999755566683px" id="gXFm8DZHv" transform="translate(7 11)" width="69px"/></svg>)
Exploration & Concept
The "Tamagotchi" Effect, If you don't feed it, it dies.
▲ Research from American Society of Training and Development (ASTD).
I led the concept phase, brainstorming metaphors for "care" and "growth." We landed on the concept of Aquatic Life.
A habit is like a pet. It requires small, consistent actions to stay alive. Humans have an innate desire to nurture. By visualizing a habit as a cute fish, we trigger the "caretaking" instinct.
▲ Sketches and affinity mapping
The Shift…
Solution
We designed and illustrated the entire interface in Figma, creating a playful, immersive world.
▲ App UI design
01
The Habit Fish
A library of aquatic creatures from scratch. Each fish represents a specific goal The UI changes dynamically: complete your task, and the fish glows; miss it, and the fish turns sick and sluggish.
02
The Social Tank
A a "Community Tank" view where users can see their friends' fish swimming together. If your fish is sick, your friends see it instantly adding a layer of social accountability without shaming
03
Customization Hook
To deepen user investment, a customization flow is designed where users can unlock new fins, colors, and accessories (or even catch "wild sea-life") as they maintain their streaks
01
72 Hours
From concept to high-fidelity prototype
Honorable Mention
Judge's Critique
"The panel specifically highlighted the "human touch" of the interface as a key differentiator. In a sea of standard Material Design apps, Ripple stood out because the hand-drawn aesthetic made the product feel friendly rather than utility-driven"
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 82 82" xmlns="http://www.w3.org/2000/svg"><path d="M 47.04 0 L 1.96 0 C 0.878 0 0 0.878 0 1.96 L 0 47.04 C 0 48.122 0.878 49 1.96 49 L 47.04 49 C 48.122 49 49 48.122 49 47.04 L 49 1.96 C 49 0.878 48.122 0 47.04 0 Z M 14.535 41.756 L 7.264 41.756 L 7.264 18.369 L 14.535 18.369 Z M 10.898 15.17 C 8.57 15.17 6.684 13.284 6.684 10.956 C 6.684 8.629 8.57 6.742 10.898 6.742 C 13.225 6.742 15.112 8.629 15.112 10.956 C 15.112 13.284 13.225 15.17 10.898 15.17 Z M 41.748 41.756 L 34.484 41.756 L 34.484 30.38 C 34.484 27.667 34.437 24.182 30.705 24.182 C 26.926 24.182 26.346 27.134 26.346 30.184 L 26.346 41.756 L 19.09 41.756 L 19.09 18.369 L 26.06 18.369 L 26.06 21.568 L 26.158 21.568 C 27.126 19.725 29.498 17.785 33.038 17.785 C 40.4 17.785 41.756 22.63 41.756 28.93 L 41.756 41.756 Z" fill="rgb(0, 0, 0)" height="49px" id="LIGo47a1Z" transform="translate(17 17)" width="49px"/></svg>)