EMR UX Design Yearbook 2016

User Experience Design at Scale Yearbook 2016

User Experience Design at Scale Yearbook 2016

/ 10

The Philips EMR UX Design yearbook 2016 contemplates Tasy’s principles and presents a solid foundation on design practice at Philips. The challenge was to design a complex EMR system while keeping the legacy by combining best practices of design and usability towards a delightful user experience.

User interface evolution Delphi

Philips Tasy EMR is a complete and 100% integrated solution for healthcare management of private and public institutions. It manages efficiently all clinical, administrative, financial and operational activities at the same time it improves the patient healthcare and protection.

With more than 50 modules being constantly updated, Tasy delivers management indicators and reports, helping the decision process and contributing to the institution’s performance decisively.

Business legacy Preserving customer’s features and rules

New Challenges HTML5 technology platform Design Consistency & UX Principles

Java Swing

HTML5

UX Design at Scale

3

Index

UX Foundation

Schematics

Design Methodology

Schematics Structure

Tasy’s Figures & Facts

UX Matrix 2.0

Design Principles

UX Architecture — Tasy moments

Usability Principles User-Centric Approach

6 20

Projects

Components

Showcase

Design Projects Timeline 2016

Basic Elements

Tasy EMR

Colours for Information Display

Containers

Mobile EMR

Iconography

Informational

Keyboard Interaction

Input Controls

TWS — Tasy Web Suit Middle East Hospital, KSA

Responsiveness

Navigational

Communication System — Alerts and Notification Tasy Web Suite (TWS) Mobile Strategy Enterprise Information System (EIS) Onboarding Assistant

30 58 112

UX Foundation 6

Design Methodology

Tasy’s Figures & Facts

Design Principles

Usability Principles

User-Centric Approach

UX Design at Scale

7

UX Foundation

Design Methodology

Discover

Frame

Pre-project

Discover

›

Scope & Plan

Secondary Research

Field Research

Consolidation

Step Back — Visualize

Transfer

• ID UX project scope • ID Project stakeholders • ID Processes, People, Tools • ID Milestones • ID Mandatory deliverables • ID code freeze • ID design freeze

• Internal Research (within biz) • Internal Research (Philips portfolio) • Competitor comparison

• Define Field Research scope • Build/Refine Research tools • Field work • Co-creation

• Turn finding into insights • Requirement structuring

• Quantify design • Visualize Insights • Consider impact of work

• Transfer to the Business • Transfer to the Design Team • Ascertain scope and planning • Requirement priorization

Deliverables

Deliverables

Deliverables

Deliverables:

Deliverables:

Owner: Design PM, Design PO

Owner: Design PO, Design Team

Owner: Design PO, Design Team

Owner: Design PO, Design Team

• Project Plan with detailed activities, events & milestones • DCC/DFIB Project framework

• Model “As is” (flow, journey) • Stakeholder map • Research tools • Requirements

Owner: Design PO, Design Team, Usability Engineer

Must deliver at least 1: • Personas • Augmented “”As is” model • Mandatory Requirements

Not mandatory: • Infographics • Charts • Side deck

Not mandatory: • Findings listing/codification • Main Findings Report

Connect

›

8

discover

build

frame

ideate

Discover

Ideate

Find Insight through exploring new and existing data, immersing yourself in the user and their context and trying out ideas with targeted people at this early stage.

Find solutions and ideas to the challenge using the power of creative thinking. Select the most relevant ideas and express them to create a shared understanding.

Frame

Build

Define the opportunity area or challenge based on the ‘as is’ situation from the ‘discover’ stage using trends and foresight.

Define a better future vs. current.

Make ideas tangible by building a prototype, simulating behaviours or experiences, so the hypotheses can be tested in context with key stakeholders and users.

Ideate

Build ›

Concept — Prototype

Delivery

Ensure

User Testing

Transfer

Developer Delivery

Transfer

Review

• Work on initial concepts • Consider if new components are necessary • Consider Compliance / Acceptance Criteria • Low-to-Medium fidelity prototypes • Information Architecture • CoCreate

• Test mandatory requirements • Re-iterate/Backlog insights

• Transfer to the Business/ Tech • Ascertain scope, planning and deliverables

• High-fi prototype • Specs • Review hand-off materials with tech and delevopment team

• Development consulting • Minor alterations • Helping establish a backlog

• UI Review • Run tests at clients • Periodic review for improvement • Helping establish a backlog

Deliverables

Deliverables

Deliverables

Deliverables (if applicable)

Owner: Design PO, Design Team

Owner: Design PM, Usability Engineer

Owner: Design PO, Design Team

Owner: Design PO, Design Team

• High fidelity compos • Detailed specifications • Assets (in required resolutions or formats) • Functional components

• Award submission • Patent submission • Place final files on server • Project blueprint

• “What if” models • Low-to-medium prototypes • Information Architecture

Rework — Refine

Construct

• Test results • Final re-iteration changes

UX Design at Scale

9

UX Foundation

Tasy’s Figures & Facts

665

94

Modules

Functions in total

266 237 147 15

Clinical Functions

Back Office

34K

Parameters

15K

Screens

OPS (Health Insurance)

Technology

14M

Lines of codes

10

1K+

Clients in Brazil

777 41 54 9 117

Tasy Prestador

Tasy OPS

DCX

IntelliSpace PACS

Multimed

UX Design at Scale

11

1

UX Foundation

Collective Collaboration

Design Principles

Coordinated care requires a variety of specialties and skills from a range of team members. Understanding and part-taking in what is happening in each of the processes implies team members to be in control of their own activities but also understanding their role in the larger picture.

Foster team coordination; send timely and relevant notifications; offer remote access.

4

2

3

Clear Relevance

Easy Flow

Tasy should enable users to quickly grasp what’s happening while highlighting critical details that have the potential to expedite a task or track, compare, and improve the outcome of their patients. It should also enable users to quickly act upon new information and provide the appropriate care or operate more efficiently with less delay and greater certainty.

Highlight relevant information; Real time data; Create summaries & overviews; Enable powerful comparisons/meaningful data clustering.

Tasy should allow the most important elements at any given point to stand out.

Tasy should ensure that similar functions are treated the same way throughout the experience and that information captured in one part of the application should be consistent, giving users a head start and defensively avoid errors before they occur.

Create simple forms; Use Color carefully; Tailor the experience for the role; Make data consistent; Accelerate data capture.

5

Smart Efficiency

Consistent Support

Anticipate user’s need, help them along the way when performing tedious or repetitive tasks and have answers ready when they begin to ask. Tasy should integrate with commonly used peripherals and wearable technology to collect, store, and track data, increasing the accuracy of the information available.

Use fewer steps / Remove redundant task; Integrate with key devices.

