Health Tracker - Mobile - Dashboard
Health is intricately tied to the balance of 🤸 exercise, 😴 sleep, and 🍔 food, a fact well-recognized through research.
📃 Utilizing a Typeform form, participants' profiles, habits, and features preferences were discerned. The comprehensive results are elaborated upon in the "Survey" page.
🎯 Among the highlighted features, the triad of exercise, sleep, and food emerged as the most favored, thus being the focus on the dashboard. Additionally, 💧 hydration was included due to its significant impact on health.
🤳 Opting for the mobile platform was a deliberate choice, recognizing its prevalence as the primary tool for exercise tracking and data recording, especially with the integration potential for wearable devices like smartbands.
🎨 The choice of orange as the primary color was motivated by its capacity to inspire action, while purple was selected to symbolize tranquil elements such as sleep and hydration.
🔥 The first card displays an engaging message and illustration, accompanied by icons representing objectives. As these objectives are achieved, they become highlighted.
🏃 The goals cards feature the current value and the target for quick comparison, along with histograms and completion bars. Below, you'll find the date of the last recorded entry and a button to add new entries.
👀 Weight and menstrual cycle cards are in a dedicated section called "To keep an eye" where cards referring to vital signs could also be added, recognizing their critical importance despite receiving fewer votes.
I hope you enjoy!
Reviews
10 reviews
The presentation and explanation of your design work was great, I really liked the research you put into it.
This dashboard presents data in a clear, simple way, and it is visually pleasing. The palette is nice (and works well with the big flame emoji, it'd be interesting to see a treatment with a less successful summary 🙂)
Some feedbacks I can offer:
- I'd drop the "health tracker" title, I guess by the time the user reaches this screen they know what they opened
- I'd work a bit on improving the contrast of some elements (the unattained goal icon on the hero card, the grey small goal figures on cards
- I'd try another treatment for the bottom tab inactive states (they feel too inactive - disabled actually - to me)
Thanks for sharing! 🙌
Hey, Maylana! Awesome work! I love how you utilized space to incorporate so many exciting metrics.
I agree with Aitor's suggestions, and here are a couple of thoughts on the hero section:
1. The header could be a bit smaller. I think you can say the "X, you're on fire!" message without taking up so much space. There’s a little hierarchy issue with the text relating to the rest of the screen.
2. The icons might not clearly show daily achievements, so maybe exploring some other options could help. It took a bit of time for me to understand what they meant.
Overall, I really liked it and see a lot of potential for future work on this project!
Your design has fulfilled the design brief requirements very well. "One of the objectives of your platform is to enable users to track their progress and monitor their well-being. With numerous parameters to consider, users can easily become overwhelmed. Conduct research to determine which data is most important and design a dashboard that effectively reflects it."
I love you have explained your design decisions well based on research. Good user-centered design.
The UI you curate look logical, symmetric with pleasant color schemes and hierachy.
A couple of things to consider:
- Color contrasts: the unreached target icon, non-selected tabs on the bottom
- what does it mean by "12/4" in the left bottom of each card, how does this number relate with identical infographics in each card?
Overall, your health tracker design is super!
This health tracking dashboard is truly remarkable, offering a perfect blend of aesthetics and functionality. From the very first glance, it feels modern, professional, and extremely user-friendly. The design is clean and well-structured, ensuring that every element has a purpose and adds value to the user experience. The way different health metrics are presented makes it incredibly easy to track progress without feeling overwhelmed by too much data.
One of the standout aspects of this design is its simplicity. It avoids unnecessary clutter while still providing all the essential information at a glance. The use of soft, subtle colors enhances readability, while the well-defined sections ensure that users can quickly access the data they need. The choice of fonts, spacing, and icons all contribute to an interface that feels intuitive and seamless. Everything is placed exactly where it should be, making it easy to navigate.
The workout tracking feature is impressive, clearly showing calories burned and progress over time. The graphical representation of workouts makes it visually engaging, keeping users motivated to stay active. The sleep tracking section is another highlight, displaying sleep duration in a way that’s both informative and easy to interpret. The progress bars make tracking improvements straightforward, which is a crucial factor for maintaining a healthy routine.
Calorie tracking is presented in a simple yet effective manner. Instead of overwhelming users with too many numbers, it keeps things clear and digestible. The balance between consumed and target calories is displayed neatly, making it easier for users to adjust their diet accordingly. This kind of clarity ensures that users can make informed decisions about their health without feeling lost in complex data.
Another great feature is weight tracking, which uses a line graph to show changes over time. This is an excellent addition because it allows users to visualize their progress instead of just seeing static numbers. Seeing fluctuations in weight helps users understand trends and adjust their fitness routines accordingly.
One of the most thoughtful additions is the menstrual cycle tracker. Not every health app includes this feature, and its inclusion makes the dashboard more inclusive and useful for a wider audience. The simple yet effective visual representation makes tracking easy, helping users plan and monitor their cycle without hassle.
The motivational message at the top is a great touch, adding a personal feel to the app. A message like "You're on fire! 🔥" not only makes the experience more engaging but also helps in keeping users motivated to continue their fitness journey. Small details like this make a big difference in user experience.
The navigation system is also well-designed, with icons that clearly represent different sections of the app. The home, explore, and device icons at the bottom add to the ease of use, making it simple to switch between sections without confusion. The consistency in design across different parts of the dashboard ensures a smooth experience.
Responsiveness is another major win for this design. Whether viewed on a phone or tablet, the layout adapts beautifully without losing clarity. The interface remains functional and visually appealing across different screen sizes, which is crucial for modern health-tracking apps.
Overall, this dashboard design is an outstanding example of how to combine usability, aesthetics, and functionality seamlessly. It is visually appealing, highly practical, and designed with the user in mind. Every detail, from typography to layout, has been carefully considered to enhance the overall experience. This is the kind of design that makes health tracking enjoyable and efficient
. Brilliant work!
Maylana, I love how organized and clean your project is. The tracker is to the point, and very visual. Nicely done :)
Awesome UI. I just loved it
This design is well-rounded, focusing on essential health factors like exercise, sleep, food, and hydration. The mobile-first approach and wearable integration are practical choices, and the use of color effectively balances action and calm. While the design is functional and user-friendly, there’s room for a bit more creativity or innovation to make it truly stand out. A solid foundation with potential for further refinement.
Very clean design. Good Work!
Nice structured approach, with clear headings and subheadings, would make it easier for users to find the information they need on your dashboard.
You might also like
Checkout Flow for Shoe E-Commerce Platform
Homepage Dark Mode
Finovo - FinTech Mobile Application
Café website landing page
Settings Design | Finance
MindfullNest Workshop
Visual Design Courses
UX Design Foundations
Introduction to Figma
Design Terminology
