Ricky Yu | GymDoc
top of page
bigcover.png

GYMDOC

Gym Healthcare Assistant

UX Design, health kiosk design

Team: Zachary Maciejewski, Ujjwal Nair, Jesse Wu

My Role: UX design, discovery research, user testing

Time: 01/2018 - 05/2018

Problem Space

 

Club sports and gym activities are a great way for students to stay healthy during the semester. However, these students are at risk of injury as they play. Most students do not have the knowledge or time to train properly for their games. And some injuries that happen during practices or games are also not properly diagnosed, with students sometimes playing through and worsening.

 

 

Solution

 

We designed a health kiosk set in the sports fields or gyms to assist students in preventing, diagnosing, treating, and recovering from injuries that may occur while doing sports. Its features are listed below:

diagnosis.png

Diagnosis

The system can walk an inexperienced student through the process of diagnosing injuries that occur in the gym or on the field. The system will provide information about the necessary immediate action need for serious injuries, including emergency contact information.

 

prevention.png

Prevention & Exercise Support

The system can suggest exercises and stretches that aid in preventing common injuries for the activity or sport that the student wants to participate in.

 

tailored.png

Tailored Information

The system can record users' profile and collect health data about their weight, heat rate etc. The system can be tailored to provide specific support for the type of the sports that users participate in. The data can also help to have a more accurate diagnosis.

 

My Contribution

 

User Research: Identified users' pain points by surveys and interviews.

UX Design: Determined the general visual style. Designed the user interface and interaction flow of exercise support and health measurement.

​User Testing: Conducted the cognitive walkthrough.

 

Approach

Conceptual sketches
Use case storyboard
​User feedback session
Ideation
High-fi
​Sketch
​Invision
Prototype
Research &
Synthesis
Interview
Observation
​Task analysis
Competitive analysis
Design
Low-fi wireframes
Information architecture
Evaluation
Cognitive walkthrough
User testing session
Research & Synthesis

In order to know better about the problem we are trying to solve, we started to collect information about our potential users and analyze the environment that they are in when they work out. We defined our users as the students who like to do casual workout in the gym and intramural club sports on campus.

 

The methods we used include semi-structured interviews with potential users, observation of the people in the gym and the training of Georgia Tech Hockey Team, and several literature reviews online.

We used an affinity diagram session to analyze the qualitative data we collected. We mainly captured the frustrations people have talked about during their interviews with us.

 

AffinityDiagram2.jpg
AffinityDiagram1.jpg

 

Major Takeaways

 

1. Most of the students don't have knowledge about injury diagnosis and how to deal with injuries.

Even on a sports team, some people admit they don't really have knowledge to deal with any kinds of injuries. Some students even say they don't think the coach would be able to diagnose the injuries, either.

Frustration

 

Don't know how to diagnose injuries and deal with emergency
Need

 

Need knowledge about injury diagnosis and how to respond to an emergency
"
I'm on the Georgia Tech Hockey Team. But I don't think you should expect us to know anything about injury diagnosis. Our coach will ask us to do some warm-up exercises but I don't really think he knows much about how to deal with an emergency situation.
"

 

2. Students usually work out in a place where injury assistance and help are not available.

In some extreme examples, people talked about they worked out in a 24/7 gym at night. Usually, they are the only person in the gym. Not only no coach is around. Not any other people are around them. Some people mentioned they worked out in a place with no mobile devices or internet connection available. These can make it difficult for them to get help if they are injured.

Frustration

 

Feel insecure and lack of support while working out alone
Need

 

Nee precaution and health support when working out in a unprotected situation
"
It's pretty convenient to work out in the gym in my apartment. It's a 24-hour gym. I usually go there after 10 pm when I finish all of my works for that day. However, I'm usually the only person in the gym at that point. No coach. No other people at all. Sometimes, I just feel a little insecure. I hope to learn some precaution exercises from the coach. But I never had a chance. I really don't know what will happen if I hurt myself.
"

 

 