Functions and features should behave consistently throughout the system, allowing users to easily learn how to use the system and where to navigate to accomplish their tasks. By creating a common framework with a well organized interaction model, the experience should fit naturally within the user’s expectations, providing closure and celebrating when tasks are completed.

Guide users through the experience; Enforce the rules of the system; Encourage use without being intimidating; Make next steps clearer; Reward users for reaching milestones.

12

Usability Principles Nilsen, J. (1990)

Visibility of system status

1

5

Error prevention

9

Help users recognise diagnose, and recover from errors

2

Match between system and the real world

6

Recognition rather than recall

3

User control and freedom

7

Flexibility and efficiency of use

4

Consistency and standards

8

Aesthetic and minimalist design

10

Help and documentation

UX Design at Scale

13

UX Foundation

+ =

Design Principles

Usability Principles

14

= UX Connecting care and driving clinical informatics excellence through

User Experience Design

UX Design at Scale

15

UX Foundation

User-Centric Approach Understand the needs and provide solutions with delightful experiences

Physician

Nurse

The decisions makers in the patient’s journey. They analyze and diagnose patients, take care of their mental health, request exams and prescribe treatments. Physicians can work in hospitals or act as independent professionals.

Dedicated to maintain and improve patients health.

They work in partnership with other professionals, such as physicians, nutritionists and psychologists and are responsible for the hygiene, feeding, medicine ministration, patients transfer and assistance to physicians.

Auditing Physician ER Physician Forensic Physician Specialist Physician ICU Physician Office Physician Ward Physician Occupational Health Physician Infection Control Physician Surgeon Radiologist

Auditing Nurse Aesthetics or Cosmetic Nursing Nurse Administrator Triage Nurse ER Nurse ICU Nurse OR Nurse Neonatal and Pediatric Nurse Ward Nurse Occupational Health Nurse Infection Control Commission Nurse Quality Assurance Nurse Hematology Nurse Seniors and Adults Nurse

Exams Technician Lab technicians and imaging technicians are responsible for collecting samples and running exams that will later be analyzed by Physicians.

Clinical Toxicology Analysis Technician Clinical Cytology and Pathology Technician Food Science Technician Imaging Exams Technician

Coordinator Responsible for team management, perfomance evaluation, strategic decisions.

Often coordinators are also Physicians, Nurses, Pharmacists and so on.

Coordinators interact with management tools provided by the system.

Hospital Coordinator (ER, ICU, Ward) Medical Director Chief of Surgery Dean of Medicine ER Nurse Coordinator Ward Nurse Coordinator ICU Nurse Coordinator

16

Nutritionist

Pharmacist

Technician

Receptionist

Support

Analyze and prescribe the appropriate diets for each patient considering several information about each clinical case, to supply the patient’s nutritional needs and promote an adequate environment to a faster and healthier recovery.

Manipulates medicine, based on theoretical and practical concepts concerning its functioning, particularities and specifications. They work on several areas of the hospital dispensing medication, inventory, reviewing prescriptions and preparing specific medications.

The technicians supports the hospital staff to execute a wide range of activities, including, but not limited to: maintaining machinery and taking responsible actions on the execution of operations and exams.

Performs various administrative tasks, answers telephones and gives information to the public. They are often the first employee the public or customer has contact with, being responsible for good first impression of the organization, which can affect the costumer’s experience.

Support professionals are essential to the achievement of results that guarantee efficiency and effectiveness of the hospital projects and daily workload.

Clinical Nutritionist Food Industry Nutritionist Sports Nutritionist Community Nutritionist (Public Health) Cook Hebe

Hospital Pharmacist (ER, ICU, Ward, Supply) Magistral Pharmacist Clinical Pharmacologist Infection Control Commission Pharmacist Esthetician or Cosmetologist Advanced Instrumental Analyst

Nursing Technician OR Nursing Technician Instruments OR Nursing Technician Hematology Technician Aesthetics or Cosmetic Technician

ER Receptionist Office Receptionist Exams Receptionist Ward Receptionist OR Receptionist Customer Service Administrative Receptionist

IT Specialist Supply Chain Assistant Pharmacy Assistant (CAF) Maintenance Engineer Security Cleaning Staff Archivist Hospitality Staff Buyers

Billing and Financial Take care of the hospital financial health, setting up and maintaining payment plans, seeking coverage plans or better deals with health insurance companies, monitoring and tracking financial prejudice and opportunities.

Billing assistant Auditing Assistant Accountant Assistant

UX Design at Scale

17

UX Foundation

“The meaning of design has moved beyond form and function to explore new ways of thinking. Design is experimental and user centric at the same time provide solutions that are scalable, effective and delightful. At the convergence between all this we can find meaningful innovations.�

Kleber Puchaski, PhD (RCA) UX Design Director

UX Design at Scale

19

Schematics 20

Productivity Scalability Quality

Schematics Structure

UX Matrix 2.0

UX Architecture — Tasy moments

UX Design at Scale

21

Schematics

38 Types of Regions Composition

Schematics Structure Schematics is a set of templates and guidelines developed to build Tasy’s user interface with productivity and consistency, preserving the application’s business rules.

+

10 Types of Panels Composition

+

200+ Components

It’s composed by basic templates and their variations, navigation patterns, general ux guidelines and components.

22

UX Design at Scale

23

Schematics

What

Who

UX Matrix 2.0

Atomic Design

Schematics

System

System Tasy

Workflow

Moment Navigation Architecture

Business Objects

BO Architecture

Client

Content Design The matrix represents the compilations of all UX elements organised on three main layers; visual, interaction and content.

Business Analysts

Design

Pages

Interaction Design We have used the atomic design as a metaphor to better understand the system structure and how the elements can be organised in a complex system.

Tech

Organisms

Templates

Molecules

Components

Atoms

Basic Elements

Design

Visual Design Design 24

How

Login

Behaviours

ADM Hospitality Supply

Clinical Assistencial SADT

Processes

›

Highlights

How and When a BO should be displayed in a UI

›

Controller Financial Billing

Task Overview

Categories

Guidelines

BO Representation Matrix

Panels

+ Fonts + Animations + Shadows

Input Control

Navigational

›

Archetypes & Personas

System Map

Task Detail

Clusters of data elements displayed according to BO Behaviour

›

Execution

Issues

›

›

Inputs

Compare

Data elements displayed according to BO Behaviour

+ Icons + Colours

Dynamic Content

Special

UX Design at Scale

25

Schematics

UX Architecture — Tasy moments

1

Login

2

Highlights

Luiz Arnoldo Haertel

Meu cadastro O que voccê procura?

Espec: Cardiologista Trocar Estabelecimento Alterar senha Agenda Integrada

Análise dos Parâmetros Assistenciais do Paciente - APAP

CPOE

Digital Intervention Suite DIS

Entrada Única de Pacientes

Ficha Anestésica Eletrônica do Paciente FANEP

Ocupação Hospitalar

Pronto Atendimento

