UX/UI Designer
6 Weeks
Design, Feedback, Iterate
Figma
PM, 3 Developers, UX/UI Designer
During consultations, Clinicians use 3d models to communicate to their patients their diagnosis and treatment. Visual tools are used to show their patients the location of nodes/tumors. Clinicians shared they found out frustrating having to go back and forth with tools to make edits on the nodes/tumors.
Duration
October 2024 - Current
Role
Product Designer - UX Research, Wireframes, Prototypes, Visuals, Illustration
The Problem
Printing/Sharing Pages
Clinicians were frustrating with going back and forth with adding and making edits to nodes/tumors on the 3D model.
Constraints & Collaboration
Explore New Ways To Edit Node/Tumors
Owner wanted to use the tools responsiveness in adobe illustrator as a reference for the node/tumors card.
Prioritize 3D Model
PM wanted to prioritize the 3d models to simplify the workflow for Clinicians when creating nodes/tumors.
Explorations & Iteration
Nodes Tool Iterations
The nodes tool went through different iterations for clinicians to make edits to the nodes.
+ Initial Node/Tumor Design
All of the tools were on the left side and immovable. Clinicians had to go back and forth from the selected node/tumor to the tool bar.
1.1 | Initial Design
.jpg)
+ Tool Card Iterations
I explored different ideas in reducing the distance the mouse had to travel to make edits to the node/tumor.
2.1 | Node/Tumor Edit Iteration
.jpg)
2.2 | Image Selection Iteration
.jpg)
Final Solution
Print/Share Card
Clinicians liked how easy it was to select and de-select the content they needed to share with the patients. It removed the hassle of having to print out each page individually.
3.1 | Print/Share Card
.jpg)
3.2 | Annotated Print/Share Card
.jpg)
+ Annotations
Note #1
Icon opens up the full screen and clinician can continue using the tools card.
Note #2
Quick navigation from node/tumor to another. No need to move around the screen clicking.
Note #3
Quick way to add nodes and tumors.
Note #4
Quick undo and redo.
Note #5
Quick way to trash nodes and tumors they don't need.
Note #6
Clinicans can make quick handwritten notes.
Note #7
Clinicians can increase/reduce the size of nodes and tumors.
Note #8
Quick way to choose diffrent angles of the 3d model.
Note #9
Nodes/tumors that clinicians can drag around manually to the correct area.
Takeaway
PRD Importance
Reviewing the PRD after iterations were made would assist in validating the user's pain points.
Early PM/Stakeholder Feedback
It was easy to get lost in a new design direction, but sharing early iterations revealed missed opportunities and misaligned solutions.