3. Mild injuries are often ignored and not properly diagnosed.

  • Many players keep on playing after a mild injury since they might not realize the severity of their injury at that moment.

  • Many players who keep on playing end up worsening their injuries.

  • 911 calls work for extreme injuries, but not necessary for mild injuries.

  • The players want their mild injuries to be diagnosed but usually, they don't know how and the diagnosis information is hard to find. So, they just let it go.

Frustration

 

Want to diagnosis mild injuries but don't know how, causing their mild injuries to be ignored
Need

 

Need a quick check on the non-severe injury condition
"
I once sprained my ankle when playing soccer with my friends. At first, I could feel something wrong with my ankle but it was not severe enough for me to consider going to a doctor. And I was going to have a test the next day. So, I didn't want to spend too much time thinking about it. I thought it was not a big deal and would recover quickly. So, I continued to play. But two days later, it aggravated. At that point, I just realized my ankle swelled as hell.
"

Task Analysis

In order to better understand the scenario that the users are in, we conducted a task analysis based on the data we collected. First, we summarized the characteristics of this task.

User

knowledge.png

Lack of knowledge about precautions and injury diagnosis

Due to the complexity and multiple possibilities of the sports activities, it requires the users to have a solid knowledge accumulation in order to perform the task successfully alone. However, Almost all the people interviewed described the lack of information they had about good exercise habits when they began and the injury diagnosis knowledge.

 

spectrum.png

Different abilities due to varying degrees of injuries

 

For the most part, the users described mild to moderately debilitating injuries. They were still capable of manipulating objects, talking to people, and navigating with low difficulty in the task. But if the injury is more severe, some of the users' abilities might be partially restricted.

 

emergency_1.png

High emergency

 

Users are usually in high emergency, which requires them to accomplish as soon as possible. It also has a high risk. It requires users to perform it carefully and professionally. Or it might aggravate the injury they encounter in their tasks.

 

Environment

 

 

companion.png

No people with related knowledge accompanied

 

Users might work out alone in a sports field or a gym. Even if there are people around, they might not have the related knowledge to deal with emergency situations.

 

phone.png

Limited access to mobile devices

 

Users might not carry the phone with them when doing sports. Or they might not have access to the internet during the moment they're performing the task.

 

Flow Chart

 

 

New diagrams-01-01.png

 

Existing Solutions

 

Based on the flow chart, if the injury is not severe, people can only get injury support when either professional people are around and know how to help, or find relevant information online. However, according to the characteristics of the environment, usually they don't have people with related knowledge around. Chances of receiving injury support drop in this way.

Moreover, they might not have access to internet or mobile devices as well. Searching online is not possible in some cases. But if they are able to search, can they quickly get the relevant information? Let's analyze how well some existing websites can help them with diagnosis.

 

 

 

 

WebMD: Symptom Checker

 

WebMD offers an application called Symptom Checker. In the application, users can input their symptoms and answer a series of questions, and the system responds with a possible diagnosis. However, this system is not specially designed for physical injuries and its diagnosis process is too long. The strength of this system is that its user interface is very clear and helps users navigate.

 

Source: https://symptoms.webmd.com/default.htm#/info

Screen Shot 2018-09-17 at 9.37.20 PM.png

 

 

Diagnose-Me

Diagnose-Me asks users to take a very long questionnaire. In the questionnaire, users are asked over 90 questions relating to all aspects of their health. After the 9-page questionnaire is completed, users are presented with a thorough report with possible diagnoses. Its main weakness is the incredibly long questionnaire. One strength is that its diagnoses offer numerous graphics and visuals that help the user to understand possible illnesses.

 

Source: https://www.diagnose-me.com

Screen Shot 2018-09-17 at 9.45.28 PM.png

Based on our analysis, we found that due to information redundancy, it's very hard for users to research their symptoms online. On the other hand, even if they find existing tools like WebMD, they still don't have enough time to go through the tedious questionnaires in order to get the results. 

 

 