Prontuário Eletrônico do Paciente Operatório PEPO

Prontuário Eletrônico do Paciente - PEP

Quimioterapia

Administração Eletrônica da Prescrição - ADEP

Tasy EMR

Username Password

Sair

WTasy Login Forgot your password?

Philips Clinical Informatics

A commom experience through all workflows are reached reorganising the moments of interaction and how the information works in each one.

Hospital Lorem Ipsum

Build 1234

01 Apr 2016

14:30 (UTC -3:00)

Philips Clinical Informatics

Hospital Lorem Ipsum

DataBase 1234

01 Apr 2016

14:30 (UTC -3:00)

The entire architecture is workflow-based and turns easier reuse same workflows currently duplicated inside different applications.

26

3 4 5 6

Task overview

Task detail

Execution

Inputs

Compare

UX Design at Scale

7

27

“A tight schedule with mandatory deadlines is routine for the accounting and tax sectors to comply with due obligations. As the new screens presented are cleaner, straight to the point and clearer, visualizing and reading them is more appealing and less tiring.”

Tânia Regina Vogel Controller Coordinator, Santa Luiza Hospital

28

UX Design at Scale

29

Projects 30

Design Projects Timeline 2016

Colours for Information Display

Iconography

Keyboard Interaction

Responsiveness

Communication System — Alerts and Notification

Tasy Web Suite (TWS)

Mobile Strategy

Enterprise Information System (EIS)

Onboarding Assistant

UX Design at Scale

31

Projects

Design Projects Timeline 2016 Iconography Login Workflow Internationalization NHS Game Changers Plan

POC

Philips PEC

Design Guidelines Portal — Library — Cacau

Cacau

Migration: Sprint 1 to 5

Migration: Sprint 6 to 12

UX SAFe › UX Matrix Responsiveness Portal + Mobile + …

Jan Q1

Feb

Mar

Apr

May

Jun

Q2 32

Responsiveness Internationalization Library User Guide

Abbrev & Acronyms Colours & Legends

Alerts

Mobile

Mobile

— CPOE Migration: Sprint 13 to 18

Migration: Sprint 19 to 25 Checkpoints Hotkeys / Shortcuts

Jul Q3

Aug

Sep

Oct

Nov

Dec

Q4 UX Design at Scale

33

Projects

Colours for Information Display This project aimed to map out, understand and categorize the way of how colours for information display (legends) are currently being applied in Philips Tasy EMR.

Colour is one of the most of the most important tools for designers. It can be used to set the mood and overall tone for an application or to focus attention and guide users through an experience. Colour can also be used to assign meaning to information so that users can recognize at a glance some specific types of data on the UI. In the Healthcare context, if well applied, colours can improve patient safety and quality care.

This project aimed to standardize the use of colours for information display in Philips Tasy EMR.

34

Tasy EMR Colour Wheel

Signal ans Safety Colours Indigo Blue Notice, Available, Save, Not Urgent

Indigo

Green Safety, Done, Submitted, Some urgent

Group 1 Group 6

Group 2 Tasy Colours

Group 5

Purple

Lime In process, Search, Filter, Submiturgent

Group 4

Yellow Caution, Urgent, Pending

Green

Lime

s-60

#008EE8

s-60

#00C9A4

s-60

#00A658

s-60

#7BCC00

s-45

#3D7EFF

s-45

#05ACFF

s-45

#00E6C6

s-45

#3FB763

s-45

#9DE807

s-30

#5EA2FF

s-30

#42C9FF

s-30

#57F2E6

s-30

#45DE85

s-30

#C6F759

Orange

Red

Pink

Purple

s-60

#F2BE00

s-60

#F07C00

s-60

#E63535

s-60

#F23D9A

s-60

#A128ED

s-45

#FFDB1F

s-45

#FF9514

s-45

#FF5454

s-45

#FF6BC4

s-45

#C04AFF

s-30

#FFED5E

s-30

#FCB540

s-30

#FF8080

s-30

#FF94DA

s-30

#D780FF

Gray s-60

#454545

s-45

#696969

s-30

#9E9E9E

Safety Instructions

Notice s-60

Group 3

Cyan

#3465E0

Yellow Cyan

Gray Blocked, Inactive, Draft, Back, Cancel

Blue

s-60

#008EE8

s-45

#3FB763

Caution s-45

Warning #FFDB1F

s-45

Danger #FF9514

s-45

#FF5454

Example of Application

Orange Warning, Very urgent, Delayed

Pink

Red Danger, Emergency, Aborted

UX Design at Scale

35

Projects

Priority

36

Status

UX Design at Scale

37

Projects

Information

38

“The design team is so clever in defining which different kinds of information Tasy displays, and then providing logical guidelines on how to display them to ensure an intuitive and consistent user experience. One of my favourite examples is the differentiation between ‘status’, ‘priority’ and ‘information’ to determine which colors and/or icons to use. Of course I am also a big fan of the design work which allows content to ‘flow like water’ across different devices.”

Alix Pahaut Senior Product Manager

UX Design at Scale

39

Projects

Iconography

The project consists on Tasy’s Icon library construction including a unified graphic language according with Philips Design guidelines.

Due to Tasy’s applications complexity of features and use, one of the main challenges was on how to represent in a simple way, a representative perspetive of the application.

Most of the icons make use of a combination of elements to support its understanding.

Objectives: •• Run existing icon’s assessment; •• Design a consistent Icon Library according with Tasy’s needs; •• Provide a visual language to consistently support the platform migration to HTML5.

40

Grid

Combining Metaphors

48×48 44×44 36×36 44×32 32×44 32×32 20×20 12×12 8×8 44×44

+

=

+

+

=

+

+

=

+

=

+

=

+

=

+

=

Scaling

+

48×48

64×64

96×96

UX Design at Scale

41

Projects

Keyboard Interaction

Keyboard shortcuts provide experienced users with quick paths to execute frequent actions in the system.

These shortcuts, therefore, must be easy to memorize and consistent throughout every function of Tasy.

42

General Shortcuts

Ctrl+Alt+F To be used in the system. Ex.: Ctrl+Alt+F is reserved to show/hide filters.

General Rules

Alt+Tab What not to do. Ex.: general shortcuts of the running system can not be overlaid.

Modifiers

Shift The “why� in every key hit. Ex: Shift key is used to invert or expand another shortcut. Ctrl+S is used to save a single file and Ctrl+Shit+S is used to save everything.

New Function Shortcuts

778 534 244 68.64% Original commands

Removed commands

New commands

Removed

UX Design at Scale

43

Projects

Responsiveness How to improve the responsive experience on Tasy?

Designing and coding Tasy towards responsiveness means anticipating and establishing the general rules that will allow its UI layout to automatically adjust to the user’s display size, thus, “responding� to the media in which it is being presented in.

