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’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 — 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’s a reliable and often updated material collection.
60
Components › 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 › 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 › 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 › 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 › 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 – 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 – Tasy Web Suit Middle East Hospital, KSA
128
UX Design at Scale
129
“This mobile application looks a lot better than [their reference application from a different hospital]!� 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