PATIENT OUTCOMES
AND DESIGN SYSTEMS
AND DESIGN SYSTEMS
Telstra health
Design systems
UI Design
Role
A new design system needed to be built. To provide for a number of Telstra Health products that were in the process of updating their medical platforms and apps. While sunsetting previous apps and systems. These were based in operations from Western Australia, Sydney and a number of locations across Melbourne.
Some of the apps inside the product suite include:
Communicare, Enterprise Provider Directory, My Care Manager, Patient Records, FRED IT Group (Pharmacy Solutions and electronic scripts) and ADCC
The demand for consistent, accurate displays of critical patient and medical information was paramount - The catalyst behind creating a Telstra Health design system and ensuring clinical best practise and inclusive design. As this was being built, product teams laid the frameworks to plug-into the new design system.
Audits:
• Foundation elements - colours, typography, grids, spacing
• Components - formats, existing assets, required new components
• Design process - efficiencies, troubleshooting, handover processes
Some of the apps inside the product suite include:
Communicare, Enterprise Provider Directory, My Care Manager, Patient Records, FRED IT Group (Pharmacy Solutions and electronic scripts) and ADCC
The demand for consistent, accurate displays of critical patient and medical information was paramount - The catalyst behind creating a Telstra Health design system and ensuring clinical best practise and inclusive design. As this was being built, product teams laid the frameworks to plug-into the new design system.
Audits:
• Foundation elements - colours, typography, grids, spacing
• Components - formats, existing assets, required new components
• Design process - efficiencies, troubleshooting, handover processes
Responsibilities
Design systems, UI, engaging with clinical best practise, accessibility guidelines, interaction and responsive design.
The importance of clinical best practise
There was a strong requirement for certain interfaces to be displayed in recommended formats to eliminate any medically associated errors, confusion or inconsistency in regards to patient health. Medical practitioners and patients alike are the end users of this design system. So a robust approach in application, researching best practices and inclusive and accessible design was critical.
As an example - Formats of date fields and form data, required for display in medical software and pharmacy prescriptions.
Which literally may be a matter of life and death for some patients. And the duty of care for medical practitioners is high. Creating medication details, important dates for health appointments are just some of the many high frequency scenarios.
As an example - Formats of date fields and form data, required for display in medical software and pharmacy prescriptions.
Which literally may be a matter of life and death for some patients. And the duty of care for medical practitioners is high. Creating medication details, important dates for health appointments are just some of the many high frequency scenarios.
BUILDING FROM SCRATCH
Taking into account clinical best practise, and communication across teams - A website resource or hub was decided to connect design, development and stakeholders together.
A vision for how the design system operates is shown below. Along with an audit and refresh on the foundation elements, such as colour and type - which was optimised to meet better accessibility and colour harmony.
A vision for how the design system operates is shown below. Along with an audit and refresh on the foundation elements, such as colour and type - which was optimised to meet better accessibility and colour harmony.
Documentation website design - Used as a one stop shop for all product stakeholders
Featuring component documentation for designers and developers
Providing an interactive playground and code snippet library for developers
FOUNDATIONS
Basic materials - Colours, contextual shape and elevation
Colour themes and accessibility updates
Components
Attention to detail
This is where clinical best practise was considered the most. It determined the outcome, formatting and appearance of basically everything. While also taking into account WCAG standards.
Dedicated clinical safety experts were key figures in facilitating informed decisions, on both design and display of certain UI elements.
Perhaps one of the most important elements was the patient detail card. Which required contextual display of information based on:
- The type of product being used
- Clinician type
- Treatment type
- And where inside the interface it was displayed
- Display type
For example:
- My Care Manager software
- Used by a specialist clinician
- For elderly patients being treated for kidney dialysis, in hospital
- Referencing patient details on the "In / Out Patient Dashboard" section
- Viewing all patient details in the expanded view
Dedicated clinical safety experts were key figures in facilitating informed decisions, on both design and display of certain UI elements.
Perhaps one of the most important elements was the patient detail card. Which required contextual display of information based on:
- The type of product being used
- Clinician type
- Treatment type
- And where inside the interface it was displayed
- Display type
For example:
- My Care Manager software
- Used by a specialist clinician
- For elderly patients being treated for kidney dialysis, in hospital
- Referencing patient details on the "In / Out Patient Dashboard" section
- Viewing all patient details in the expanded view
COMPONENT AND DOCUMENTATION PREVIEWS
From left to right shows
• Date pickers - an important component in the project. Considering how date formats and usability is handled
• Cards and tiles - establishing contextual types of banners in care management dashboard and medical detail tiles
• Creating thorough design guidance for other UI designers and development teams. For example - using minimalist, borderless design that leaves less clutter and creates more focus on important elements and interactions.
• Date pickers - an important component in the project. Considering how date formats and usability is handled
• Cards and tiles - establishing contextual types of banners in care management dashboard and medical detail tiles
• Creating thorough design guidance for other UI designers and development teams. For example - using minimalist, borderless design that leaves less clutter and creates more focus on important elements and interactions.
Date pickers and calendar options
Cards and tiles used inside the My Care Manager App
Creating design guidance for consistency