The framework under which Tasy in HTML5 is migrating to is a solid one. The 12 columns grid system used in Tasy is similar to the best practices of developers community around the world. Technically, responsiveness is already happening in Tasy, but the user experience is still far behind expectations.

44

Desktop First

Breakpoints

Grid System: 12 Columns

1 2 3 4 5 6 7 8 9 10

TOP 5 COMPONENTS IN UX AND MORE

DBPanel / CPanel • 90,49% of usageE

86 COMPONENTS SOLVED

Adding more inteligence to the way the panel adapts to different screen sizes help users not to make mistakes when reading, interacting with or navigating lists. Also, this inteligence makes lists' behavior more predictable and therefore more consistent throughout the system. #Error prevention #Recognition rather than recall #Aesthetic #Minimalist design #Consistency and standards.

Columns Stretch at Big Screens

Minimum Panel Size

Panel Sizes and Regins Combinations

Tabsheet • 78,22% of usageE Better space distribution between tabs will allow users to have a more pleasant experience and also make the connection between the tabs and the overflow menu more clear.

Stacking of UI Controls

Predictable behavior and restricted use cases help creating a better experience. Allowing horizontal filters only for scenarios with few fields prevents users from skipping a desired field due to small scrollable areas.

#Consistency and standards #Recognition rather than recall.

#Error prevention #Consistency and standards #Visibility of system status.

USER-CENTERED DESIGN

UI Controls Library

Flexibility of UI Controls

Filter • 83,13% of usageE

Detail Panel • 90,49% of usageE Fields will be more organized on the screen allowing users to better understand the relationship between fields. Also, avoiding a lot of blank spaces makes filling the form a more fluid experience, knowing that blank spaces will mean different sections or groups of information.

PatientBar • 22,7% of usageE Consistent behavior, The bar will always display one line of info and if the info is not visible then it will always be placed inside the expandable area. #Consistency and standards.

#Consistency and standards #Aesthetic and minimalist design #Error prevention.

Minimum and Maximum Size of Controls

UX Design at Scale

45

“The chosen colours are easy on the eye what improves the quality of the work to be done – a special care taken to avoid induced mistakes.”

Tânia Regina Vogel Controller Coordinator, Santa Luiza Hospital

46

Projects

Communication System — Alerts and Notification The project goal is to develop a standard process of alerts and notifications for Tasy and keep users informed with appropriate feedback.

The alerts & notifications system is a manager of the feedback status of the different scenarios in Tasy. The aim is to ensure success of all tasks, keep the users informed with appropriate feedback and ensure that the state of the system is always visible.

In the healthcare context, if well applied, alerts & notifications can improve patient safety and quality care. The following topics provide guidelines and recommendations for the consistent use of the system in Philips Tasy EMR.

48

Notification Matrix Dialogs

System Error

Validation

Report Status

Summarized Alert

Notification

Warning

Error

Required

Alert

Alert

Alert

Caution

Warning

Success

Warning

Warning

Confirmation

Caution

Saved

Caution

Informational

Informational

UX Design at Scale

49

Projects

Tasy Web Suite (TWS)

How to improve the interaction between patients and care providers through a compelling and a seamless platform?

Tasy Web Suite (TWS) is patientcentered solution designed to empower patients and better connect them with their care providers.

A series of functionalities were planned to provide to the patient easy access to key functionalities, such as: medical appointment scheduling, exams results, health information management, etc.

Philips EMR will provide a front-end structure to the clients and will allow them to add their own look and feel in order to fit their brand requirements.

50

Architecture Web

Dashboard

Notifications

Appointments Overview

Appointments Scheduling

Appointment Detail

Exams Overview

Patient Profile

Exam Detail

Dependent Profile

Architecture Mobile

Splash Screen

Exams

Result Detal

Login

Dashboard

Appointments

Notifications

Appointment Detail

Appointment Detail or Event Detail

Dependent Profile & Configurations

Profile & Configurations

UX Design at Scale

51

Projects

The Mobile Project is the first step to design a mobile strategy aligned with the digital trends in healthcare and its evolution.

Mobile Strategy

The main goal will be raising relevant information about the potential users and their needs, contexts of use and key experience moments to drive all mobile/ mobility initiatives and therefore expand the use of Tasy to another screens.

Objectives: •• Improve the communication efficiency and collaboration in clinic care; •• Provide relevant clinical information to accelerate decision making; •• Increase the patient engagement in the treatment.

Decision Matrix

Board

</ >

Chief Physician

TASY KPI’s Hybrid

Chief Nurse

TASY Nurses Native

TASY Doctors Native

</ >

TASY KPI’s Hybrid

</ >

Physician

TASY Doctors Native

Nurse

TASY Nurses Native

Technician

TASY Vital Signs Native

Janitor

</ >

TASY Maintenance Hybrid

TASY KPI’s Hybrid

52

Solutionâ&#x20AC;&#x2122;s Examples

Financial

Admin

Cost Management

Ward Coordinator Board

Physician

ICU

Physician

Tehcnician Nurse

ICU Coordinator

Ward

Nurse Tecnician

Janitor

CLUSTER SOLUTIONS

Hospitality laundry & maintenance

Clinic Management Messages Utilities

UX Design at Scale

53

Projects

Information Drill Down Abou t Sector Name Her

e

Tasy

User Nam e

Function Name

Abou t Sector Name Her

e

Dashboard Financeiro por Procedimento

Add New Indicator

Key Performance Indicator

Mensal Período

Period

01 Oct 2015

See

Share

Function Name

Abou t Sector Name Her

Add New

Duplicate

Code

Dashboard name

Creation Date

Creator

Lote/For…

12 9

Dashboard financeiro por procedimento

12 Jun 2015

Rose Woods

0

12 9

Dashboard administrativo por setor

22 Jul 2015

Robert Gardner

0

8304

Dashboard clínico por procedimento

31 Aug 2015

Nicole White

0

193

Dashboard administrativo por médico

10 Oct 2015

Tammy Hayes

0

193

Dashboard financeiro por procedimento

19 Nov 2015

Joshua Lee

0

414233

Dashboard financeiro por procedimento

29 Dec 2015

Shirley Morrison

0

See

Delete

Dashboard Financeiro por Procedimento

03 Mon

Week 43 . 08 -16

07 Fri

10 Mon

Week 44 . 16 -23

14 Fri

17 Mon

Week 45 . 23 -31

21 Fri

24 Mon

28 Fri

Week 46 . 01-08 31 Mon

04 Fri

Particular

07 Mon

Week 48 . 16 -23

11 Fri

