I'm Sich, a UIUX Designer
P R O J E C T O V E R V I E W
Cyber Patient Authorizing Tool - A 3D patient avatar builder for medical professionals
An authoring tool where educators and practitioners can build accurate 3D avatars with specific medical cases, and the ability to manipulate or change specific parameters related to a particular condition or disease.
Duration
3 Month
Project Type
Client-based production project
Team
Sichen Huo - Product Designer
Rey Do - UI, Visual Designer
Helena Wan - UIUX Designer
Sachit Gulwadi - Project Manager
Fernando Flores Artiga - 3D Artist
Sam Gortarez Ricardez - Software Dev
My Role
Project managetment, Market research, User Persona, User Flow, UIUX
P R O J E C T B A C K G R O U N D
Vritual medical simulation tool has become an essential tool to bridge the gap for doc- tors 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.
According to healthystimulation.com
Online medical tools allow users to build medically accurate avatars and practice with them 24/7. It is easy to use with a required level of medical accuracy for both teaching and practicing.
C L I E N T I N T R O
Who is our Client?
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, inpatient, and outpatient cases.
Users
Client
Needs?
Who?
Medical professionals and students
The more flexible 3D avatar that can be customized with medical parameters
Technical Connstrains
- Implementing a UX system may look different in Unity
- 2 different stages where users can’t come back
- Inconsistent design system
Who?
CyberPatient
Needs?
An upgraded prototype in Unity
Pain Points and Solutions
1）Lack of ability to costumize patients in 2D web verision
2）Lack of flexibility and building medical cases (eg. rotate or zoom in/out)
3）Limited medical cases to choose from
A realistic 3D avatar that is customizable with physical parameters
A fast, easy-to-use, and 360 degree rotatable web-based medical case building tool.
Building an medical accurate avatar that can change specific parameters based on different conditions or diseases.
Our Goal
How might we build an authorizing tool for CyberPatient that creates 3D medical cases for doctors and medical students, allowing them to custom medical cases that are expandable, web-based, and carry current brand identity？
Features
Costumize Patients to fit special needs
- Make specific avatar adjustments
- Different colour choices for more detailed sections such as hair, lip and pupil
Manipulate specific parameters to particular condition
- List of real medical parameters built by medical professionals
-A variety of levels of realistic sounds
Easy to Use and Flexible 3D Avatar
- Examine the avatar 360 degree
- View an accurate medical model with full screen before it is exported
Process & Analysis
Design Process
A N A L Y S I S
Stage 1 Wireframe Iterations
During the ideation stage, we iterated three kinds of wireframes. From a conservative to a more liberal approach. At the same time, the team examined the designs that best fit the purpose and project scope.
Simple, Straight forward, drop-down list, easy to develop
Not attracting, old school type
Clear and simple system, scalable
Structure is very rigid, only vertical and horizontal
Creative, gamified experience
Blocking the 3D avatar, lack of scalability
A N A L Y S I S
Target User Persona
We interviewed three doctors to talk about their life stories, experience with using virtual medical tools, their experience with the current Cyber- Petient tool as well
Name: Yasaman
Age: 55
Occupation: Family Medicine
Pain Points:
- Wishes she can zoom in to the avatar’s heart section for examination - She wishes there are more patients that fit her medical specialties, the current model only has clothing and hairstyle difference
- Wishes she can build her cases because she encountered an exceptional emergency patient when she was in her internship
Needs:
- A More accurate 3D model that allows Yasaman to rotate, zoom in and out
- Easy to use, a fast-to-learn system that allows Yasaman to customize her patient - Yasaman can add special parameters for her specialties and future self-education
Stage 1 Second Iterations
After interviewing the doctors, we’ve focused on expanding the menu bar, adjusting more often used buttons to the middle as well as reorganizing different functions to different pages.
Stage 2 Wireframe Iterations
With the provided information, we need to include 10 pages of medical parameters into one UX system, therefore we need to use some kind of toggle system for better organization. In the first iterations, we tried several different approaches.
None of them worked. All iterations are typical menu-like systems, but our user needs to select a sound for each category which would not work under a toggle systems
Final Stage 2 Iterations
We noticed we need to change the way of presenting medical information. We looked into how the UX structure works in different business types of designs. We’ve found the following types and combined them for our needs.
A combination of the three types from UX to business
Stage 2 User Flow Explained
