My HNG12 Journey & Sonder Wellness App Design
Redefining Habit Tracking with a Minimalist & Engaging Design
Table of contents
No headings in the article.
Giving HNG12 Another Shot!
Last year, I joined the HNG internship to sharpen my product design skills, but I couldn’t complete the program due to other commitments. This year, I’m back—more prepared, more determined, and ready to finish strong!
HNG12 is an opportunity to grow as a designer, collaborate with other creatives, and challenge myself in a fast-paced learning environment.
Sonder Wellness App – My Stage 0 Task!
For my first task in HNG12, I designed key screens for Sonder, a wellness app that helps users track and maintain healthy habits.
Project Overview
Sonder is a habit-tracking and wellness app designed to help users:
✅ Set and track daily habits.
✅ Monitor progress over time.
✅ Stay motivated with streaks and insights.
✅ Build a healthier lifestyle through personalized recommendations.
Design Challenge
The challenge was to use an achromatic color palette (black, white, and grayscale) while maintaining a visually engaging and functional interface.
- Home Screen – The Wellness Hub
The home screen serves as the central dashboard where users can:
✔ View a motivational greeting and progress tracker.
✔ Browse different habit categories (Exercise, Journaling, Cycling, Meditation, etc.).
✔ Track their daily habits with a checklist format.
✔ Quickly navigate with a bottom menu for Home, Search, Insights, and Profile.
Design Thinking
I focused on simplicity and usability, ensuring that users can easily view their progress, stay on track, and build consistency.
- Habit Tracker – Progress & Streaks
This screen allows users to:
✔ Track habits daily, weekly, or monthly using a calendar view.
✔ Monitor streaks and habit completion rates.
✔ View progress summaries with analytics.
✔ Share and edit progress for accountability and flexibility.
Design Decisions
Given the achromatic color scheme, I used:
Clear hierarchy and spacing to maintain readability.
Bold typography to highlight key stats.
Minimalist UI elements to reduce clutter and improve focus.
Final Design & Figma File
Here’s a preview of the design:
Check out the full Figma design here: [figma.com/design/YmjIqv9Q9Gljdwp4GGr7PR/Son..
Join the HNG12 Experience!
If you're passionate about tech, UI/UX, or software development, HNG12 is a great way to learn, grow, and build real-world projects.
Let’s Connect!
Follow my journey and design work on:
Dribble: dribbble.com/Bewaji_Seun
Behance: behance.net/onishololuwase