Philips Design System

As Philips is moving towards a future-proof, solution-based company this meant a change to processes and models of work that support design and development at scale. A living resource of principles, guidelines, best practices and toolkits to help Philips design and build consistent, scalable yet flexible propositions across the health continuum was created.

Watch Video

Background

Philips makes point solutions in their product development with no reuse
Philips struggles to harmonise the customer experience across products
Philips struggle to implement new technologies
Philips operate with siloed businesses and these separate teams do not communicate

The challenge

Philips had a half implemented Design System called "Experience Identity" which was not compatible with new technology. This forced businesses to each create their own.
All Philips software utilises different designs, UX, UI and creates confusing experiences for the end users of the software.

Project details

Role: Creative Lead
Team: 20
Budget: 2M

Timeframe:
- Alpha: 3 Months
- Beta: 6 months
- 1st Release: 9 Months
- Full Release: 18 Months

00. Design principles

It was identified early on that to be able to create harmonisation on a scale the size of Philips meant having strong and actionable design principles to hand the design language on. Working with brand and Senior Stakeholders the team rolled the following principles out to the entire company.

Radical Empathy

We put ourselves in our user’s shoes to truly understand their needs.

Holistic Care

Big picture thinking delivers seamless user experiences and responsible business solutions.

Humanizing Tech

We bridge the gap between human interaction and cutting-edge tech.

01. Discover

Understanding where you start from, what you can reuse, what users you have and how much complexity you have is key to starting any project correctly. Auditing, mapping and communicating are important steps when in this stage.

Design
Audit

Understanding Complex Users

Map Module Commonality

dDLS video

We must design for experiences happening in a context of ecosystems of connected products, services and users that continuously grow and evolve.

Designing a solution is not just about designing beyond individual touchpoints and their connections to immediate other touchpoints; above all it is about understanding how that moment will affect the overall care journey and experience for this user or customer and actively designing for that.

02. Define

Starting work with the team meant organising ourselves with roadmaps, and a way to measure our ability to execute with burn down charts. Instead of working on individual elements in isolation we worked on whole modules and built the design system with the elements needed while delivering experiences to be implemented by the different Software Teams. Communication was a core part of getting our first adoptor and our roll out strategy.

Lead the execution
with vision & metrics

Build teams
around modules

Communicate dDLS value to stakeholders

03. Develop

Sketch toolkit

The dDLS Sketch kit is a collection of Sketch assets that can be used for designing digital interfaces in Sketch. The building blocks inside this kit follow all dDLS guidelines as close as possible within Sketch technical limitations.

All symbols are nested across three main levels: foundation, elements and components

Supports theming and multiple densities

Repositories

A collection of guidelines, standards and best practices based on brand, UX, visual design and design technology.. A single repository of UI elements, components, design tools and resources. A partnership with technology and business. A platform of implementation-based UI patterns.

Guidelines

dDLS created a set of guidelines as the recommendations or rules that define how components, patterns, and interactions should be used to create a consistent and cohesive user experience. Guidelines help designers and developers understand how to use the various design elements in the system and ensure that the resulting designs are aligned with the Philips brand and design principles.

Specifications

Specifications are dDLS set of detailed instructions or blueprints that describe how to build and implement the components, patterns, and interactions defined in the system. Specifications were often used by developers to ensure that the designs are built accurately and consistently, and they may include things like measurements, code snippets, and technical requirements.

Software design

dDLS was then usedd in designing software for medical professionals. This required prioritizing patient safety and privacy while addressing the needs of medical professionals. The software should be easy to use and integrate with existing systems, accurate, reliable, and validated through testing. Involving medical professionals in the design process is crucial for meeting high standards of quality and safety.

Adoption reporting

The federation partners of the clusters measure and align with Software Architects, Innovation Leads, Portfolio Managers and Cluster Design Business Partners on the status of the digital Portfolio of their cluster. Teaming up as Design business Partner, Design Business lead, UX Designer or Experience Lead with your federation partner strengthens measuring and data collection from your cluster. Outcome is reported back to ExCo.

The dDLS toolkit in action with Performance Bridge