Persona

 

We also need to differentiate among different contexts, the users would be different in different contexts. For example, if the injured is in a lower emergency, the users are the injured themselves. They can self-diagnose their injuries by interacting with our system.

 

However, if the injured is in a high emergency (losing motor ability, bleeding without stop or in coma etc), we don't expect the injured still have the ability to interact with our system. We would assume other people around the injured can use our system to seek help and apply first-aid.

New diagrams-02.png

Here are three personas we made:

Persona-02.png
Persona-03.png
Persona-04.png
Ideation

Based on our user research, we started to conduct ideation sessions based on the following criteria:

 

1. Efficient. It can quickly help users diagnose their problems.

2. Informative. It should provide adequate information for the diagnosis and precaution.

3. Universally accessible. It should be accessible to users with various abilities under various circumstances. 

 

 

Design Alternative 1: Health Kiosk

 

  • A health kiosk that could be strategically located inside the gym or on the playing field;

  • The primary interface of the kiosk will be a graphic of the human body, where users can touch the body location to get information about exercises, stretches, or potential injuries;

  • The kiosk could also be equipped with additional sensors, such as weight and blood pressure monitors.

Storyboard1.png

Pros:

1. Large screen;

2. Allows users to not be dependent on a phone;

3. Can have task-specific sensors;

4. The human-body graphic can help users quickly select what they want;

 

 

Cons:

1. Not a personal use item;

2. Not convenient for users with mobility injuries.

The storyboard shows that the user uses the kiosk to identify his injury.

 

Design Alternative 2: Voice Enabled Mobile App

 

  • Mobile app available on smartphone or smartwatch;

  • Allow interaction with voice commands, diagnose injuries with a conversational interface;

  • Allow traditional clicking through GUI as well.

Storyboard3.png
Storyboard3.png
Storyboard3.png
Storyboard3.png

The storyboard shows that the user diagnoses his injury by talking to his smartphone.

app_img.png

The mockup of the voice-enabled app

Pros:

1. Very portable;

2. Personalized interaction;

3. More accessible (No need to move or look at the screen);

 

Cons:

1. Users might not have mobile devices while doing sports;​

2. Verbal interactions might be vague;

3. It might have trouble recognizing a large variety of accents, languages and dialects;

4. Still limited if users are under much stress and lose their voice.

​5. Users must have downloaded the app in order to use it in emergency.

 

 

Design Alternative 3: Trauma Suit

 

  • Wearable devices like a suit users can wear;

  • It uses pressure-sensitive film embedded in sports clothing to detect blunt external force;

  • It uses the film to directly display the injuries on their suit after sensing destructive external force;

  • Connected with a third-party system to document the injured areas and provide diagnosis.

Storyboard2.png

The storyboard shows after the trauma suit detected the injury, it automatically contacts the doctor.

Pros:

1. Useful for players with high pain tolerances;

2. The whole process is automatical;

3. Users can directly see their injury;

 

Cons:

1. Expensive;

2. Verbal interactions might be vague;

3. Focuses on blunt force injuries rather than a wide range of injury types;

4. ​May have to wait on an expert or a system to arrive at a diagnosis.

​5. Useless in precaution.

 

 

User Feedback Session

 

​​We asked several potential users to provide their opinions on these three design alternatives. Both the kiosk and mobile app idea received mostly positive feedbacks. However, users suggest the idea of trauma suit might look impractical and not be able to solve all of their problems.

 

So, we eventually decided to combine the kiosk and mobile app ideas together. We planned to create a system both available on health kiosk and voice-enabled mobile devices. The two devices can help overcome the shortcomings of each other.

kiosk.png

For the kiosk version, it serves the users who don't carry the mobile devices or who haven't downloaded the app on their phone.

voice phone.png

For the voice-enabled app, it serves the users who can't move to the kiosk in emergency. It can help users to have more personalizd experience.

 

