GlucoMate: An AR Experience to simplify glucometer training- AR UX case study

An AR UX Case Study

This case study outlines the design process of an augmented reality app concept that aims to help users master glucometer usage effectively by providing an interactive and engaging experience.

Objective:

This case study outlines the design process of an augmented reality app concept that aims to deliver an interactive and engaging learning experience, helping users to master glucometer usage effectively.

The Problem:

Many individuals with diabetes struggle with the proper use of glucometers due to confusing instructions and a lack of hands-on training. This leads to inaccurate readings, affecting blood sugar management and overall health. To address this problem, an engaging and intuitive app that simplifies glucometer training is required. It should provide clear, step-by-step guidance and interactive practice to ensure users can monitor their blood sugar levels confidently.

Design Process:

Step 1: Research

My first step was to analyse the existing solutions and identify common challenges users encounter with glucometer training. I also conducted interviews with healthcare professionals, individuals of various age groups who have used glucometers, and caregivers of family members with diabetes. These discussions provided valuable insights into their pain points with current instructional guides, their emotional responses to training, and their preferred learning styles. Additionally, I reviewed AR instructional manuals for various products, incorporating best practices into the design of the glucometer training app. This process allowed me to pinpoint gaps and opportunities for creating a more effective and user-friendly training solution.

Secondary Research

As part of this step, I explored how AR is being utilized to make user guides more interactive and engaging. Here are some screenshots from some AR instructional manuals:

Insights I gained by studying other AR instructional manuals:

1. We can superimpose a 3D version of a specific object onto a real-world scene, effectively illustrating a process. This also clarifies the precise positioning of the object. This technique enhances understanding by visually integrating digital models with their real-world context, providing guidance on placement and functionality.
2. Using gradients for containers can enhance the readability of text.
   Bright colours for arrows and other indicators can draw the user’s attention more effectively.
3. 3d objects can be animated to explain an object’s functionality better.
4. 3d hands can be used to demonstrate how the user should position, place or move their hand to perform a certain process.

I also examined AR’s applications in healthcare and recent advancements that could enhance my app. Additionally, I gained insights into using glucometers and reviewed existing user manuals, which helped me identify potential pain points users might experience.

Primary Research

I conducted user interviews with healthcare professionals, individuals of varying age groups who use glucometers and caregivers. I prepared a set of interview questions covering users’ backgrounds, current training methods, technology comfort, feature preferences, and usability feedback. Some questions included:
What was your first experience with using a glucometer like?
What were some factors which helped you understand the instructions better, if any?
What were some challenges, if any, which you faced when reading the instructions?
Where do you use your glucometer? In which setting are you most comfortable using it?
Do you use the glucometer alone or do you take someone’s help when using it?

Step 2: Define

I used affinity mapping to cluster similar feedback and insights using digital sticky notes to create a visual map. This process helped me identify key patterns and prioritize features, ensuring that the app effectively addresses user challenges.

Insights I gained through Primary Research:

1. The most important insight I gained from conducting the interviews is that using a glucometer can be a frightening experience. The painful process of pricking oneself can heighten anxiety, especially for individuals who are already grappling with feelings of fear, frustration, and sadness related to managing a chronic health condition. I realised that the design has to account for these emotional responses and should offer the following features:
a. Offer step-by-step guidance to make the process seem less daunting
b. Interface should be simple and easy to navigate
c. The AR simulations can allow users to practice without pressure, helping them gain confidence before using the actual device.
d. Provide prompts to remind users to take a deep breath.

2. Providing clear, visual guides can be extremely beneficial, particularly for users who may not be fluent in English.

3. While glucometers can be used by individuals of all ages, they are most commonly used by older adults, particularly those with diabetes. A lot of older adults find new technology intimidating. An app that provides step-by-step guidance helps demystify glucometer use, making it more accessible. By equipping older adults with the skills to manage their diabetes, the app promotes independence and improves their quality of life. Keeping this in mind, I tried to design an interface which is accessible to this segment of the population by using large fonts, high-contrast colours and lots of visual aids.

User Persona
Using the insights from my primary and secondary research, I created 2 user personas to capture a detailed representation of their needs, challenges, and motivations.

User Journey
I mapped out the steps a user takes from start to finish while learning how to use a glucometer using scenarios. Here are the user journeys for the 2 personas:

This process helped me understand the critical points in a user’s journey and the various pain points which the user experiences which can be addressed by the application.

Step 3: Ideate

I worked on the features, functionalities, and design elements that will enhance the user experience and effectiveness of the glucometer training app

User Map

I designed a user flow that outlines the steps a user would follow to conduct a glucose test using the Glucomate AR application.

Storyboarding

I created a visual representation of how users will interact with the app through various stages of their training.

I also created a spatial layout to plan and ensure that the AR elements are both functional and intuitive.

Simulation

3d assets were procured and the scenes designed during storyboarding were created and rendered from Blender. The following are the flows:

