Empowering patients with step-by-step guidance for safe injections

Designing a mobile step-by-step guide to help patients use the Stelara One-Press injectable device. Self-injection can be unfamiliar and challenging, so my goal was to create an intuitive, engaging, and accessible experience that reduces stress and errors.


Collaborating closely with the J&J Brand Design and Product Development team, I conducted research, usability testing, and iterative design to create a clear, interactive guide that improves patient confidence and adherence.

My contributions:
UX design lead, visual design

Timeline:
June 2022 – October 2022

Key insights

Several hundred Tremfya One Press PQCs were analyzed to determine patterns in device usage and problems. These were taken into consideration during initial wireframe creations.

Patients noted that they were looking for something easily accessible whether via a google search, a downloadable app, or the website. Good visual design was identified as a way to help with information wayfinding, injection instruction understanding and retention. It was also noted that making the instructions fun and interactive would benefit the experience.

Competitive analysis

I looked at internal and external examples that had similarities to what we were trying to achieve. Another Janssen brand, Tremfya, had launched a pilot AR experience (for a similar device) that allowed users to see the device, but offered little in terms of taking the user through the injection process. Other inspiration included product pages (explaining how the product works), instructional injection videos, and print material being created for the new Stelara One Press.

Wireframing

With a direction starting to take shape I began prototyping possible layouts, flows and interactions. The injection would be the focal point of the experience, but there were also device parts, preparation, and post-injection instructions that needed to be considered. Users wanted an engaging experience that would keep their attention to allow for more information retention. In trying to find the best way to present the information I created 2 prototypes to be tested for initial user testing.

Initial concept user testing

The user tests were broken out into two parts. During our sessions the users were asked to walk through each concept while myself and the team observed and asked questions throughout. To eliminate bias towards a certain concept we alternated which concept the user saw first during each test. 

The user was also given a demo device to test not only their ability to learn how the device works (based on the training experience) but to also get an idea of how comfortable they may have felt injecting themselves with the actual device upon finishing the tutorial (don’t worry - the demo device didn’t have an actual needle)

User testing questions

  • Would you ever scan a QR code to get you into the experience?

  • How would you go about learning how to use this device if you didn’t know how to?

  • Are you able to read the screen properly?

  • Is this helpful to help you get a feel for the device?

  • Was the experience clear?

  • After using this concept, how familiar would you feel with using the real injectable? 

  • Do you feel confident that you can administer this on your own? 

  • Would you want someone to show you how to do this first?

  • Would you want someone to be there to monitor this with you?

  • How do you feel about going through these experiences on your mobile device?

  • What was your favorite concept and why?

  • Which experience if any, gives you the best understanding of the device?

  • Is there another solution you would like to try?

Synthesizing user testing feedback

After the round of user testing was complete myself and the team aggregated all the user feedback from the sessions. The consensus was that the “step-by-step” format was the preferred layout and the concept that I would implement further iterations on.

Iterating on initial concepts

Feedback and recommendations for future iterations included: 

  • Users want to know what to expect before navigating through the entire experience

  • The language needs to be more specific

  • People were inspecting the device and were confused about the parts and how they worked

  • “Keep in mind”  should be at different moments in the experience vs all upfront.

  • Add more visual cues and animations that are relevant to the content shown

UI and design system

With a clearer direction towards the final design, it was time to begin creating the design system and setting up my file to allow for systematic changes. The first thing I needed to do was start defining the design system and the many UI elements that would it would be made of.

Design iteration

Integrated all the feedback from user testing and stakeholders. Gave a facelift to overall UI treatment and design system. Pushed the aesthetic from the wireframe prototype used in user testing to be ready for presentation back to key stakeholders.

Final designs

After more user testing and design refinements the final prototype was ready for hand off to the business partners and development teams. Juggling the iterations at this point in the project was one of the biggest challenges of this project. With the launch of a new device and medication come a myriad of work streams all working to get the new product released. Managing feedback from the Stelara brand team, product engineering, compliance and design strategy was a process but ultimately led to a better experience. 

Highlights of final changes:

  • Created a menu/chapter screen to help users know how far along they are in the tutorial

  • Multiple changes to copy throughout the experience to meet compliance requirements

  • Removing the auto-looping of animations and replacing with a “replay” animation button to not confuse users

  • Fine tuning of how animations and instructions are presented together

Visual design and animation

Much of the user testing had been done with placeholder illustrations from the IFU for the imagery. To enhance the visual experience I created imagery to make it look better. In order to create the animations necessary for the prototype I spliced the injector PNGs into multiple layers to accommodate the different positions the device moves to throughout the injection.

During injection

This is the most crucial step of the process. There is a lot of information and visuals all being displayed in one step and there a lot of careful consideration had to be taken. I went through multiple iterations of how the animation and text was displayed and presented.

Lift straight up

Just as important was having the user understand exactly when the full dose was administered. The most confusion and complaints were around this step of patients either not know that the full dose wasn’t done, not knowing that the handle had to be pushed all the way down, and not know that once you stop pushing that the full dose can no longer be injected.

This became one of the most engaging and interactive experiences i’ve gotten to work on throughout my career. It was exciting to get to work on an entirely new product and hear from patients the things that weren’t working in order to improve them. Collaborating with a broad team of stakeholders was a difficult process but overall led to me growing as a designer and pushed the user experience above and beyond.