However, due to the time limitation, we can only focus on the design of one device. So, we decided to focus on the kiosk because:

 

  • More reliable. Still accessible when users have no mobile devices or no app downloaded.

  • With additional sensors, the specially-designed kiosk can do body health measurement in order to provide more accurate info.

 

The voice interface is not suitable for kiosk since too much distraction might exist. So, this functional feature is scheduled for the future plan.

Design Iterations
Design Iterations

At first, we determined several features we want to cover in our project:

diagnosis.png

Diagnose An Injury

The system uses an on-screen human body to help users quickly identify their symptoms.  

 

prevention.png

Prevention & Exercise Support

The system can suggest exercises and stretches that aid in preventing common injuries.

 

user.png

User Profile

We recommend users to register in our system before their exercises and input some personal health data. The user profile can help with better diagnosis.

 

​Then we structured the features in our information architecture:

Flow.png

​Wireframes

We then started to work on the wireframes. We roughly sketched out our idea of using a graphic of the human body to help users quickly identify where they need support for. They can click the body part to get more diagnosis or precaution info on it.

 

The Flow of Injury Diagnosis

Injury 1_2x.png
Injury 2_2x.png

Users select the body part they need injury diagnosis for (head in this example)

Users select their symptoms

Injury 3_2x.png
Injury 4_2x.png

Users read the diagnosis results shown by likelihood

Users read solutions and suggestions

The Flow of Exercise Support

Exercise 2_2x.png
Exercise 1_2x.png

Users select the body part they need exercise support for (knees in this example)

Users read the exercise suggestions and pick one

Exercise 3_2x.png

Users read the exercise instructions

Other Flows and Sitemap

sitemap.png

User Feedback Session

 

We conducted a user feedback session after we finished our wireframes. We invited 5 potential users to walk through the wireframes and asked them follow-up questions. We wanted to test if they would understand how to interact with the human-body graphic.

 

The general flow of our design made sense to the testers. But they still pointed out several parts that made them confused.

 

 

Login_2x.png

Emergency Button

​In our wireframes, we only put the emergency button on the login page. Although we provide the shortcut on every page to help users quickly get back to the login page, the users still think they want the emergency button always visible to them.

 

Exercise 1_2x.png

Need Feedbacks after Selecting Body Part

The users like using the on-screen human body as a way to help them navigate. However, they feel they need some feedbacks after clicking the body part to make sure that the part they select is the one they actually want.

 

Home_2x.png

More features for daily scenario?

The users also think there should be some features they can use in the daily scenario. Since the emergency won't happen very often, they feel like they need some more common functionalities to make it more economical and useful to put a kiosk in a daily gym scenario.

 

​Redesign Ideations

We moved on to redesign based on the feedback provided by the users.

emergency.png
tailored.png

In order to make the emergency button not interrupted and tangled by other feature flows. We decided to make a physical emergency button on the kiosk. No matter where they are on the screen, this button can always work.

In terms of adding a feature for a more daily scenario, we thought about replacing the weight scale in a gym with the kiosk. We decided to put additional sensors on the kiosk so that users can use them to measure their health stats, like weight and heart rates.​ Those external data can also be used in diagnosis.

​Physical Kiosk Design

 

In order to make the tweaks mentioned above possible, we needed to design the physical kiosk.

 

 

kiosk draft.png

Weight scale

It can help with health measurement and diagnosis. 

 

kiosk_physical_transparent.png

​Screen

 

Heart rate handles

It can help with health measurement and diagnosis. It can also work as handrails to support injured people.

 

Camera & flashlight

​They help with better diagnosis.

 

Speaker

It can be used in emergency call.

 

Swipe student card to log in

 

Physical emergency button

It can stop any ongoing flow on the screen and dial 911.

 

How did we design in the final version?

 

On-screen human body interaction

 

To deal with the problems we found in wireframes, we wanted to have the user select a body part and then click on a text label that popped up to continue with injuries and exercise to that body part. We had this double step to try to and help them confirm their choice and reduce the number of miss-clicks on the body. 

 

