UX/UI Design, UX Research
May 2020

Creating an accessible, usable and compelling Injection Site Tracking feature that can used by all our users.

Creating an accessible, usable and compelling Injection Site Tracking feature that can used by all our users.

When Doctors prescribe an injectable medication, site rotation is one of the most important parts of taking the doses.

Injection Site Tracking is a feature designed to help users of medication reminder applications track the locations where they administer their injections. This feature was developed to address the needs of individuals who regularly require injections, such as those with diabetes or autoimmune disorders. By providing users with a way to easily track their injection sites, this feature can improve medication adherence, facilitate better communication with healthcare providers, enable personalised treatment plans, and reduce pain and discomfort associated with injections. In this case study, we will explore the development and implementation of Injection Site Tracking and the benefits it provides for users.

What is the injection site tracking feature?

Injection site tracking can provide several benefits for users of a medication reminder application. Here are a few reasons why injection site tracking is beneficial:

  1. Improved medication adherence: Injection site tracking can help users keep track of when and where they last administered their medication. This can help prevent missed or duplicate doses, ultimately improving medication adherence and health outcomes.
  2. Better communication with healthcare providers: Injection site tracking can provide users with valuable information to share with their healthcare providers. Users can easily document and share their injection history, which can help their healthcare provider make more informed treatment decisions.
  3. Personalised treatment plans: Injection site tracking can help users identify patterns in their injection site choices. This information can be used to create personalised treatment plans that take into account the user's preferred injection sites and any issues they may have had with certain locations.
  4. Reduced pain and discomfort: Injection site tracking can help users rotate their injection sites more effectively, reducing the likelihood of pain and discomfort at a particular site. This can ultimately make the injection process more comfortable and less stressful.

Overall, injection site tracking can help users take a more active role in their treatment and improve their overall medication management.

What were our requirements for the project.

In this first version of the Injection Site Tracking feature, we knew we could not tackle every pain point or issues that are faced by users needing this. We needed to prioritise down to a simple set of features that would enable as many users as possible to get the best possible use out of this. We broke these down into some simple early requirement:

  1. We would focus only on the front side of the body for now. (When we did research on the back side of the body, we noticed a lot more contradicting and varying areas that could be injected into, so this required a lot more research to figure out where the back side of the body sites could go)
  2. The sites needed to be easily clickable. (We had users that range from 18 to 80 using the application, making the sites to small to click was a definite no-go)
  3. There needed to be clear differentiation between sites in terms of when they were selected. (Not all injectable medications are created equally, some require injections 3 times a week, and some 3 times a day, we needed to find a colour system that would work with this in mind)
  4. This needed to work on large phones, as well as some of the older smaller phones that existed, this was a non-negotiable.  
  5. This needed to work across both platforms, Android and iOS.

How were other applications and teams doing injection site tracking?

During the research process, it became clear that there were some existing methods for injection site tracking in other medication reminder applications. However, these methods were not without their limitations. For example, some companies required users to manually journal their injection sites, which could be cumbersome and prone to error. Other applications had body maps that were overly complex, with too many click areas to choose from, making it difficult for users to accurately record their injection sites.

Additionally, some tracking features were difficult to understand and use, which could make the process of tracking injections more frustrating than helpful. These insights helped shape the development of the Injection Site Tracking feature, which aimed to provide a user-friendly and intuitive way for users to track their injection sites.

Some of the other applications that I found during my research phase

The body map. Issues and problems we faced along the way.

One of the major challenges we faced during the development of the Injection Site Tracking feature was creating a body map that was user-friendly and accessible. One of the primary concerns was how to fit the body map onto the screen without requiring excessive scrolling. This was important not only for usability but also for accessibility, as scrolling could interfere with voiceover features.

Additionally, deciding how to place the injection sites on the body map posed a challenge for developers. We had to choose between floating the sites over the spots or using strict x and y axis points. Finally, creating a gender-neutral body map was a priority for us, as we wanted to ensure that the feature was inclusive and accessible to all users regardless of gender. This required careful consideration of the body's layout and shape to create a map that accurately represented a neutral body shape.

As shown in the image above, we took a layered approach to develop the body map for the injection site tracking feature. Image A depicts the body map, while Image B shows the body map with potential injection site locations marked out. Finally, Image C illustrates the red line measurements used by developers to lay out the tiles on the body map. This approach helped us overcome some of the challenges we faced, such as how to best display the body map on phone screens and how to ensure that injection sites were accurately placed on the body map. By taking a systematic approach to designing and implementing the body map, we were able to create a user-friendly and functional feature that met the needs of our users.

Accessibility in your colours and application, means not only a good experience for those with colour blindness, but all users.

Accessibility was a key consideration during the development of the Injection Site Tracking feature. We recognised that ensuring a good experience for users with colour blindness would also benefit all users. As such, we avoided using a simple traffic light colour system of red, green, and yellow, as these colours can be difficult to distinguish for those with red-green colour blindness.

Instead, we researched pattern design and drew inspiration from heraldry, which uses distinctive patterns to differentiate between colours. This led us to use patterns over the top of the site selectors, making it easier for users to differentiate between injection sites. Additionally, we placed a heavy focus on Voiceover (iOS) and Talkback (Android) accessibility for this feature, ensuring that everyone would have access to and be able to use the feature, regardless of their ability.

Once we had determined the best approach for ensuring accessibility, we proceeded with designing various states to show the different possible injection sites that users could select. By designing with accessibility in mind, we ensured that everyone had equal access to our product, not just a select few. It was crucial for us to make this feature as accessible and durable as possible.

To achieve this, we used a colour-coded system with clear visual indicators for each injection site, ensuring that it was easy for users to track their injections over time. For users with colour blindness, we incorporated distinctive patterns into each tile to differentiate between colours.

Below is a breakdown of what each tile stands for:

  • Green; Last injection here was 8+ weeks ago
  • Yellow; Last injection was 3 to 8 weeks ago

  • Red; Last injection was within the last 2 weeks
  1. Unselected
  2. Selected
  3. Last selected
  • a. No accessibility
  • b. Accessibility enabled

Furthermore, we placed a strong emphasis on testing and implementing VoiceOver (iOS) and Talkback (Android) functionality, ensuring that our users with visual impairments could accurately track their injection sites. The result was a feature that was accessible and user-friendly for all users, regardless of ability.

Final thoughts on the Injection Site Tracking feature.

In conclusion, while creating the body map for injection sites, we identified several areas that could be improved in V2. First, we recognised the need for a better illustration of the body map. Secondly, we realised that we only focused on the front of the body and neglected the back, which can be rectified by including the backside of the body in version two.

Additionally, we could also consider including drug-specific injection sites to provide users with a more customised and personalised experience. As a team, we are committed to improving our product and incorporating feedback from users to ensure that we continue to provide accurate and comprehensive information on injection sites.

Overall, working on this project has been a rewarding experience for us. We were able to create a product that is informative, user-friendly, and accessible, and adding accessibility features was particularly exciting for us. We are proud of what we achieved as a team and are pleased that the feature required very little bug fixing, which helped boost our morale.