top of page
Slide 16_9 - 47.png
Easy'Pets: Text

CyberPatient

Team Project | Jan-Apr 2022

 UI Lead Designer: Design System, Research and Analysis, Usability Test, UIUX

​

Easy'Pets: Text

CyberPatient Authoring Tool - A 3D patient avatar builder for medical professionals

An authoring tool where educators and practitioners can build accurate 3D avatar with sepecific medical cases, and the ability to manipulate or change specific parameters related to a particular condition or disease.

Project Background and Research

Virtual medical simulation tool has became an essential tool to bridge the gap for doctors and medical students to turn theory into practice. Physical medical stimulators are very expensive and a high- fidelity patient stimulators may cost up to 55,000 -  250,000.

Cyberpatient_shopify_pdf整理 2.png

According to healthystimulation.com

Online medical tools allow users to build medically accurate avatars and practice with it 24/7. It is easy to use with a required level of medical accuracy for both teaching and practicing.

Who is our Client?

Frame.png

CyberPatient creates a safe and diverse virtual training hospital available 24/7. Students practice multiple clinical skills on 130+ virtual patients presented in peer-reviewed, patient, and outpatient cases.

Cyberpatient_shopify_pdf整理 3.png

Users

1 548592920.png

Who？Medical professionals and students

Needs？An easy-to-use 3D medical authoring tool

2 58.png

Client

Constrains

3 4.png

  • No medical background

  • Inconsistent design system

  • Implement a UI system may look different in Unity

Who？CyberPatient (CanHealth)

Needs？An upgrade of the current web 2D version, and keep the brand identity

Problem Statement

How might we build an authorizing tool for CyberPatient that keep the brand identity, and provide an expandable medical design system with precise design elements?

Problem Statement

How might we build an authorizing tool for CyberPatient that keep the brand identity and provide an expandable medical design system with precise design elements?

Problems and Solutions

CyberPatient Brand Guide Icons don’t have a good consistency

Vector-2.png
Group.png

Redesign the system icons with newly defined design rules while keeping the brand DNA

The old 2D medical tool Web version don’t have an interactive design system

Vector-2.png
Vector-3.png

Create the design system with interactive elements (button states, etc.)

The new 3D authoring tool has tons of information that needs to display

Vector-2.png
Vector-4.png

Design the system with good information level while keep the design elements clean

Final Product Showcase

Stage 1 - Customize the patient to fit special cases

Custumize- page 1 - all expanded 2.png
Costumize page 2- all expanded 3.png

Stage 2 - Manipulate specific parameters to particular condition

Final 34 2.png
Final 46 3.png
Group.png

Consistent system icon set

-Keep the CyberPatient Brand Identity
-Following the new design rules (Google Material Design)

3.png
Vector-3.png

Interactive Elements

-Button States
-Tooltips

1.png
Vector-4.png

Information Level

-Differentiate the level of information by design language

2.png

Design Process

01

Research

02

03

04

05

06

Analysis

Evaluative
Decisions

Prototype

Usability 

Test

07

Reflection

Focused

Ideation

Client Background
Project Scope
General Research
Market Research
User Research
Google Material Design

Brand Identity
Design Guide
Previous 2D Web Version

Icon Design
New Design Rule

Stage 1
Stage 2

Future Visions

Iconography

Group 3441.png

Scalable with different sizes

Group 36.png

Core Silhouette

For the new system icon, I worked with another visual designer. Then I highlighted the ones I contributed to

Slide 16_9 - 18 1.png

Interactive Design

Tooltip

Button States

Group 3445.png
7.png
Group 3444.png
Group 3443.png

Information Level

Data Dropdown

Subtle Divider to divide different section of information

Group 3446.png
Final 47 1.png

Navigation Anatomy

Group 3447.png
Group 3447.png

Usability Test

The purpose of the test is to ensure that all the visual components meet the outlined requirements - both in terms of functionality and performance.

The test covers these topics:

  • Navigation

  • Function

  • Aesthetic

  • Branding

  • Comfort

Test results:
93% positive feedback​

  • Overall it’s clean and easy to understand

  • Informative, helpful & mostly no confusion when using

Group 3448.png

Iteration

Cloth Option Click 1.png
2 57.png
3 3.png

Reflection

What would I do different if I get a chance to redo the project

  • Redesign the color palette to fit the theme of future realistic tech

  • Find a better way to organize the data

  • Do more tests among target users

Slide 16_9 - 47.png
Research
Problems and Solutions
Final Design
Design Process
Usability Test
Reflection
bottom of page