And based on the evaluation, the visual representation of the human body helps users quickly find the part that they want to select.

 

 

Injury 1 - front.png
Injury 2.png

Linear interaction flows

 

We designed each of the three major tasks in a linear interaction flow. Users just need to press the big buttons on the home screen to start the task. Then the app will walk them through the whole process.

 

 

The flow of injury diagnosis

The flow of exercise support

The flow of health measurement

User profile and quick login

 

We connected the user health profile with their Georgia Tech student account, aka GT account. For the first time they use this app, they will be asked to go through an onboarding process, in which they need to input their health records and sports activities they usually perform. These data input can help with a more accurate diagnosis.

 

Meanwhile, in order to quickly get access to the system, users can swipe their buzzcard (student ID card) to log in to this machine instead of entering their username or password. This can be really helpful when users are in an emergency.

 

 

The flow of onboarding

Injury 1 - front.png

We made the "log out" option always visible to the users. They are always at the bottom of the screen. In this way, our design is still available for different people to use on a public device. The system will also automatically log out when they are not used for 2 minutes.

Visual design

 

We chose a very simple gradient color palette as the main style. The simplified color palettes can make the users focus on the task and won't distract them especially when the users have cognitive disabilities. We hope to use the blue color to express a sense of calmness, professionalism and caring.

icon.png
color.png

Sitemap

Sitemap-high-fi.png
Prototype
Prototype

Please feel free to click through the prototype below! (Prototyped by Invision)

Evaluation
cognitive walkthrough.png

Cognitive walkthrough

We divided the tasks we wanted to test into several steps. Then we recruited 6 UX experts to perform each task and answer questions against usability criteria.

empirical.png

Empirical user testing

The users were asked to undertake several predetermined tasks under our supervision and our team observed how users navigate through the tasks and gathered quantitative data.

a.    Users will be told that they are in an emergency situation and have to find and press the emergency button on the kiosk. Time Expectation: ~<10 Seconds
b.    Users will be told that they are new users and need to complete the kiosk onboarding process. Time Expectation: ~<2 Minutes
c.    Users will be told that their friend has a head injury with a printed list of symptoms. They will need to find a possible diagnosis. Time Expectation: ~2 Minutes
d.    Users will be told that they want to find support for a particular exercise and need to find it on the kiosk. Time Expectation: ~<3 Minutes
e.    Users will be told that they need to take their heart rate form the kiosk health monitor system: ~<10 Seconds

naturalistic.png

Naturalistic user testing

We had team members observe how users interacted with the prototype and gathered data via note taking and ad-hoc post use interviews. We asked some subjective questions to know about their preferences and feelings.

What works?

 

  • It meets our quantitative benchmarks. And the users even performed the task even faster than what we have expected.

  • It is visually appealing. They like the blue spectrum. And they think the icons and repetitive encoding in our design made the system easier to understand.

 

 

What doesn't work?

Injury 2.png

The Two-Step Body Part Selection

Almost every user was tripped up by our body part selection steps. Since the text box was not clearly clickable, users struggled to realize how to proceed once the box had popped up.

 

Solution: We decided to add an arrow towards the right in the box, indicating that they can be clicked to proceed. (This new version can be seen in my Invision prototype)

Injury 8.png

Injury Probability Visual Cues Were Unclear

There is a bar we had that indicated the likelihood of different injuries given the reported symptoms. Only a couple of users recognized our intended meaning of that icon, with some thinking it was a toggle switch.

 

Solution: We decided to change the bars into percentage numbers. We would also use a special visual style to highlight the most likely diagnosis.

Future Plans

 

  • Add more readable visual affordances.

  • Increase the utility of personal profiles. Our users also wanted us to expand on our profile feature. They wanted the ability to clearly record device readings to track progress, and they also wanted the ability to save workouts to their phone so they could have them at other locations and as they are exercising.

  • Consult with healthcare professionals for advice and improvements.

bottom of page