DiaBetrics is a desktop dashboard concept designed to support people living with type 2 diabetes—or those at risk of developing it—in keeping track of their health. The dashboard helps users visualise changes in key health metrics over time, with focus on clarity and accessibility.
Designed for desktop use only (1920×1080 resolution), it makes it easier for users to monitor habits and stay engaged with their long-term goals.
DiaBetrics
Project information
-
Health
-
3 members from our study group
-
UX-design, interaction design
-
1 week
-
Webapplication Dashboard
The Challenge
Our task was to design a responsive web dashboard that makes health data easier to interpret and manage. The aim was not to create another mobile app, but rather a wider-screen solution where the relationships between health metrics could be more clearly visualised.
Our goal was to make the dashboard:
Easy to navigate, even when multiple types of data are present
Simple to read and understand without needing medical knowledge
Encouraging and visually clear, using meaningful comparisons and calm visual design
The user should be able to:
View and compare blood pressure, glucose levels, waist circumference and sleep
Understand calorie intake and macronutrient breakdown
Track these values over time (e.g. week-to-week, month-to-month)
Photo: Inspiration and Moodboard
Empathising with the user
We began by sketching dashboard layouts and analysing other apps and platforms—both health-specific and more general. We looked at dashboards for finance, fitness, and data analytics to explore what makes a graph layout feel clear, trustworthy, and engaging.
We also analysed direct competitors like mySugr and DiabetesConnect, and noticed a few key issues we wanted to improve on:
Overuse of raw numbers without visual explanation.
Confusing layout and inconsistent use of labels.
Cluttered or overly flat design that made it hard to focus on trends.
These insights helped guide the visual tone, chart choices, and overall structure of the dashboard. We decided early on to keep each panel focused on a single data story, using calm visual design and a soft dark UI theme.
That meant:
Using colour only where it supported understanding
Highlighting differences over time, not just current status
Avoiding excessive decoration or unnecessary chart types
Photo: IA diagram
Ideating our solution
The layout we chose to work with follows a familiar card-based structure with five panels, one for each metric. The cards are aligned in a simple F-shaped layout, optimised for scanning on a wide desktop screen.
We included a small header area with navigation and introductory text. Just below that, we added a notification bar to give users encouraging feedback and contextual updates. This subtle feature was meant to support motivation and make the experience feel more human and supportive.
Each chart panel is clearly labelled, colour-coded, and spaced for ease of reading. We also defined the visual style early on: a semi-dark theme with gentle contrast and blue as the main action colour. Each card uses visual hierarchy and consistent chart logic to help users see patterns over time.
Photo: Iterative sketches
Prototyping our solution
We designed a high-fidelity desktop dashboard in Figma, structured around a calm and spacious layout optimised for 1920×1080 screens:
Header and Navigation
A clean header with simple navigation links and a calm hero section that introduces the dashboard’s purpose.
Status Notification
Just beneath the header, we added a notification bar that delivers friendly updates based on the user’s recent data. This gives the user instant feedback and supports motivation before diving into more detailed stats.
Waist Circumference
A line chart showing the user’s waist measurement over the past six months, compared to a target of under 94 cm.
Sleep Overview
A bar chart comparing average sleep hours per day for the current and previous month. Days of the week are labelled to show patterns at a glance.
Blood Pressure
A line graph displaying systolic and diastolic readings over time, alongside a visual baseline of the healthy range (120/80 mmHg). This helps users quickly understand whether they’re within target.
Blood Glucose
Side-by-side weekly graphs allow users to compare this week’s glucose levels with the previous week.
Calories and Macronutrients
A bar chart displaying total weekly kilocalorie intake, broken down by macronutrients (carbohydrates, fats, proteins in grams). The breakdown is colour-coded and easily digestible at a glance.
All panels were designed to balance calmness with clarity, using structured spacing, soft colour accents and visual hierarchy to highlight what’s most important—without overwhelming the user.
Photo: ...
Photo: ...
Concluding the project
This dashboard was designed to give users a broader perspective on their health — a place to see trends and progress over time. While diabetes is a condition often managed hour-to-hour via mobile apps and connected devices, those interfaces aren’t ideal for visualising multiple metrics in context. A larger screen makes it possible to display patterns and correlations more clearly.
We quickly discovered how important accessibility is in this context. Diabetes can affect vision, concentration, motor skills and energy levels, so the interface needed to reduce friction and support clear understanding. The layout, graph hierarchy and use of colour were shaped by these needs.
Prototyping the charts challenged our technical skills. We explored multiple plugins and solutions, and used the process to better understand how to create visual hierarchy and accessible data design. The notification bar emerged as a natural way to surface relevant changes and prioritise attention.
Even with a limited scope, we made intentional design choices that balance emotional tone, medical clarity and usability — a small step toward more empowering tools for people living with chronic conditions.
If we were to take the project further, we’d focus on real-world testing with diabetics and healthcare professionals — not only to validate the flow and content, but to fine-tune the tone, explore how customisation might support individual needs, and develop real-time feedback mechanisms between user and doctor. The page currently meets WCAG AAA standards, but we’d also like to build on this foundation by improving states, controls and interactions for more accessible and responsive use.
Featured Work
Current Case Study
PhysioFix
DiaBetrics
DiaBetrics is a dashboard concept designed to support people living with type 2 diabetes, or those at risk of developing it, in keeping track of their health. The dashboard helps users visualise changes in key health metrics over time, with focus on clarity and accessibility.
Visoid
Visoid is an AI-driven cloud rendering platform made for architects and visualisation professionals. The tool allows users to generate high-quality architectural images through text prompts, without the need for heavy local rendering setups.