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.
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:
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 & 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.
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.
You can click here to jump to the prototype that you can play with.
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.
Use case storyboard
User feedback session
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.
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.
Don't know how to diagnose injuries and deal with emergency
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.
Feel insecure and lack of support while working out alone
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.
Want to diagnosis mild injuries but don't know how, causing their mild injuries to be ignored
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Here are three personas we made:
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.
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;
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.
The storyboard shows that the user diagnoses his injury by talking to his smartphone.
The mockup of the voice-enabled app
1. Very portable;
2. Personalized interaction;
3. More accessible (No need to move or look at the screen);
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.
The storyboard shows after the trauma suit detected the injury, it automatically contacts the doctor.
1. Useful for players with high pain tolerances;
2. The whole process is automatical;
3. Users can directly see their injury;
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.
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.
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.
Want to see my audio interface design skill? Please go to Archero.
At first, we determined several features we want to cover in our project:
Diagnose An Injury
The system uses an on-screen human body to help users quickly identify their symptoms.
Prevention & Exercise Support
The system can suggest exercises and stretches that aid in preventing common injuries.
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:
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
Users select the body part they need injury diagnosis for (head in this example)
Users select their symptoms
Users read the diagnosis results shown by likelihood
Users read solutions and suggestions
The Flow of Exercise Support
Users select the body part they need exercise support for (knees in this example)
Users read the exercise suggestions and pick one
Users read the exercise instructions
Other Flows and Sitemap
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.
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.
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.
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.
We moved on to redesign based on the feedback provided by the users.
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.
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.
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.
It can help with health measurement and diagnosis.
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.
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
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.
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.
Please feel free to click through the prototype below! (Prototyped by Invision)
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 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 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.
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?
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 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.
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.