14` Mon

Week 49 . 23-31

18 Fri

24 Mon

Week 50

28 Fri

05 Mon

Particular Enfermaria

10

Enfermaria

Week 47 . 08 -16

10 Nov 2015

9

KPI

Quantidade

8

Convênio

6

7

Dimensions

Particular

6

User Nam e

Add New Indicator

i

Hospitalization Rates , Profitability…

Key Indicators

+4

Health Insurance, Category, Sec…

Dimensions

Last update: 16 Jun 2016 10:39

414784

Dashboard financeiro por médico

7 Feb

Albert Chen

0

55780

Dashboard administrativo por médico

18 Mar

Sandra Ford

0

414784

Dashboard financeiro por setor

27 Apr

Jose Riley

0

Card’s Name is too…

Card’s Name is too…

i

Card’s Name is too…

i

20

Bradesco…

5 1

SUS

May

Jul

Aug

Oct

Card’s Name is too…

i

Share

+8

Jan

Dez

Mar

May

Jul

Aug

Oct

i

20 15

Unimed

10

Amil

Mar

See

Revenue, Margin…

Information

Bradesco…

15

Unimed

Particular

Jan

+23

24

8

Week 42 . 01 -08

e

Dashboards: Dashboard Finance…

Dashboards

31 Dez 2015

Tasy

User Nam e

Meus Dashboards

10

Amil

Meta 10 pontos

Enterprise Information System (EIS)

Function Name

Meta 10 pontos

Tasy

Dashboards: Dashboard Finance…

5

Particular

1 SUS

Dez

Jan

Mar

May

Jul

Aug

Oct

Jan

Dez

Mar

May

Jul

Aug

Oct

Dez

12

Card’s Name is too…

5

i

4 Process

3

(138)

34

138

Add New Indicator

2 1 34

Philips Healthcare

Establishment Name

Tasy

DataBase

0.0.0000.0

02 Jun 2015

Function Name

08 30 00

Abou t Sector Name Her

(UTC

e

-3 00)

DataBase

0.0.0000.0

02 Jun 2015

Function Name

08 30 00

Abou t Sector Name Her

(UTC

e

-3 00)

Mensal Período

Period

Week 42 . 01 -08

Week 43 . 08 -16

07 Fri

10 Mon

14 Fri

Week 44 . 16 -23 17 Mon

01 Oct 2015

Week 45 . 23 -31

21 Fri

24 Mon

28 Fri

Share

Week 47 . 08 -16

04 Fri

07 Mon

Week 48 . 16 -23

11 Fri

14` Mon

Week 49 . 23-31

18 Fri

24 Mon

Week 50

28 Fri

Prontuário

05 Mon

23 123

Apartamento 12

RX Torax Enfermaria

Add New Indicator

200 01

Bradesco Especial Unimed Fumbep Agemed

Mensal Período

Period

01 Oct 2015

See

Share

Tasy

DataBase

0.0.0000.0

02 Jun 2015

Function Name

08 30 00

Abou t Sector Name Her

Dashboard Financeiro por Procedimento

(UTC

e

-3 00)

User Nam e

Convênio

Sub Tipo de Convênio

Data

Médico

U.M.

Particular

Enfermaria

13 Jun 2015

Sara Arnold

un

0

Particular

Enfermaria

23 Jul 2015

Justin Green

un

0

8304

Particular

Enfermaria

1 Sep 2015

Frank Smith

caps

0

193 193

Particular

Enfermaria

Stephen Andrews

un

0

Particular

Enfermaria

Jennifer Cook

un

0

Particular

Enfermaria

30 Dec 2015

Ronald Dunn

caps

0

414784

Particular

Enfermaria

8 Feb

Angela Richards

caps

0

11 Oct 2015

Table

Lote/For…

414233

10 Nov 2015

Add New Indicator

Key Performance Indicator

31 Dez 2015

12 9

12 9

Particular Particular Gold

Establishment Name

Dashboards: Dashboard Finance…

Dashboard Financeiro por Procedimento Key Performance Indicator

31 Dez 2015

Week 46 . 01-08 31 Mon

See

Philips Healthcare

User Nam e

Dashboards: Dashboard Finance…

Add New Indicator

Key Performance Indicator

Particular

Establishment Name

Tasy

User Nam e

Dashboards: Dashboard Finance…

Dashboard Financeiro por Procedimento

03 Mon

Philips Healthcare

55780

Particular

Enfermaria

19 Mar

Julia Sullivan

un

0

414784

Particular

Enfermaria

28 Apr

Nicole Rose

caps

0

Period

Line Chart

List of Dimensions

HeatMap

Dimension Group

8

Dimension Group Rows

Mensal Período

Pie Chart Dimension Group

Drag Dimensons to here

Diabetes

CPOD Severity Diagnosis

5%

Dimension Group

Area Chart

Scatter Chart

Share

…

Bullet C...

Dimension Group

Drag Dimensons to here Dimension Group

See

31 Dez 2015

Stacked Chart

Dimension Group

Heart Failure

Columns

01 Oct 2015

BarChart

Sex

Headache

Broken Leg

Colera

Stomach Ache

Not Letal Stomach Ache Not Informed

3%

1.5%

Indaserv Amil

0

SUS

Sex

Sispam

Philips Healthcare

How can we improve data-based decisions through a user centric approach?

Establishment Name

DataBase

0.0.0000.0

02 Jun 2015

08 30 00

(UTC

-3 00)

Philips Healthcare

Establishment Name

DataBase

0.0.0000.0

02 Jun 2015

08 30 00

(UTC

-3 00)

Not Informed

Female

Philips Healthcare

Establishment Name

DataBase

Male

0.0.0000.0

02 Jun 2015

08 30 00

(UTC

-3 00)

Dashboard Creation and Configuration Tasy

Function Name

Abou t Sector Name Her

e

Tasy

User Nam e

Meus Dashboards

Function Name

Abou t Sector Name Her

e

Dashboards

Add New

Duplicate

See

Delete

Tasy

User Nam e

Meus Dashboards

Function Name

Abou t Sector Name Her

e

User Nam e

Meus Dashboards

Select the Performance Indicator

Select the Dimensions

KPIs per Group

Select Informations

Select Period

KPI - Agenda

Code

Dashboard name

Description

Creation Date

Creator

Lote/For…

12 9

Dashboard financeiro por procedimento

Nam porttitor blandit accumsan..

12 Jun 2015

Rose Woods

0

12 9

Dashboard administrativo por setor

Mauris non tempor quam, et lacini.

22 Jul 2015

Robert Gardner

0

8304

Dashboard clínico por procedimento

Lorem ipsum dolor sit amet, conse.

31 Aug 2015

Nicole White

0

Group

193

Dashboard administrativo por médico

In hac habitasse platea dictumst..

10 Oct 2015

Tammy Hayes

0

Procedimento por Valor

195

Dashboard financeiro por procedimento

In hac habitasse platea dictumst. Vi.

19 Nov 2015

Joshua Lee

0

Departamentos de Valor

414233

Dashboard financeiro por procedimento

Mauris non tempor quam, et lacinia.

29 Dec 2015

Shirley Morrison

