SurgeonMate
SurgeonMate

SurgeonMate

Created
Jan 23, 2022 2:11 PM
Description

SurgeonMate is a note taking app specialized for surgeons to record their surgeries procedure data

Industry
Health
Tools
Figma
Clients

SurgeonMate

Design
UXUI
Platforms
iOSWeb

Brief introduction to my role in this project

In this case study, I have described the process that my team and I at morphosis went through whilst designing the product called — SurgeonMate. In this project, I was one of the designer for where I was directly involved in the earlier stages of the project from discovery phase to the research & wireframes, and a little bit during the Visual design phase. However, I was moved to another project in the middle stages

About

SurgeonMate is a technology based focused on developing hardware and software solutions to aim improve current healthcare system and create entirely healthcare products. SurgeonMate has developed various products but the most notable ones are SurgeonMate glasses and SM library.

❓ Problem Statement

👉🏻
How might we design a useful user experience so that doctors, surgeons and nurse can enter their surgery notes to the library immediately with minimal information? As the schedule at the hospital can be hectic and surgeons may need to jump from one operation room to another.

💡 Solution

We decided to use the information architecture of their current site and made changes to that. Furthermore, we discussed with the stakeholder of the project who happens to be a sugeon as well regarding the minimal amount of information that needs to be added right after a surgery has been carried out. Our idea was to identify and differentiate the mandatory fields that are required to be filled out by the surgeon/nurse/doctor so that we can prioritize it.

Scroll down to know more ⬇⬇⬇

💭 Workshop

In our first step was to conduct a workshop amongst the stake holders to identify:

  • Identify the stakeholder’s project goals
  • Identify the key information needed to for surgeons to proceed quickly with their work

🔨 Wireframing

After we have conducted the workshop with the project stakeholder and have an idea of the direction. we started working on our paper sketch wireframes so that we can quickly discuss with the project stakeholder and make iterations before we move on to the high fidelity wireframes. Once we have clear direction from the paper sketch, we then move onto the high fidelity wireframes to add details to our wireframes

  • Paper sketch
Log in and Dashboard paper sketch
Log in and Dashboard paper sketch
  • High fidelity wireframes
Add patient paper sketch
Add patient paper sketch
image
image
image
image

✨ Visual Design

  • Mobile version
image
image
image
image
  • Web version
image
image

🎨 Design system

image
image
image
image
image