To build a differentiated, authentic and ownable design language we looked for the right signature to inspire and inform our team. The Philips design language is based on the principles and properties of light – respectful of our heritage in both healthcare and lighting while embracing our ongoing commitment to innovation. This signature is already expressed in our brand through gradients and other elements and will be further defined in our product experience and other touchpoints.

05. Deliver | Reusability

To give an impression of the product workflows that were designed, I picked these three as an example.

Worklist

The worklist flow gives users access to patient records, exams, studies, and other types of information. It behaves like a home page, in that it is the starting point in their workflows (after logging in). It helps them organize and prioritize their work through filtering, creating customized worklists, etc.

Worklist | Design Details

Proritization and grouping

Decreasing cognitive load by grouping cases by priority emphasized by signal colors. Allows physicians to give care to patients when needed.

Create a custom worklist

Simple intuitive way to build custom worklists that fit the specific workflow of users. User feel more in control of organizing their own work.

Multiple list navigation

Tabular navigation allows user to always maintain an overview at all times, while separating work in different lists for increased focus.

Patient dashboard

The ‘patient dashboard’ lays out a comprehensive overview of patient information designed for the needs of a user performing a clinical workflow. It includes clinical and operational data for users to get a better understanding of a patient situation, past history, current status and planned care.

Patient dashboard | Design Details

Generic VS specific data

Card layout in combination with a specific grid allows user to create customizable views that are tailored to a clinical context and give the ability to emphasize specific information.

Adaptive data visuals

Easily scannable data visualization

is designed it such a way that it can be used for a wide variety of clinical data.

Displaying trend info

List items contain sparklines which indicate if a measurement is in or out of range. In addition to this, the user can also select multiple parameters at

once and see them all trending.

Viewing

The viewing flow gives highly specialized tools to users that need to view and interpret diagnostic images. It allows them to measure, manipulate, and compare images. Algorithms are used to help users complete their work faster and more accurately.

Viewing | Design details

Patient timeline

Visual representation of the patient timeline that highlights relevant exams and images is a fast way for radiologists to understand the full patient history.

Flower menu

Built-in intelligence understands the anatomical context and thus what the radiologist is looking at on the screen. It then automatically suggests the right tool sets (such as tools for easy measurement and analysis of vessels).

Consistency in tools

Having consistent interaction and behavior of the of tools that are used in multiple viewers.

05. Deliver | Products

Philips has a variety of healthcare solutions that give medical professionals & individuals the tools they need to make diagnostic and treatment decisions. As a team we addressed specific workflow needs of multiple users across a complex and evolving ecosystem. My design team identified shared user needs and engineering requirements across the portfolio, and consequently developed a modular approach in our work.

Performance Bridge

A web-based platform that provides a number of applications for a variety of use cases to help radiology admins improve quality and efficiency in the radiology departments.

Philips IntraSight

an interventional applications platform to seamlessly integrate intravascular imaging and physiology applications for image-guided procedures.

Philips Lumea Prestige

An innovative at-home IPL (Intense Pulsed Light) hair removal device. It has been developed to suit the differing shapes, curves and skin tones of women around the world.

06. Impact

Before & After dDLS

Consistent across applications

Functions are located and behave in similar manner, e.g. navigation
Common information presented in consistent format, e.g. patient list
Shared basic interaction architecture makes applications familiar and easy experience for users.

Flexible
yet powerful

Designs adapts to different environments, context of use and audiences, e.g. dark environments, data-intensive, etc.
Testing happens on all features and content to improve understanding and ease of use.
Reusability is a priority in creation

Based on best practice

Based on Experience Identity (the previous design language of Philips) components to ease migration and improve usability: e.g. button behavior, error handling
Patterns drawn from industry best practices, e.g. search, navigation

Increased Sales & Revenue

Increased sales revenues
(2019-2020) by 18%.

Reduced training
time & error rates

72% succeed on their 1st task, without help and training
Percentage decrease on time for each additional task
12% reduction in user error.

Time on Task Reduction

Time on task reduction was 21%
From 4 mins to 3min 6s for small tasks