Health monitoring dashboard displaying trends for blood pressure, glucose levels, daily sleep, nutrition, and waist circumference for a user named Lisa.

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)

Four digital health dashboard screens, displaying medical records, health analytics, patient info, and fitness data, with various charts, graphs, and user profiles.
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

A digital illustration comparing a regular app interface on the left with a hand-drawn sketch of the same app interface on the right. The app monitors health metrics such as waist, sleep, blood pressure, glucose, daily sleep patterns, and calorie count, with graphical data visualizations shown below.
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.

Comparison of a dark-themed user interface sketch on the left with handwritten labels and notes, and a light-themed actual digital health monitoring dashboard on the right displaying notifications, overview, and health metrics for a user named Lisa.
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.

Computer monitor displaying a health monitoring dashboard with charts and graphs for blood pressure, glucose, daily sleep, nutrition, and waist measurements.
Photo: ...
Dashboard interface displaying health data including blood pressure, glucose levels, daily sleep, nutrition, and waist circumference, personalized for user Lisa.
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


Two smartphones displaying a health tracking app with check-in, progress, and daily diary sections against a blue background.

Current Case Study

PhysioFix

Computer monitor displaying a health tracking dashboard with graphs and metrics for blood pressure, glucose, sleep, waist measurements, and nutrition, on a blue background.

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.

Screenshot of a computer interface creating a 3D model of a modern barn with trees in the background, using visualization and prompt library features.

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.