Connecticut Children's Medical Center | Infusion Clinic Interactive

Connecticut Children’s: Changing the patient experience for kids

CREATIVE BRIEF

Role: Senior User Experience Designer

Audience: Children 4-18

Needs: This space is an infusion clinic where kids are in need of a way to pass their 45+ minute appointment time. The activity needs to be returnable because these are typically monthly appointments, where patients continue treatment for extended periods of time, sometimes years. Treatment and parental guidance are inherent in these situations, so giving kids something that is “theirs” gives them a sense of control over their own experience.

From the doctors: Nature needed to be included because of the studies of its positive effects on health. Nothing cartoony — teen patients often feel overlooked when things are too childlike. This experience needed to be something teens will engage with, but so will the younger patients with their parents.

Screen Shot 2021-08-15 at 3.27.17 PM.png — **CONCEPT CREATION**

48 hour design sprint + two week follow up

Screen Shot 2021-08-15 at 3.27.41 PM.png

Screen Shot 2021-08-15 at 3.30.08 PM.png

This project started with a Discovery Session where the creative director, JC Hendricks, and myself attended a meeting with a team of the hospital staff to discuss their needs, patients, construction coordination, and budget. We provided several hands-on experiences for the staff to provide feedback such as image association and language positioning to create a clear design direction.

Key takeaways learned in this session:

Nature
Adventure/Journey/Exploration
Variety & Returnability
Levels of Interaction – High to Low

That afternoon we immediately began concepting and sketching. We centered ourselves around having two levels of interactivity. This lead us to a solution of a built element that patients could watch and enjoy paired with a mobile interactive that gave those with a desire for more interaction a game experience.

Several sketches were presented the following morning to the same hospital team, and collectively a tree and a mobile “create-your-own” companion were decided upon.

After the concept confirmation, I spent two weeks creating studies of the physical tree in SketchUp and coordinating with our hardware team to determine our best solution. Detailed lists of game development tiers were also provided for budgetary scaling for the client to select from.

“We worked with the care providers and patient families to create a space to promote a change in a patient’s mindset from ‘I’m stuck in here because I’m sick’ to ‘I’m on a journey of healing.”

— Karri May, PM for Connecticut Children’s Medical Center

**WIREFRAMING & UI DEsign**

Establishing a clear user flow, and gamification opportunities.

After the physical tree design, construction coordination, and budget confirmation were complete, I dove fully into wireframing the digital experience of customizing a digital companion. After the basic user flow was approved by the client, work on the aesthetics of the UI began, and additional user flow improvements.

During this process, I was responsible for all UI designs and heavily collaborated with our developer to work through the best assets and processes for an accelerated development timeline.

Review the slideshow below for a step-by-step look at the user flow, and package provided to the client.

In order to lower the barrier to entry, we determined a web application would be best for our audience. An intro screen was created to set the context for the interaction.

After onboarding, new users can begin character creation. We determined this would be compromised of 4 parts: colors, patterns, item modifiers, and a name.

When a user was finished with the customization process they could name their pathfinder. Without account sign-ins, this was an important component of users being able to retrieve their pathfinder from a different device if the occasion arose. This required special attention to be paid to the error state designs.

When a user had customized to their satisfaction they then release their character onto one of the screens in the clinic tree. After release, they are taken to a page that shows a still image of their character, other characters active on the clinic tree, and two mini-games to continue interacting if they desired.

After collaboration with the development team, it was determined the application would remember users' mobile devices, and their characters to eliminate the need for account creation and potential HIPAA violations.

Designing the UI for the customization experience began and adjustments were made to create a system that would work best for a responsive web application - to work on all devices.

If you've made it this far – thanks for being invested in my work. This is where it gets fun!

In order to meet our goal of a returnable experience, we wanted users to leverage the customization process more than once. We created a mini-game for use — If you've made it this far – thanks for being invested in my work. This is where it gets fun! In order to meet our goal of a returnable experience, we wanted users to leverage the customization process more than once. We created a mini-game for users to interact with their character, and the more they interacted they received loot boxes with modifier items. In the beginning only locked crates are shown, to signal to users there is an incentive to continue using the application.