Preliminary survey:

Equipment Check:

Identifying Point of Prick:

Lancet Insertion:

Glucose Test Result:

Typography

I used AR One Sans for the text in my AR application

AR One Sans offers clear, legible text optimized for augmented reality, ensuring high readability in various lighting and screen sizes. Its minimalist, sans-serif design reduces visual clutter and scales well for different contexts. The font enhances user experience with its sharpness and consistency across AR devices, supports multiple languages, and is accessible to users with visual impairments.

As the target audience also includes the older generation this font was carefully chosen as it is well-suited due to its clear, legible design. The font’s large, simple characters and high readability ensure that text is easily readable for users with varying levels of vision. Its high contrast and clean lines reduce eye strain, making it more comfortable for prolonged use. Additionally, the font’s adaptability across different sizes and devices helps maintain clarity, enhancing the overall accessibility and user experience for older adults in AR environments.

Accessibility

Several accessibility features were implemented such as high-contrast colour schemes for better readability, intuitive and consistent layout, contextual help, provision of descriptive labels for all icons and images, and large touch targets.

Heuristic Evaluation

I assessed the usability of my first draft of AR designs based on established principles. The following are some changes I incorporated into the app after the evaluation:

Match Between System and the Real World:
Use language and symbols familiar to users, and design AR instructions that align with real-world glucometer interactions to avoid confusion.

User Control and Freedom:
Provided easy ways for users to undo actions, navigate back, and exit AR modes, allowing them to correct mistakes and explore freely. Example, back and close were provided in the app so that the user can navigate easily.

Consistency and Standards:
Maintain a consistent design and interface throughout the app, and follow standard conventions for AR interactions and navigation to make the app intuitive. The following patterns were used:

The hex color code #06635A represents a deep teal shade and has been used as the primary colour. It can be considered good for AR (Augmented Reality) and accessibility for several reasons:

1. Contrast and Visibility: #06635A contrasts well against lighter backgrounds, enhancing visibility and readability in AR environments. High contrast is crucial for ensuring that AR elements are easily distinguishable and readable for users, especially when interacting with virtual objects overlaid on real-world scenes.
2. Colour Accessibility: This deep teal colour is distinguishable from many other colours, making it a good choice for users with colour vision deficiencies. It’s often effective when used alongside colours that are different, helping to ensure that important information remains accessible.
3. Aesthetic and User Experience: The deep teal colour is visually calming and can create a professional and clean look, which is important for user comfort and focus. It helps reduce visual fatigue, which is beneficial during prolonged AR interactions such as learning to use the glucometer.

A gradient using hex 333333 at 37% to hex 333333 at 42% has been used for all containers having content and for the back and close buttons.

1. Reduced Visual Clutter: Gradients can smoothen transitions between elements, reducing visual clutter and making AR interfaces appear more integrated and less jarring.
2. Focus and Attention: Gradients can be used to draw attention to important AR elements or call-to-action buttons by creating a visual emphasis that stands out against a uniform background.
3. Reduced Eye Strain: Gradients can reduce eye strain by providing a softer visual experience compared to solid, high-contrast colours. This is beneficial for users who will interact with the AR app for extended periods.

The colour #F4FF62 has been used for indicators and arrows.

1. High Contrast and visibility for ageing eyes: As people age, their eyes become less sensitive to light and contrast. The bright yellow of #F4FF62 offers high visibility, especially against most real-world backgrounds.
2. Easy to Spot in Various Lighting Conditions: The colour is bright enough to be noticed in low-light and brightly-lit environments, ensuring older users can easily identify important indicators regardless of lighting conditions.
3. High Contrast: Yellow provides good contrast against darker backgrounds or complex real-world textures, ensuring that AR indicators remain easy to locate.
4. Quick Recognition: Bright yellow is generally associated with warnings, directions, and attention. This familiarity helps older users quickly recognize and understand the function of indicators without much cognitive load.
5. Non-Ambiguous: Yellow is neutral, so it avoids the confusion that may come with other colours that have strong cultural or contextual meanings (like red for danger or green for go). This simplicity can benefit older users who may be slower to process complex visual cues.

Recognition Rather than Recall:
Used recognizable icons and visual cues for AR guidance. I also provided features to minimise the need for users to remember information. For example, I provided users with an option to look again at the image which contains the red dots where the users are asked to prick their fingers. This will be helpful to jog their memory.

Error Prevention:
Designed the app to prevent errors by offering clear instructions and real-time feedback on user input.

Prototyping:

I created an interactive experience of the GlucoMate AR app using Adobe Aero.

The various prototypes can be accessed here:

Equipment Check

Identifying point of prick

Lancet Insertion

GlucoMate: An AR Experience to simplify glucometer training- AR UX case study was originally published in Dtalks on Medium, where people are continuing the conversation by highlighting and responding to this story.