New look for learning tool in VR!
EMR Tablet
TLDR! Gimme the short version!
Lumeto is a company who creates training VR for healthcare. I was tasked with improving a single screen but ended up revamping the entire tablet interface in VR, delivering a fresh design that prioritizes user needs while maintaining consistency with the current branding.
Tools:
Figma
Jira
Meta Quest 2
Timeline:
Sept. 2024
Approx. 2 weeks
Feature released Dec. 2024
Team:
Just me!
Some Background:
Electronic medical records (EMRs) are digital representations of traditional paper patient charts that document a patient's medical history. In virtual reality (VR), a tablet is available for learners to access these records.
How did it start?
I was given a task to redesign the following files screen where instructors can add their own documents to be shown in the tablet be more user friendly:
Patient Files Page
Immediately some things catch my attention:
No pressed/hover state for the side menu...
Lots of padding between words and button of side menu
No space between images vertically
Could have more padding from sides of tablet to content
BUT! Before continuing, I took a look at the other screens of the EMR tablet to keep the designs consistent as they weren’t following any design systems for this VR product yet. Here are the following screens that were used:
Patient Info Page
Consult Specialist Page
Call a Code Page
MAR Page
^ Oops, it seems that Call a Code doesn’t do anything at the moment...
Seeing this, I decided that an overhaul of the current designs might be nice given the inconsistent nature of the designs as opposed to just changing one screen.
...But I ran into some issues immediately while designing...
VR Challenges
Designing in 3D is different than 2D and the biggest hurdle for me was:
user friendly button sizes.
they have to be bigger to accommodate for hands and raycast
they depend on how far the user is from the interface
Side Navigation Bar
First I started with the side navigation bar since this would be consistent through every screen.
Added what this VR device is with the name
Added hover & pressed state for visibility
Call a code ended up just being a pop up
Used colours consistent with web portal design system
Included icons to visually show the different tabs
...That looks like this over an existing screen!
Patient Info
Patient Info should have all personal details related to the patient. This is usually done with physical copies on paper so I tried to imitate that design language in the tablet as well through the “folder look” at the top!
Patient Files
I also quickly added some spacing between the images for files and added titles for users to understand what the images are.
Consult Specialists
For this tab, I added a pressed state and dialogue for confirmation when pressed. I also spaced things out a bit more!
MAR
MAR or Medical Administration Record is where users check off if the patient has taken medicine. I made the process more user friendly and made some UI changes as well!
In VR!
This design actually got released in December of 2024 and you can see it for yourself in VR! If you don’t have a headset though, not to worry, here’s a video of the new tablet in action!
Thanks for reading!
Want to work with me? Let’s get in touch!