Health readings and everyday commitments compete for attention on the same screen. For HealthHub, I designed a personal overview that preserves numerical context and reorders its mobile layout around the day ahead.
Explore the screensThe dashboard combines readings with daily commitments. Four cards show health values and trends, weekly activity adds perspective, and the calendar identifies a selected date. Medication and consultations use distinct cards.
Desktop accommodates activity beside the calendar. A phone makes this composition sequential, so block order determines which question comes first. Prioritising the calendar is a design hypothesis that needs user testing.
Mobile reading order: four health indicators
Selected date and calendar context
Medication and consultation cards
Weekly activity for comparison
A large value without its unit or direction of change leaves the reader to reconstruct its meaning.
Each of the four health cards combines a value, unit and trend. The weekly activity chart includes an average line as a visible reference for individual days.
A trend or average cannot explain why a reading changed. The overview does not provide grounds for a medical conclusion.
Simply stacking the desktop layout would place the calendar after activity and delay access to the selected day’s context.
Desktop places activity beside the calendar below the metrics. Mobile uses a 2 × 2 metric grid, moves the calendar before activity and introduces bottom navigation.
The weekly overview sits further down the phone page. People primarily checking activity may need more scrolling, which future testing should examine.
Medication and a consultation call for different interpretations; identical event cards would obscure that distinction.
Separate card types distinguish medication from consultations. A selected state in the calendar provides a visible date reference while reviewing the page.
Selecting a date only changes its highlight in the demo. Updating events and handling dates without events remain implementation tasks.
The palette and principles represented in the prototype. A full component specification is not yet part of this case.
Pink #F5C9F3, green #179A55, yellow #FFE985 and blue #416DE2 distinguish blocks. Labels carry the meaning of health information.
#F5C9F3#179A55#FFE985#416DE2Name, value, unit and trend retain their roles across layouts, preserving the elements needed to interpret each number.
The same blocks take different arrangements. Mobile prioritises the calendar while retaining the weekly perspective further down.
Read-only HTML previews of the original Russian-language prototypes. Demo data; personal identifiers replaced.
The responsive dashboard includes four indicators, weekly activity with an average, a calendar and differentiated event cards. Its mobile layout implements a different order for the calendar and activity blocks.
In a future test, identify a reading’s value, unit and trend direction.
Record unit errors, misread trends and cases where the average is mistaken for a personal normal range.
Find medication and a consultation on mobile, then locate the weekly overview.
Observe search order, scrolling, backtracking and errors distinguishing event types.
After connecting event data, select a date and explain which commitments belong to it.
Check date-to-card correspondence and understanding of an empty day without moderator prompts.
The current rental comes first