0

Equipe por Receita total

414784

Dashboard financeiro por médico

Curabitur lobortis id lorem.

7 Feb

Albert Chen

0

Schedule

55780

Dashboard administrativo por médico

Vestibulum rutrum quam vitae fri.

18 Mar

Sandra Ford

0

Setor por Custo

414784

Dashboard financeiro por setor

In hac habitasse platea dictu.

27 Apr

Jose Riley

0

Procedimento por Receita total

Search

Results

Test and Publish

Surgery Schedule

202

Procedure Schedule

Schedule

1 Oct 2015

70

6 Nov 2015

35

Agenda Total

12 Dec 2015

250

Agenda Procedimentos

17 Jan

372

Agenda Cirugia

22 Feb

423

Agenda Setor

29 Mar

985

Agenda por Departamento

4 May

14

Dimensions

(1)

Agenda Cirurgica

Agenda Procedimentos

Professional

Resultados Hospital (1) Fluxo de Caixa

General Settings

Test and Publish

Date

Fusce vehicula dolor arcu, si.

Atributo

15 Jun 2015

DS Convêni…

Data Entrega

Donec facilisis tortor ut aug.

21 Jul 2015

DS Data En…

Convênio Internacional

Curabitur lobortis id lorem id bibe.

26 Aug 2015

DS Convêni…

Fusce vehicula dolor arcu, si.

Especialidade (1)

Equipe Receita total

Team - Total Revenue

Results

Select Period

Description

Convênio Nacional Key Performance Indicators

56

Agenda Removidas

Select Informations

KPI’s Dimensions

Search

Code

544

21 Jul 2015

Agenda Modificadas

Select the Dimensions

Selected KPIs

Data

15 Jun 2015

Agenda Cirugia

26 Aug 2015

Select the Performance Indicator

Selected KPIs

Add to selected KPIs KPI

Agenda Adiadas

Agenda Médicos

Professional

General Settings

1 Oct 2015

DS Especia…

Data Final

Cras quis nulla commodo, aliqua.

6 Nov 2015

DS Data ...

Nacional

Nam porttitor blandit accumsa.

12 Dec 2015

DS Nacional

(2)

Hospitalization Rates Profitability

Custo por Departamento Resultados por Setor Procedimentos por Valor

Back

Cancel

Tasy

DataBase

0.0.0000.0

Function Name

02 Jun 2015

08 30 00

Abou t Sector Name Her

e

(UTC

-3 00)

Philips Healthcare

Tasy

User Nam e

Meus Dashboards

Establishment Name

DataBase

0.0.0000.0

02 Jun 2015

Function Name

Next

08 30 00

Abou t Sector Name Her

(UTC

Select the Dimensions

Select Informations

Select Period

General Settings

Test and Publish

e

Back

Cancel

-3 00)

Philips Healthcare

Tasy

User Nam e

Establishment Name

Select the Performance Indicator

Select the Dimensions

Select Informations

Select Period

General Settings

Dimensions

Dashboard Name

Hospitalization Rate

24

Card’s Name is too…

Card’s Name is too…

i

20

Bradesco…

Date options

Anual, Mensal, Mensal…

Filters

Options listed here

Card’s Name is too…

i

i

Key Performance Indicator

5

Particular

1 SUS

Indicator’s Description

Jan

Mar

May

Jul

Aug

Oct

Dez

Jan

Mar

May

Jul

Aug

Oct

i Select Informations

5

SUS

Jan

Mar

May

Jul

Aug

Oct

Dez

Jan

Mar

May

Jul

Aug

Oct

Add New Indicator

10 5

Philips Healthcare

Establishment Name

DataBase

0.0.0000.0

02 Jun 2015

08 30 00

(UTC

-3 00)

1

Back

Cancel

Philips Healthcare

User Nam e

Establishment Name

Test and Publish

DataBase

0.0.0000.0

02 Jun 2015

08 30 00

Key Performance Indicator 20 NOV

15

5 1

Jan

Mar

-3 00)

May

Jul

Aug

Dez

2000.000

03

Cancel

Mar

Save

Fev

Aug

Back Philips Healthcare

Oct

4000.000

0 NOV

Save (UTC

03

10

6000.000

Nam porttitor blandit accumsan.

Ut vel dictum sem, a pretium du.

Meta 10 pontos

15

34

Next

General Settings

8000.000

20

34

Key Performance Indicator

12.000.000 10.000.000

Horizontal Bars

Key Performance Indicator

i

20.000.000

16.000.000

Chart Tip

Back

e

-3 00)

18.000.000

i

Dez

(138)

138

Select Period

14.000.000

Chart Type

12

Card’s Name is too…

Cancel