CCMC_UnityProccessShot — ASSET CREATion

Creative direction & collaboration for 3D modeling and game engine prototyping.

Outside of the UI/UX design, this project had a highly involved 3D asset development process. Five environments had to be created for the monitors that made up the tree in the physical space, and three custom characters, Pathfinders, were made specifically for the purpose of editing on a mobile platform.

ENVIRONMENTS

First Steps

This represents the very beginning of the digital environment creation. I collaborated with the creative technologist working in Unity to grey box environments to create virtual spaces where Pathfinders could move around with ease in the scenes. We focused on utilizing depth so their Ai programming had a lot of room to roam, but also worked on ensuring they didn’t get so small they were no longer visible from the patient rooms and seating. After the grey box layouts were determined, wayfinding and aesthetic updates began.

Screen Shot 2021-08-23 at 10.07.48 AM.png

Wayfinding Elements

Assuming patients would receive various rooms throughout their treatment journey, unique landmarks were developed for each scene to enhance the returnability of the space. This also made for a better character release experience for users by providing a clear visual that could be used to find their Pathfinder on the tree in the clinic. This eventually also included color-coded icons for quick and easy recognition.

Screen Shot 2021-08-15 at 3.42.00 PM.png

Visual Development

After grey boxing layouts and landmarks were determined we applied a visual style to the scenes. A fantasy nature style was chosen by the client, and we finished all scenes with a variety of object modeling, placement, and small refinements.

Special considerationsAn aspect of this project that was important to consider were patients that may be too sick to have their room open to view the tree sculpture. We wanted to make sure they could have that sense of community and participation. While most scenes were 2 monitors wide, we decided to create a scene that was a single screen (the Campfire shown above) that could be accessed from TVs in patient rooms via a channel switch. — Special considerations
An aspect of this project that was important to consider were patients that may be too sick to have their room open to view the tree sculpture. We wanted to make sure they could have that sense of community and participation. While most scenes were 2 monitors wide, we decided to create a scene that was a single screen (the Campfire shown above) that could be accessed from TVs in patient rooms via a channel switch.

Pathfinders

A unique aspect of this project was creating our own custom characters, referred to as “Pathfinders.” A whimsical name that tells patients they have a companion to help navigate through their health journey, and a fun reference to the Ai the characters use in the game engine.

Creating these characters required collaboration and creative direction with the Dimensional Innovations 3D team. Some initial ideas and sketches were provided, and then the 3D model ran with it by modeling, rigging, and animating the characters.

Outside of creative direction on the 3D development, I worked on the patterns used to customize the pathfinders. This required several rounds of revisions to develop patterns that worked well with all three pathfinders, and at the scale they wrapped the UV texture maps provided by the 3D team.

CCMC_User Testing Session — Prototyping

Facilitating User Testing

Once the application development was ready, I planned a user testing session that was company-wide, inviting co-workers to bring in their children.

I also developed a survey so we could capture information that would help development if anyone ran into bugs, and to measure what was successful, and anything that was unsuccessful that needed updates.

One of our main learnings from this testing session was that families with siblings required a more accessible way to create different pathfinders on the same device. We made the “logout” button more visible and included instructions for how they could re-access that pathfinder. This finding also impacted some decisions we made for the back-end. We shifted pathfinders to be visible via a time-based system, rather than making users have an active pathfinder in their browser. This way siblings could each see their own pathfinders during the same appointment time.

FinAL Steps

Coordination with Engineering, Installation, and Bug Fixes

Needs: Kids in this patient situation are in need of a way to pass their 45+ minute appointment time. This activity needs to be returnable because these are typically monthly appointments, where patients come for sometimes years. Treatment and parental guidance are inherent in these situations, so giving kids something that is “theirs” gives them a sense of control over their own experience.

From the doctors: Nature needed to be included because of the studies of its positive effects on health. Nothing Cartoony - our teen patients often feel overlooked, we need to make something they will engage with, but so will our younger patients with their parents.