2024
Age Adjuster Project
Age Adjuster allows users to calculate their physical health ages based on the health data they provide.
"Age is just a number!"
Yes, and surprisingly, it doesn't usually equal to your body's age. Age Adjuster is a new feature that allows users to see how their daily habits and body measurements can affect their physical age by asking for their health information such as blood pressure and cholesterol levels.
Client /
MediResource
ROLE
Product Designer; Accessibility Design, User Experience Researcher; Engineering hand-off & QA
DURATION
~2 weeks
TEAM
1 designer, 1 front-end developer, Back-end engineering team.
Project Goal
The goal is to enhance user engagement and promote healthier lifestyle choices by allowing users to dynamically update their estimated health age based on behavioral adjustments, such as their blood pressure and cholesterols, thereby empowering individuals to track and optimize their overall health and well-being.
User Pain Points
From the monthly survey analysis, I pinpointed three primary issues with the filter function based on user feedback:
1. Interactivity:
Users were unable to provide a range when they did not remember the exact value.
“I remember my doctors talked about my range... but I don't remember the exact value.”
2. Visibility & Cognitive load:
Users found the layout of the question to be misleading and sometimes ignored the option of "don't know/don't remember“
“I didn't notice there was an option of not remembering the value so I just said my doctor hasn't checked my value.”
3 . User Engagement:
Users found the current question style to be boring and less intended to engage.
"Completing this survey makes me feel like I'm doing homework."
Ideation
My ideation progressed step-by-step:
-
First, I thought of the efficiency of users selecting an option. Whatever range they might select, the ranges need to be obvious and straightforward, leading me to use a color code system.
-
Next, I saw the importance of giving feedback when users selected a certain range - the users should be given an approximate value when selecting the range.
-
Eventually, I recognized the potential for a slider - it's easy to navigate and offers a user-friendly and engaging way to select a range, making them a great option for various applications, including selecting age ranges for features like the Age Adjuster in health assessment tools.
From here, I drafted multiple ideas:
After discussions with my team, I've decided to move forward with the slider design, based on the following reasons:
1. Visual Representation: Sliders provide a visual representation of the range being selected, making it easier for users to understand the span of values they're choosing from. This visual feedback can enhance user comprehension and decision-making
2. Ease of Use: Users can simply drag the slider handle along the track to set their desired value within the range. This interaction is straightforward and requires minimal effort, leading to a smoother user experience compared to typing in specific values or using dropdown menus.
3. Encourage Engagement: One of the issues that our feature faces is the low engagement rate. By gamifying the process and adding interactive elements, we hope it will encourage engagement.
In our peer review with the developers and Quality Assurance members, we collectively agreed that the version with the slider was the best choice. This option was further verified by our user testing.
Prototyping
To better understand how the design works and give stakeholders a visual representation of the feature, a clickable prototype was developed.
In order to keep the flow nice and neat, I’ve mainly used the same mild transition effect for every screen. For ease of testing, I have also built the option to jump to dark mode and test a different set of values (Cholesterol).
Additionally, to mimic the most realistic experience, I have also built the previous page for the prototype (the question page). As a matter of fact, by having the original question page, we received more feedback and advanced the iteration further.
User Testing
Challenges of remote mobile testing
In order to observe user micro-interactions, it was important for the test to be moderated. However, given the remote work environment, the most practical method was remote testing.
With limited time and resources, finding the best way to conduct remote mobile testing was a challenge. I settled with the “laptop hugging” method, where users pointed their laptop webcam down towards their phone.
Using this method I could observe hand gestures, scrolling, and other tapping movements. The tradeoff is the inability to see participants’ facial expressions, which I tried to make up for by probing with follow-up questions.
I tested the high-fidelity prototype on 3 participants. The participants were chosen based on our principle of being inclusive, diverse, and accessible. The task for this prototype was to input a range for their blood pressure/cholesterol. Everyone was able to complete the task. There were some points where the participants took some time or clicked on other things but were still able to figure it out without guidance. I tested the participants from the following 8 perspectives:
-
Ease of Use:
-
On a scale of 1-10, how intuitive was it to use the slider to adjust your blood pressure/cholesterol level?
-
Did you encounter any difficulties in interacting with the slider?
-
How did you feel about the OR option here? How would you navigate if there’s no “OR”?
2. Precision and Control:
-
How accurately were you able to set the desired value using the slider?
3. Feedback and Visibility:
-
Was the feedback provided by the slider clear and informative?
-
Were you able to easily see the current value or position of the slider?
4. Accessibility and Responsiveness:
-
Did you find the slider easy to interact with using different devices (e.g., mouse, touchscreen)?
-
Did you find the content to be difficult to read?
5. Clarity of Labels and Markings:
-
How did you feel about the labels to help identify the different values or increments on the slider? (easy to understand? confusing? etc.)
-
Did you find the steps to adjust your blood pressure/cholesterol to be efficient? If not, please explain why.
6. Error Handling and Recovery:
-
Did you encounter any errors or unexpected behavior while using the slider?
-
How easy was it to recover from any mistakes or misinterpretations when using the slider?
-
Compared to other methods of input (e.g., drop-down menus, text input), how satisfied were you with using the slider?
7. Suggestions for Improvement:
-
Do you have any suggestions for improving the functionality or usability of the slider?
-
Are there any additional features or enhancements you would like to see implemented with the slider?
Based on those questions, I developed a user testing heat map to assist understanding where the user clicked and what information it speaks to me.
User Testing Heat Map
-
Overall Experience - the users are able to navigate around the experience pretty easily and the user journey is smooth
-
Slider - The most interactive spot is the slider
-
Users’ first reaction to the slider was to slide, which is a great indicator of how the sliders should operate.
-
-
Checkbox - Users RARELY interact with the checkbox, and they are only interacting when the checkbox is being asked during the interview
-
Takeaway:
-
we need to make the “idk, idr” whole box clickable
-
when users mistakenly click “idk, idr”, they will be able to reselect the slider by clicking any range in the slider.
-
In conclusion, the usability test was quite satisfying. The general flow proved to be viable. I made a few fixes that aimed at facilitating the flow even more.
Iterations
Based on the feedback I received from the user testing, we decided to revise where the slider is located. Instead of putting the sliders as an option only accessible when a user has to select both "Yes, my doctor has measured my value" and "I don't remember the exact value", I am changing the options to four, and when the user selects "yes and I remember the range", he/she will have access to the sliders ready.
Dev Hand-off
From the UX perspective, seamless developer hand-off is crucial for accessibility design. Ensuring all users, including those with disabilities, can interact with our products requires detailed documentation and clear guidelines on color contrast, keyboard navigation, screen reader compatibility, and alternative text. By collaborating closely with developers and leaving notes on design files, we ensure our accessibility features are accurately implemented, creating inclusive digital experiences that empower all users.
Key Takeaways
-
Create a well-organized project plan. With so many issues to consider, a good strategy will prioritize on what’s needed for the MVP and keep track of backlogs.
-
Understand tradeoffs in decision-making. Knowing when and why to use a particular tool or research strategy is part of the critical-thinking needed to deliver successfully.
-
Use existing patterns to decrease cognitive load. Spending time designing a unique interaction for a common function isn’t necessary if users already expect it to work a certain way.