Funded by a limited grant, we were asked to work with the existing app to add new features and update the UX to better suit the user’s needs. The new features included:

• Any time pain tracking
• Advice on how to manage pain
• Improved point system and game play

The original developers of the app approached the concept from a strictly functional and technological standpoint to bring the SickKids research team's concept to a prototype level. In updating the design, our approach was to enhance the functions by making the experience joyful and more usable for real world applications beyond the prototype need.

The research team's goal was to test the updated app with real users and publish their findings in medical journals with the aim of furthering the gamification of healthcare tools for children.

Process

As design leads, our role involved content gathering and developing interaction design elements as well as establishing visual design direction and overall project management.

DISCOVERY
We used the original app’s premise of tracking pain to earn points and police badges as a starting point for our expert analysis. We conducted a Landscape Review and looked at a variety of existing apps to set the baseline for the new design.

Our main learnings from the Landscape Review were related to identifying a visual style that the kids would be comfortable with. It needed to build a level of trust and delight that would help them see beyond the fact that they're using the app to track their pain. 

We built user profiles and focused on two primary groups:

1. New patients who would use the app every day
2. Patients already in treatment who would use it less frequently

DESIGN
We created two mood and style boards. The first was close to the original app’s look-and-feel with realistic photos and a 1940s-detective-agency style. The second used vector illustrations with a more flat, playful and bright colour palette. SickKids tested both designs and found that kids gravitated more towards the latter. 

Once we determined the look-and-feel, we started wireframing and introducing the new features. We added a much-needed home screen as a game-status and navigation point. We included an introductory “walk-through” feature to teach kids how to use the app. By contrasting colours and sizes, we prioritized key action items, enabling users to quickly find what they need. We worked with a development team to help realized our proposed designs.

The most unique aspect of the project was that we were directly connected to a patient group. Most projects allow only a limited time with our users due to budget and logistical constraints. But in this case, at critical points throughout the design and discovery phases we were able to rapidly get feedback from our users because the project team (nurses) were in direct contact with them.

Challenges

When we were originally tasked with the project, the ask seemed like a much smaller endeavour: add new features and update the look and feel. Once we began the project, we realized that there was actually much more to it. In order to add the new features and make the app ready for extended use beyond the two-week research period that the original app was designed for, we discovered that there were fundamental algorithmic flaws that needed to be ironed out. The gameplay needed to have  a point system that would continue to keep the players engaged in tracking and monitoring their health. We also had to seamlessly integrate the new “Manage Your Health” section of the app into the user experience without making it feel like an afterthought.

We addressed these special scoping circumstances by ensuring that we were transparent with the client about our findings. Bringing them along, asking questions and educating them with what we knew added a layer of additional coordination to the project, but helped ensure a smooth workflow and efficient problem solving.

Key Takeaways

Use research to guide concept decisions.

Our Informed Design process tends to steer clear of the “present three concepts and let the client choose” approach. Instead through a collaborative research-driven approach, we let the research findings guide the content and concept. Our clients trust our recommendations for the direction of the design because they see the value and validity of the process.

Engage the user throughout the process. 

Understanding your users is like ammo for the design rationale. Then conversations are more about “what works for the user” rather than “I like blue”. When it came time to update the visual design concept for this project, we shared two mood board options with a group of patients and preference tested the concepts. Their input helped us refine the theme and establish a new, more relevant look and feel for the app.

Work with an expert on the client side. 

Pivot has worked with Sick Kids Research teams before, but each team’s individual goals and grant requirements are so different it’s almost like working with a new client each time. In this case, the client (nurse/academic and her research team) was heavily involved in the project because it was tied to her personal research grant. As subject matter experts and original creators of the concept, they were integral to understanding the project. 

Set expectations early on and communicate regularly with client and collaborators

Building an app requires time and a lot of key collaborators. Though everyone doesn’t have to have equal involvement all the way through, it is still helpful to have key touch points at intervals throughout the project so that all players can hold each other accountable. It’s also important to set expectations about how you work early on and then reiterate them at every key meeting. This way you can ensure that you are delivering what is expected.

Always consider clarity and accessibility.

The SickKids Research Team had already conducted extensive research and testing with the content design of pain scales when we were brought onto the project. We made sure to leverage their knowledge to better understand the various contexts of use of the patient experience, and made our own recommendations for how to make the visual design more accessible.

For example, the previous visual design of the pain sliders included a “volumetric” treatment where the slider used a triangle design to show where one side of the scale was “more” and the opposite side was “less”. This was important because sometimes small children do not know the difference between “more” and “less” in terms of words on a page, but seeing that volumetric increase visually is a good indicator for them. Our recommendation for improvement was to add colour to the scale. So in “pain” scale instances the slider used a gradation of red where the deeper red was used on the “more” side of the scale. On ‘preference’ scales, we used a gradation of blue or green where the deeper colour was the “more” side to indicate a positive connotation rather than a negative connotation. This helped to make the questions and their resulting answers more accurate. 

Result

By focusing on providing a strong user experience, which included iterative testing and gathering feedback throughout the process, we created a playful look and feel and updated gameplay that young patients love. The new features give kids real-time strategies to better manage and cope with their pain while allowing nurses to better monitor and care for their patients. This app proves that this new way of interacting with pediatric patients to gather usable information for better treatment is possible and could be critical to complete the circle of care in the healthcare experience.

“We were so impressed with Pivot’s work. It’s a great example of how we can partner to design ‘out of the box solutions’ to improve healthcare for vulnerable youth.” 

Jennifer Stinson, Project Lead
RN-EC, PhD, CPNP Scientist, Child Health Evaluative Sciences The Hospital for Sick Children Associate Professor, Lawrence S. Bloomberg, Faculty of Nursing, University of Toronto

Credits

Ian Chalmers RGD, Principle, Pivot

Iffat Jokhio RGD, Lead User Experience, Visual & Concept Design, Pivot

Karen Ha, User Experience Designer, Pivot

Lauren Levy, User Experience Designer, Pivot

Torey Taferner, Client Relations Director, Pivot