(UTC

KPI

Key Performance Indicator

1 Row

15

1

Dez

1 Column

10

Amil Particular

Description

Process

Next

08 30 00

Abou t Sector Name Her

Select the Dimensions

Vertical Layout

20

Unimed

10

Amil

Revenue, Margin…

Bradesco…

15

Unimed

Information

02 Jun 2015

Horizontal Layout

Card’s Name is too…

i

Health Insurance, Category

Meta 10 pontos

Indicator

Name

0.0.0000.0

Function Name

Select the Performance Indicator

Test and Publish

Con gure Chart General Settings

General Settings

DataBase

Meus Dashboards

Meus Dashboards

Select the Performance Indicator

Meta 10 pontos

•• Design an engaging and useful experience that empowers users to get sense of data; •• Optmize the process of KPIs analisys and build high end data-driven dashboards; •• Leverage the ability of the institution to improve and optimize its processes and metrics.

Establishment Name

Meta 10 pontos

Philips Healthcare

Establishment Name

DataBase

0.0.0000.0

02 Jun 2015

08 30 00

Save (UTC

-3 00)

54

Workflow

Tasy

Function Name

Abou t Sector Name Her

e

User Nam e

Dashboards: Dashboard Finance…

Dashboard Financeiro por Procedimento

Add New Indicator

i

Hospitalization Rates , Profitability…

+4

Dimensions

Health Insurance, Category, Sec…

Last update: 168Jun 2016 10:39

Card’s Name is too…

Card’s Name is too…

i

Card’s Name is too…

i

20

1 SUS

Jul

Aug

Oct

Jan

Dez

Mar

May

Jul

Aug

Oct

i

15 10

Amil

Meta 10 pontos

5

Particular

May

+8

20

Unimed

10

Amil

Card’s Name is too…

i

Bradesco…

15

Unimed

Mar

Revenue, Margin…

Information

24

Bradesco…

Jan

+23

Share

Meta 10 pontos

Key Indicators

See

5

Particular

1 SUS

Dez

Jan

Mar

May

Jul

Aug

Oct

Jan

Dez

Mar

May

Jul

Aug

Oct

Dez

12

Card’s Name is too…

Process

i

(138)

34

138

Add New Indicator

34

Philips Healthcare

Establishment Name

Dashboard Tasy

Card’s Name

Period

Mensal Período

Abou t Sector Name Her

01 Oct 2015

31 Dez 2015

Clear All

e

0.0.0000.0

02 Jun 2015

Dropdown Multiselect

Cards

Function Name

DataBase

08 30 00

(UTC

-3 00)

Charts

User Nam e

Key Performance Indic…

View Mode

i

Key Performance Indic…

i

Key Performance Indic…

i

Back

Key Performance Indic…

i

20.000.000 KPI

Health Insurance, Category, Sec… +3

Dimension

Dimension 730, Dimension 591, Di...+4 KPI

Search

Key Performance Indic…

Information 556 Dimension 563

Key Performance Indicator 5 Cancel

6000.000

KPI 3

Cancel Save

8000.000

KPI 24

KPI

Key Performance Indicator 1

10.000.000

Information 288

Dimension 967

Category

Add New Indicator

12.000.000

KPI 11

Dimension 50

Key Performance Indicator 5

14.000.000

Information 190

KPI

Category

i

Information 759 KPI 42

Dimension 852

Key Performance Indicator 2 i

16.000.000

KPI 29

Dimension 591

Key Performance Indicator 4

18.000.000

Information 759, Information 190

Dimension 730

Category

Key Performance Indic…

Information

Save

4000.000

Information 592 Cancel

Save

2000.000 0

Mar

Philips Healthcare

Establishment Name

DataBase

0.0.0000.0

02 Jun 2015

08 30 00

(UTC

Fev

Aug

-3 00)

UX Design at Scale

55

Projects

Onboarding Assistant

Tasy EMR Onboarding â&#x20AC;&#x201D; Support the users in their first contact with Tasy.

Contextualize the user in his first contact with Tasy, as well as to describe and explain the main interactions that allows users to explore the features in Tasy with fluency.

56

Main Navigation

Panels and Hierarchy

UX Design at Scale

57

Components 58

Basic Elements

Containers

Informational

Login

About Box Image Draw Patient Bar Timeline Toast Multiple Notifications Top Bar User Guide

Buttons Textfield Textfield Locator

Input Controls

Navigational

Autocomplete Biometry DateTime Picker File Upload Filter Medida Image Capture

Basic Charts Calendar Dropdown Chart-PEPO Dashboard DBPanel - CPanel

Detail Panel External Prompt File Preview Navigation Path PopupMenu Integrated Schedule

UX Design at Scale

59

Components

200+ components at Library, described by building specs, behavior, visual aspects, code internationalization and ready for prompt search. Itâ&#x20AC;&#x2122;s a reliable and often updated material collection.

60

Components â&#x20AC;ş Basic Elements Containers Informational Input Controls Navigational

UX Design at Scale

61

Components › Basic Elements

Standard Buttons

Variations

Buttons •• Buttons are control elements that indicate a possibility of user action through a single click; •• An action is defined by the use of at least one verb; •• There are 2 different types of buttons: Standard Buttons and Flat Buttons.

Within these main classes some variations occur.

Flat Buttons

62

Behaviour

Available

Hover

Pressed

Unavaileble

Focus

UX Design at Scale

63

Components › Basic Elements

Textfield •• Textfield is a basic element; •• Textfield allows users to input data in a structured manner in the system; •• Textfield allows input data to be verified against business rules, data types and good practice advice for the final users.

64

Components › Basic Elements

Textfield Locator •• Textfield Locator is a composition of one or more interdependent Textfields and an Action; •• Textfield Locator allows users to both type in an entry or search + select an entry.

UX Design at Scale

65

Components

Basic Elements â&#x20AC;ş Containers Informational Input Controls Navigational

66

Components › Containers

Login •• Login is a security procedure the enables user to access the system by signing in manually with their Tasy account or through biometry.

UX Design at Scale

67

Components

Basic Elements Containers â&#x20AC;ş Informational Input Controls Navigational

68

Components › Informational

About Box •• The About box is the ‘product label’ of our software much like the type plate on a hardware product. It carries all the information needed to identify the product including the necessary regulatory, legal and privacy information.

UX Design at Scale

69

Components › Informational

Image Draw •• The Image Draw is an informational component; •• It must allow the user to access an Image Gallery, so that it can manage the images as well as draw using an Image Editor.

70

Building Specs

UX Design at Scale

71

Components › Informational

Patient Bar •• The Patient bar is a component used to provide users with relevant patient information; •• The type of information to be displayed in the Patient Bar will vary according to the context of use; •• The Patient Bar is also used as an access point to the patient locator or to bring users back to a patient list.

72

Building Specs

Find a Patient

Patient Profile

Change Patient

Patient Name

Patient Deceased

Out-of-Hospital Patient

Patient Warnings

UX Design at Scale

73

Components › Informational

Timeline •• The timeline is an informational component used to display a list of items and events in chronological order, such as medical prescription items.

74

CPOE

Action Triggers Right click continuum

Right Click scheduled

Hover Clustered

Hover

UX Design at Scale

75

Components › Informational

Toast •• Toast is an informational component used to give appropriate status feedback. The notifications should have a consistent location in each context of use. We recommend the on top of the panel in focus. It should appear for a few seconds and disappear. Toast should be dismissible.

Info Messages

Success Messages

Warnings Messages

76

Behaviour

Responsiveness

UX Design at Scale

77

Components › Informational

Multiple Notifications •• For generate multiple notifications of the same time, Tasy offers a different approach to represent the most important and urgency clinical notifications: summarizing; •• The messages are informational and organized by severity, Max & High and type of information.

78

Components › Informational

Top Bar Building Specs

•• The topbar is a structural component fixed on the top portion of Tasy; •• The topbar, from left to right, is composed of an app launcher icon followed by the product name, Tab(s) that will represent currently opened function(s), user profile image, information icon and, finally, a fullscreen icon;

Behaviour

•• According to Philips Design Language System, the use of the Philips wordmark in the main application screen is optional. In Tasy, it was decided to not use the Philips wordmark on the topbar. Nevertheless, the legal name appears on the statusbar throughout the system.

UX Design at Scale

79

Components › Informational

User Guide •• The Component is a navigational element to help user in different context; •• The Component is important to communicate a new design component and full of potential to drive engagement and delight users when they have just signed up.

Informational

80

UX Design at Scale

81

Components

Basic Elements Containers Informational â&#x20AC;ş Input Controls Navigational

82

Components › Input Controls

Autocomplete •• Autocomplete is a search element; •• Autocomplete loads suggestions (from a controled list of content) as users enter information into the search field.

UX Design at Scale

83

Components › Input Controls

Biometry •• The Component is a solution to improve the person’s actual identity to become part of the authentication process by Tasy; •• Users are assigned user IDs and their fingerprints are used as passwords.

84

Components › Input Controls

DateTime Picker •• The DateTime picker allows users to pick a specific date/time using touch, mouse, or keyboard; •• It consists of the date input field and the datepicker; •• The datepicker allows users to enter a single date or a date range; •• It allows users to navigate directly from one month or year to another; •• It allows the selection of a new date as well as to navigate in between the next and the previous month, or to a particular month or year; •• It provides a quick link to select today’s date. The examples below demonstrate hover and selected states in addition to dates with special information.

UX Design at Scale

85

Components › Input Controls

File Upload •• File Upload is used to assist users uploading files; •• It enables data to be uploaded in a multitude of formats (images, text, amongst others) from the local file system; •• There are FileUpload as single file and multiple file option.

86

Components › Input Controls

Filter •• Filters are input controls used to reduce large masses of content to a more narrowly focused display; •• There are two basic steps. The first is to analyse a given set of content based in one or more criteria. The second to show a filtered content excluding items that did not meet all criteria chosen; •• On Tasy, this component is mainly (not only) applied to choose terms of a search and filter results displayed in a table or list.

Filter not applied

Filter applied

UX Design at Scale

87

Components › Input Controls

Medida •• The component is an input control; •• It is used mostly in lab-report functions in Tasy; •• It allows data to be input in a form and sent to a template text that makes a formal report, which is shared with the clinical team.

88

Medida form

Medida report

UX Design at Scale

89

Components › Input Controls

Image Capture •• Image capture is an input control element; •• It is an additional task in the patient info; •• The component should make the communication of the operating system with an image capture device.

90

Components

Basic Elements Containers Informational Input Controls â&#x20AC;ş Navigational

UX Design at Scale

91

Components › Navigational

Basic charts •• This spec intent to present how must be the basic behaviour of charts; •• Specific behaviours (or charts related with specific functions in Tasy) will be carried in further specs; •• Charts can be applied inside panels, modals or cards. All related actions will depend of which structure can offer — for example, inside a panel, a chart can have support from Title, Handlebar, Context Menu and buttons in general.

92

Chart Decision Tree

UX Design at Scale

93

Components › Navigational

Calendar •• This component allows the user to check and schedule items in a calendar; •• It allows users to see their schedules within a monthly or annual view.

94

Components › Navigational

Dropdown Internal

Dropdown •• Dropdown is a navigational element; •• Dropdown allows users to select a value from a series of options.

Dropdown External

UX Design at Scale

95

Components › Navigational

Chart-PEPO •• The Component is a navigational element to display the surgical process; •• The Component is a visualization form to integrated data and to facilitated the clinical interpretation from the Anesthesiologist; •• The Chart has two visualization mode: Individual is a representation individualized data of the Patient during the operation and Unified mode is a representation summary data through symbols. The symbology is a standard representation by anesthesia.

96

UX Design at Scale

97

Components › Navigational

Dashboard •• The component is a navigational element; •• Dashboards are used in Tasy to cluster information in charts, graphs, maps or similar views easily understandable at a glance; •• All information is nested in cards that might be fixed or responsive depending on which kind of information it is to represent.

98

Possible Layouts

Examples of Content Application on Cards

UX Design at Scale

99

Components › Navigational

DBPanel — CPanel •• Both DBPanel and CPanel are lists; •• They are visually similar, but each one has its specific features and applications; •• The DBPanel has a detailed view (Detail Panel) while the CPanel does not.

100

Action Triggers

UX Design at Scale

101

Components › Navigational

Detail Panel •• The DetailPanel is the detailed view of a list item (DBPanel); •• A container displays a set of form elements in a structured way; •• It is also used as a containing structure for other components (e.g., filters).

102

UX Design at Scale

103

Components › Navigational

Opening the Spotlight Menu

External Prompt •• External Prompt is a Tasy-specific concept that allows users to navigate to functions directly related to the ones that users are currently on to complete given tasks; •• Navigating to external functions supports two very distinctive intentions: Consulting information within other functions, and/or carrying through an action in another function and returning the result of that action into the original function user was in; •• As such, a significant number of External Prompt use-cases has been gathered and associated to tentative components. This enabled a productive discussion of how and where to associate affordances for the functionality.

External Prompt Opened

104

Components › Navigational

File Preview •• The Component is a navigational element; •• The Component is used to zoom in an imagem on the Image Gallery or to view documents (pdf, doc., etc.).

UX Design at Scale

105

Components › Navigational

Basic

Navigation Path •• This is a navigational component; •• This component supports the user aiding understanding and navigation through panel hierarchy; •• It always appears when the UI can no longer display the root panel from which the navigation initiated.

With Patient Bar

106

Components › Navigational

Popup Menu •• The component is a menu in that appears a menu in a popup upon window to view options for quick access; •• This menu is USUALLY referred as a Context Menu because usually depends on the content displayed on the screen (when used as a right-click menu).

UX Design at Scale

107

Components › Navigational

Integrated Schedule •• This navigational component allows the user to register and view the exams, consultations, service schedules and time slots; •• This spec should be applied to AgendaIntegrada and AgendaQuimio components that behave in the same way and look the same; •• The StatusAgenda component is also in this spec.

108

UX Design at Scale

109

“In the accounting and tax areas, the system has to be presented clearly and objectively, thereby, avoiding induced mistakes. As the presented screens are visually clean, clear and objective, lightness is brought to the information on them.”

Tânia Regina Vogel Controller Coordinator, Santa Luiza Hospital

UX Design at Scale

111

Showcase 112

Tasy EMR

Mobile EMR

TWS â&#x20AC;&#x201C; Tasy Web Suit Middle East Hospital, KSA

UX Design at Scale

113

Showcase

Tasy EMR

114

UX Design at Scale

115

Showcase

116

UX Design at Scale

117

Showcase

118

UX Design at Scale

119

Showcase

120

UX Design at Scale

121

Showcase

122

“The new layout and interaction patterns make Tasy accessible to all areas within the hospital and exponentially reduce the learning curve over any other existing product of the same category.”

Maurício Souza de Mattos IT & Control, Santa Luiza Hospital

UX Design at Scale

123

Showcase

Mobile EMR

124

UX Design at Scale

125

Showcase

126

UX Design at Scale

127

Showcase

TWS â&#x20AC;&#x201C; Tasy Web Suit Middle East Hospital, KSA

128

UX Design at Scale

129

â&#x20AC;&#x153;This mobile application looks a lot better than [their reference application from a different hospital]!â&#x20AC;?

Saudi Arabia key stakeholder during mobile application demo

130

UX Design at Scale

131

Philips Design EMR Team

©2017

Š2017 Koninklijke Philips N.V. All rights reserved. Philips Healthcare reserves the right to make changes in specifications and/or to discontinue any product at any time without notice or obligation and will not be liable for any consequences resulting from the use of this publication.

www.philips.com.br cilatam@philips.com.br