Medication Information & Navigation - MyCare

Reworking medication information within the NHS Scotland portal to improve clarity and scanability, particularly on mobile. This case study focuses on intent-led navigation, data-heavy UI design, and embedding clinical safety into decisions while laying foundations for future data improvements.

Overview

This case study focuses on reworking the medication information pages within the MyCare service to improve clarity, scanability, and usefulness—particularly on mobile devices.

Unlike earlier phases of the programme, this work began with a longer delivery timeframe and the opportunity to plan approach and priorities upfront. This allowed for a more considered assessment of existing user research, UI patterns, and data constraints before moving into design.

My role focused on improving how patients browse and understand their medications, exploring navigation models better suited to personal health data, and initiating conversations about how medication data could evolve over time through user feedback and incremental enrichment.

Problem Statement

Medication information within the service was split across two separate areas: one for repeat medications and one for single or past medications. While clinically meaningful, this structure was system-led and did not always align with how patients thought about their medications.

Patients accessing medication information often had simple, intent-driven needs—such as checking what they are currently taking, reviewing previous medications, or understanding changes over time. Requiring them to choose between medication types upfront added unnecessary cognitive effort, particularly on mobile devices.

In addition, the presentation of medication information was dense and difficult to scan, making it harder for patients to quickly find reassurance or confirm details. The challenge was to improve comprehension and navigation without introducing clinical risk, while respecting the existing data model and delivery constraints.

Constraints

This phase of work began with a longer delivery window, allowing time to plan approach and priorities before moving into design. However, partway through delivery, timelines were reduced and scope was adjusted.

This required prioritising changes that could deliver meaningful improvements to clarity and usability without introducing risk late in the delivery cycle. Some concepts informed by user research were explored at low fidelity to shape direction and align stakeholders, but were not progressed into delivery when priorities changed.

Clinical safety was a core constraint throughout the work. Any changes to structure, hierarchy, or surfaced data needed to be carefully assessed to avoid misinterpretation or unintended risk when presenting medication information to patients.

These constraints created an opportunity to focus on improving how patients access and understand medication information, balancing usability improvements with clinical safety, data limitations, and delivery scope.

Key Design Decision: Intent-Led Navigation for Medication Access

Intent-led entry point translating system-defined medication types into user-friendly choices.

Decision

I introduced an intent-led navigation step for medication access, supported by simple sorting controls. Users land on Prescriptions, choose what they want to view—All medications, Repeat medications, or Single medications—and can then sort the list by date prescribed or alphabetically.

Why

Previously, medication information was split across separate areas based on repeat and single prescriptions. While this reflected the underlying data model, it did not consistently match how patients approached the task. People often arrive with a simple question—“What am I taking?” or “Show me everything”—and the interface should support that without requiring prior understanding of medication categories.

Once in a list, patients also needed quick ways to orient themselves. Some wanted to see the most recently prescribed medications first, while others preferred an alphabetical view to quickly locate a known item. Without sorting, lists became harder to scan as medication histories grew.

On mobile, this combination of system-led structure and unsorted lists increased navigation effort and cognitive load when reviewing personal health information.

What I Optimised For

Reducing cognitive load when accessing medication information
Supporting common patient intents (view all vs view a subset)
Enabling quick orientation within longer medication lists
Keeping controls simple and predictable on mobile
Respecting the existing data model while improving usability

How It Worked

The updated flow introduced a clear, layered structure:

Prescriptions landing page as the entry point
A plain-language selection screen offering:
- Show all medications
- Show repeat medications
- Show single medications
A medication list with lightweight sorting options:
- Most recent first (date prescribed)
- A–Z (alphabetical)

This translated the underlying data structure into user-friendly choices while allowing patients to organise information in a way that matched their mental model.

Trade-offs

Introducing an intent-led selection step and sorting controls added a small amount of interaction complexity. This was an intentional trade-off: clearer entry points and predictable list ordering reduced confusion, improved scanability, and supported both first-time and repeat use—particularly on mobile.

