Original icon's white background looked a bit jarring among other apps' icons, and the colors weren’t as eye-catching as I would’ve liked. I thought a health app should have a healthier-looking mango, so I made a new icon in Illustrator.
I tried picking a color that looked more natural against the home screen and redrew the mango to look fresher. Honestly, the biggest challenge here was making sure it looked like a mango and not a bean-shaped orange.
I incorporated a more engaging loading animation into the central mango image, with the mango filling up as the app loads. I built the screen in a similar style to the app icon, with a lot of bright colors and soft gradients.
Original loading screen
Menu and dashboard
When I first started using Mango Health, I felt that the user controls were decentralized and could be streamlined.
Its illustrations implied that the app wanted a cheerful design style, which I thought could be reflected better in the dashboard's design and color scheme.
I decided to make changes to both the options menu and the dashboard:
Consolidated action buttons into a single menu fragment, accessible by left swipe from dashboard
Replaced Inbox icon with a non-offensive "unread" bubble
Reordered actions by utility
Changed functions on dashboard
Replaced “My Schedule” (displays full day) with “Coming Up” (displays next medication only; expands on click)
Added countdown until next medication time
Replaced point system with mango slices system to seem more unique/game-like
Replaced “My Health” with “Check In” to encourage action; moved card up for accessibility
Simplified streak card (expands on click)
Added a greeting popup. Good morning!
Modified design style
Simplified logo in header; made text lighten on scroll to prevent distraction from main dashboard graphics