Remote Medical Conferencing

Overview

Problem

Our client is a company that enables clinicians to deliver real-time medical guidance, support, and collaboration, regardless of physical distances. Healthcare professionals are focused on patient care and need no distractions or inefficiencies using technologies at work.

The client wants to enhance the visual appeal as well as user experience navigating through their telemedicine conferencing platform.

For copyright reason, the logos and company names are blocked out. Instead we created a placeholder logo and company name, Iris.

My role

For this project, I served as Design Team Lead & UX/UI Designer.

  • I took the lead in competitive analysis, interviews, testing, and research synthesis

  • I facilitated communication between design team and client and delegate tasks to team members

  • In the design phase, I served as Designer and Prototyper

Solution

We implemented responsive and interactive designs to enhance user engagement and streamline navigation, making interactions more dynamic and intuitive. We also implemented additional features as well as improving UI elements and accessibility.

Outcome

Through research and testing, we seamlessly integrated new features and functions, ensuring a more user-friendly experience for our users. We gathered qualitative feedbacks through surveys to measure user sentiment of our redesign. Quantitatively, the task completion rates have increased by implementing the changes.

 

100%

100% of users finished the tasks of navigating view options, adjusting settings, and accessing features within 5 minutes without any trouble

 

100%

Based on the result of the surveys, all users liked the platform and would recommend it to coworkers and medical professionals

 



Project Plan

The company’s priority is to improve the interface a single video call page. Our client emphasized on improving UI elements and overall aesthetic. Due to time constraints, we decided as a team to exclude information architecture and personas from our deliverables and focus on UI itself.

 
 
 
 
 

Competitive Analysis

Objective

Competitive analysis will allow us to assess our competitor’s strengths and weaknesses, and relate what we’ve learned to our own design process. We want to redesign the interface to be user-friendly and easily navigated, so we chose two widely recognized conferencing competitors, incorporating elements and user-friendly patterns to create a familiar and seamless experience for our users.

Approach

  • Analyze how 2 indirect competitors solve similar business problems

    • The goal of our own product is to improve product functionality and intuitiveness

 
 

Elements learned to incorporate to our own designs

  • Effective organization utilizing sub menu options

  • Bottom stationed menu bar including high priority action items

  • Color accessibility and clear labels for iconography

  • Intuitive layout organization while maintaining simplicity for universal use

 

Exploratory Usability Testing

Objective

  • Exploratory Usability Testing at the early stages of design allows us to evaluate the existing product and discover common user pain points

  • We will be testing participants on the call platform. It can help surface

    • Users expectations of the site

    • Users ability to distinguish between elements of the page

    • User value of the functions the site presents

Approach

  • Test script focuses on giving tasks to allow participants to explore the interface of the meeting room call page

  • 1 on 1 testing with five participants

  • Affinity mapping for data analyzation 

Participants

Tasks

  • Start a call on the platform

  • Navigate and switch layout options

  • Adjust settings within each screen

  • Open chat box and send a message

  • Upload an image to share


Common pain points voiced by participants

 

Data Analysis: Affinity Mapping

Things we’re keeping

  • Ability to select different arrangement of the screens

  • Settings menu within each participants’ screen controlling participants’ view

Pain points we’re fixing

  • Icon confusion

  • Overall functionality

  • Navigation difficulty

  • Color aesthetics

  • Color Accessibility

 

Competitive Analysis & Exploratory Usability Test Summary

From insights gathered from our initial research, most of the user pain points lie in the interface layout and overall organization. We'll be focusing on menu reorganization, improving UI elements, and color accessibility to redesign a more intuitive interface. We will also be incorporating valuable elements we learned from Competitive Analysis to allow the design to be adaptable and user-friendly. 

 
 
 

Design

Sketching: Crazy 8’s

Our team conducted a round of rapid sketching, each sketching out 8 variations of the most critical screen in the span of 8 minutes, 1 minute per page. A final screen is sketched out through group discussion and ideation.

  • When our design team had an ideation session, we wanted to focus on the environment the users are put in when using the product

    • For example an EMT could treat a patient on site by connecting to a wound specialist, and the EMT could be hands-free by wearing SmartGlasses while the specialist is able to complete actions like turn on the flashlight, zoom in and out, capturing images while giving guidances to the EMT

  • We realized by redesigning, it should allow the users to complete all their actions more efficiently while still maintaining all the functions of the existing interface

 

High Fidelity Mockups & Prototyping

Accessibility:

  • Our client has an existing style guide indicating required font (Century Gothic) and color palette

  • Before starting any designs the palette was ran through a color accessibility test to ensure the color combinations we’re utilizing would be universally accessible

 

First high-fidelity mockup:

  • We gathered from our research and sketches that we’re redesigning the settings menu within each screen to be controlled at a position that doesn’t limit the view of the screen

  • Moving the view option to the top right menu to allow maximization of the screens

  • Moving the stationed menu bar to the bottom

  • Moving any popup screens to the right side that can be easily controlled right-handedly

Second high-fidelity mockup:

  • We considered the function of the settings menu, and how it allows the viewer (ex. wound specialist) to directly control the environment of the participant (ex. EMT on site)

  • We decided to redesign the settings menu within each screen to allow the viewer to control the settings all at once, instead of clicking each control

First prototype (click on image to interact with prototype):

 
 
 
 

Midpoint checkin:

  • Our team has weekly progress update meetings with the CEO in the initial half of the project. At the midpoint checkin meeting to hand in our HIFI mockups and prototype, we had a meeting with the Director of Innovations & Technology. He’s given us further information on the product about required layouts and aspect ratios that’ll require some significant edits to our prototype

  • I informed the Director on the time constraints of the project, and proposed to focus on editing the prototype in the final week instead of usability testing. Our team and our client made an agreement to change the project scope for the last week

 

Final prototype:

  • We’ve added an option to allow the layout menu to be stationed if needed so the user could experience different layouts without having to click around too much

  • We’ve edited the layout options for 4 scenarios

    • 1 window: 1 remote participant (no video), 1 on site participant (16:9 HD)

    • 2 window: 1 remote participant (no video), 1 on site participant (16:9 HD), 1 medical monitoring or imaging view (16:9 / 4:3)

    • 3 window: 1 remote participant (no video), 1 on site participant (16:9 HD), 2 medical monitoring or imaging view (16:9 / 4:3)

    • 4 window: 4 participants (16:9 HD) discussion

  • We’ve also added the option to alternate screen sizes, minimize, and maximize views to allow for users to find the optimal layout utilizing responsive and interactive designs



 
 

  • The chat box has the ability to be accessed from the participants list as well as the main menu bar, and will automatically pop up on the right side of the screen

 
 
 

  • We moved the stationed menu bar to the bottom as well as reorganized low priority items to sub menus, and all elements are responsive

 

(Click to interact with prototype↓)

Press "R" to reset prototype to the start

Summary

In out final handoff, our team will provide a week of buffer time between the delivered final product to the client for their review, so there is time to request and incorporate any minor/final changes. We’ve also ensure all of the assets and progress deliverables were shared in one central drive.

To ensure the ongoing enhancement of the product, our team has communicated additional insights to the client regarding pain points identified through our comprehensive research and testing. These include assessing the utilization rates of individual menu items and exploring opportunities to streamline functionality without compromising effectiveness. Additionally, further testing to determine the most optimal layout for various scenarios, ensuring an enhanced user experience across all interactions with the product.