The action-based entry point was also future-facing. It provides a flexible foundation for introducing additional actions—such as ordering repeat prescriptions—incrementally when they become technically and clinically feasible, without requiring a fundamental redesign of the navigation model.

Result

Medication access became clearer, more predictable, and easier to scan. By combining intent-led navigation with simple sorting, patients could both reach the right list and quickly orient themselves within it, making the experience better suited to reviewing sensitive personal health information.

Key Design Decision: Improving Medication Scanability (Mobile-First UI)

Card-based layout introducing clearer hierarchy for scanning and comparison on mobile.

Decision

I redesigned the medication list UI to better support data-heavy content, introducing clearer visual hierarchy and separation. This included surfacing additional medication data fields, using a neutral grey page background, white medication cards, and a light blue card header to improve scanability—particularly on mobile.

Why

Medication information differs fundamentally from article-based content. Patients are often scanning, comparing, or revisiting information rather than reading sequentially. Existing article-style layouts made it harder to quickly distinguish individual medications, identify key details, or understand changes over time.

User research and stakeholder feedback highlighted the need for clearer structure, especially as medication histories grew longer. This created an opportunity to improve hierarchy and grouping without altering the underlying data model or introducing clinical risk.

What I Optimised For

Rapid scanning of medication lists on small screens
Clear visual separation between individual medications
Emphasising key data fields without overwhelming the page
Supporting repeat use and comparison over time

How It Worked

The updated UI introduced stronger visual hierarchy:

A neutral grey background to reduce page-level visual noise
White medication cards to clearly separate items
A light blue header to anchor medication names and aid vertical scanning
Select additional data fields surfaced within cards to improve usefulness without increasing risk

This allowed patients to quickly recognise medications and orient themselves within longer lists.

Managing Consistency & Risk

This design intentionally adapted patterns from the Scottish Government design system, which was optimised primarily for article-based content rather than dense, repeatable data. Core foundations—colour palette, typography, spacing, and accessibility standards—were retained, while layout and hierarchy were adjusted to better suit medication data.

This approach was reviewed with stakeholders and agreed as an appropriate adaptation given the difference in content type and user behaviour.

Trade-offs

Introducing card-based layouts and additional data fields increased visual complexity compared to simpler article layouts. This was a deliberate trade-off: clearer separation and hierarchy improved comprehension and scanability without introducing new interaction patterns or accessibility risk.

Result

Medication information became easier to scan, compare, and revisit—particularly on mobile—while remaining consistent with broader ecosystem principles.

Supporting Consideration: Clinical Safety & Data Enablement

Clinical safety was embedded throughout the design process rather than treated as a final validation step. Safety considerations were included in ideation, low-fidelity exploration, and design reviews to ensure changes to structure and hierarchy did not introduce misinterpretation or risk.

Including clinical safety colleagues early enabled broader discussions about medication data. While this release did not increase the total number of data fields shown, the work initiated technical investigation into integrating a national clinical terminology source (SNOMED). This supports untruncated medication names and access to richer, standardised data.

The work also enabled early investigation into separating medication dose and clinician notes, which were previously received as a combined field. Technical exploration began into how these fields could be safely split, validated, and presented in future iterations.

By grounding UI and navigation decisions in clinical safety discussions, the work established a shared understanding of how medication data could evolve incrementally, even where immediate delivery scope remained constrained.

Outcome & Delivery

The redesigned medication experience was delivered and A/B tested against the original implementation, where it was the clear preferred option. The updated navigation and UI performed better in supporting comprehension and scanability, particularly on mobile.

One key learning from testing was how patients want to engage with medication detail on smaller screens. While the revised cards improved clarity, mobile users expressed a preference for progressive disclosure—seeing essential information first, with the option to expand cards to reveal more detail.

This finding did not impact the current release, as no additional medication data fields were introduced at this stage. However, it provided a validated insight for future iterations, reinforcing the importance of balancing information richness with user control as data availability and technical capability evolve.