DuckTab

DESIGNING CANCER CARE FOR KIDS

 

Overview:

DuckTab - Designing Cancer Care for Kids is a product my Computing for Good class. The efforts of the project have direct effects on our client, The Aflac Cancer & Blood Disorders Center, Children’s Healthcare of Atlanta, which is one of the largest pediatric cancer and blood disorders center in the United States. Out of this establishment, we focus on the Scottish Rite location in Sandy Springs, GA. The Scottish Rite facility is focused on treatment of children ranging from 6 years to 21 years of age and has approximately 60 to 70 patients visiting the facility each day for treatments ranging from infusion, chemotherapy, and routine checkups. The Children’s Healthcare of Atlanta was started in 1915 and since then they have dedicated and tirelessly focused on implementing specialized equipment and techniques for providing the best possible care for children. With this, we wanted to put or skills to test and jump in to help make a difference.

 

Background:

My team and I were presented with the problem of entertaining kid patients as they undergo their cancer care treatments – a broad problem area. Given this scope, the community we directly served in our efforts with this project is composed of kids who have been diagnosed with cancer, the parents or guardians of these kids, and the medical officials who would oversee, distribute, and interact with the products (iPad and Web app) we created. Although everyone under the age of 18 can use our iPad app, the hospital wanted to put more of a focus on the age group right under the teenage years, as most teenagers are generally preoccupied with their mobile phones. On a larger scale, this problem of entertainment is an example of how altering little aspects of an experience may change the entire experience. As kids wait during long periods for treatment in rooms with white walls and one painting, there is nothing to keep their minds off the not-so-awesome fact that they are about to undergo a painful and tiring procedure. Bringing some level of excitement and fun ultimately serves as a huge distraction and allows them to relax and enjoy the medical process a little bit more. Seriously addressing ways to bring fun to dreadful places, such as the hospital, is the larger issue here.

so ... What is A "DuckTab"?

The final DuckTab system is composed of two products - an iOS iPad app and a website dashboard. The iOS app provides entertainment features along with feedback questions that children interact with throughout the clinic journey. Patients are required to scan QR codes, presented in the form of animated pictures, which are in each room throughout the procedure process. As patients move around and scan characters on the walls, new stories or games are launched, allowing kids to play an active role through their visits. At the end of the visit, parents answer a few questions regarding their overall sentiments on the visit.

Patient and parent input collected through the DuckTab app are then passed to the DuckTab website dashboard, which verified hospital officials have access to. The dashboard serves as a tool for understanding necessary information, such as the patients’ moods, frustrations, and overall sentiments of their visit. Parents’ feedback shed more light on potential hospital/clinic improvements.

Duration: 

September 2016 - December 2016

Team Size:

A team of 5 students, composed of 4 M.S. Human-Computer Interaction students and 1 B.S. Computer Science student.

Team Members:

Yeonjoon Choi, Rohan Katyal, Geunbae Lee, Nishant Panchal, Laurel Warrell

TOOLS USED:

Balsamiq, Sketch, Framer.js, Swift, Firebase, Node.js, Bootstrap

SKILLS EXERCISED:

Sketching, Field Observations, User Testing with Kids, Client Communications, Large Group Management

 

My Role:

UI/UX dESIGNER

As co-designer, I was involved in the entire user-centered design process, from initial field study research to deciding on final design decisions. As a strong advocate for the user, I broke down our data findings to inform the ideation process for creating a new, fresh, and innovative way to get kids actively involved in their hospital visit and rule out the fear, anxiety, and boredom that comes along with their cancer treatments and long waits. I coordinated and participated in design sprints for final iPad and Web app designs. I contributed in deciding on a workflow for our overall client and patient system. I sketched by hand and wireframed in Balsamiq concept sketches and layouts for final i0S app screen designs.

ux Researcher

As primary researcher, I created the testing script for our usability study (including creation of consent form, definition of tasks that users are asked to perform, formulation of survey and questionnaire, outline of methods for data evaluation), recruited kid participants, and conducted the user testing sessions with kids and parents for the DuckTab iPad app.

Project Manager

As manager, I took on the responsibility of coordinating project meeting times given the schedules of many, along with taking care of all project submission deadlines. This included collecting all documents and resources, finalizing, and submitting given appropriate team submission goal.

 

Field Observations

Field observations

To get a better understand of the clinic and how kids navigate through the space, we conducted some field observations. During the first visit we observed, captured some images of various rooms, walked through the entire clinic process as kids and their parents/guardians would, gained better understanding of the advantages and limitations of the space, and finally met with a few nurses and Dr. Karen Wasilewski, MD. Dr. Wasilewski also served as our primary source for client contact.

IMG_8366.jpg

Waiting Room

Exam Room

IMG_1452.JPG

Initial Screening Room

Picture2.png

Pre-Sedation Room

IMG_1455.JPG

Exam Room

Pre/Post Procedure Room

 

cLIENT Communications

Client Meeting

Meeting one-on-one with the client brought their biggest preferences and concerns to light. Overall, the client wanted the design solution to involve the use of iPad that are donated to the centers. Along with this requirement, the client desired a system that would potentially entail the following:

  1. Collection of valuable feedback from patients and parents/guardians of patients during a given clinic visit.

  2. Creation of an enjoyable experience that serves as a distraction for patients during their time at the clinic.

  3. Back and forth communication between medical officials, patients, and parents/guardians of patients during a clinic visit.

 

Clinic Process

This is a journey map for typical and fast track visits at the clinic. The variations in user experiences provided a challenge as we worked to create a standard, yet universal solution for kids, along with having to consider the client's most important requirements for the system solution.

 

Swim lanes

This picture depicts all the treatment steps that children and parents/guardians walk through within a visit. The process for a specific patient depends on the type of treatment need for a given day. We considered the magnitude of the processes as we ideated to formulate a solution.

 

WAIT TIME aNALYSIS

Given the nature of the overall cancer treatment process, patients typically experience long wait times. Many may ask, "Why not work to create a solution for reducing wait times?" This data represents "commendable" waits. The clinic has already taken necessary steps to meet the norm for average waits for this form of treatment, leaving very little to be done for wait time reduction.  Although our mission was not to reduce the patient's waits, we still found evaluating such data to useful, as it provides a good analysis of time patients spend active v.s. waiting. 

Screen Shot 2016-12-04 at 6.53.09 PM.png
Screen Shot 2016-12-04 at 6.54.19 PM.png
 

Preexisting Works

The client was previously presented with “Passport”, a paper tool that was developed by the Georgia Tech's SimTigrate Design Lab. Passport is a child-friendly process map that engages patients, families, and hospital officials in attempts to develop a data collection tool. Patients would use Passport to draw and write during waits. Passport encompasses time stamps at the beginning and end of each activity (inputted manually), along with qualitative descriptions of feelings at each step of the clinic process. This qualitative and quantitative data would then be used to optimize care of the patients.

After testing, Passport did not work well for our client. Given this, our team wanted to develop a more appropriate long-term tool. As a paper-based tool, the collection of data was very choppy and not too efficient.  Patients who were already familiar with it Passport also disliked the repetitive activity.

 

Plan Definition

Considering aspect #1, the clinic wanted to collect qualitative information from patients about their likes, dislikes, preferences, wants, and needs while going through processes and time spent at the clinic. This is achieved by asking survey-type questions through the iPad app. In addition, the clinic wished to keep track of where patients are located in the hospital at a given moment. We collect this data when the QR codes are scanned.

Considering aspect #2, the clinic wanted to provide the best possible experience for patients and alleviate any additional stress factors that fall in the clinic’s power to do so. Mainly, the focus is to provide a good user experience for the children while they wait in different treatment rooms.

Considering aspect #3, which we decided was out of the scope of our project this semester, the clinic wanted to explore ways in which medical officials could be contacted, messaged, or pinged by patients and/or parents/guardians during the clinic visit. This would be used in a situation such as - patient has been waiting in a room for too long and hasn't been attended to; the patients and/or parent/guardian wants to let a nurse know about this in real time and find out information on how much longer the wait would be. This would have required us to spend a large amount of time figuring out ways to get around the restraints and extremely limited data access within the Epic EMR system, which did not fit the time frame of our project.

WE NARROWED THE SCOPE OF THE PROJECT TO INCLUDE ASPECTS #1 AND #2.

 

System Workflow

 
Workflow.png

As a basic workflow concept, we would like:

1. Patients to have access to the iOS app when they start their clinic journey, right after leaving the initial clinic waiting room.

2. Patients to be able to express how they are feeling during their stay through survey.

ex. Wait time has been too long
ex. Have not been attended to
ex. Personal sentiments about visit
ex. General likes and dislikes

3. Patients to be entertained and enjoy their waits in the clinic rooms, etc.

<< This mockup is our final workflow for the systems’ interactions and communication, including the WebApp that medical officials will interact with and the iOS application that patients will be given. 

One thing to note: given different possible medical tracks (sequence of medical procedures/events at clinic) that patients can experience while at the clinic, the individual steps of a patient's clinic visit varies.

 

 

Patient Journey

 
patient_journey.png
 
 

Design

Sketching

As a group, we each sketched each the potential user interface layout for each screen. Later we discussed our proposed ideas and formulated a final layout based on all our suggestions.

 

Wireframing

From these hand drawn sketches, Balsamiq was used to transform the images to wireframes.

iOS APP

Terms and Agreement

Choose Age

Visit Info

QR cODE Scanning Demo

Choose Character

Scanning Screen

Choose Gender

Sentiment Input

 

Wireframing

Balsamiq was used to mockup the web application.

WEB APP

Ducktab1.png

Web App Login

Ducktab2.png

WEB APP DASHBOARD

Ducktab3.png

Details on Feedback Questions

 

Designing in Sketch

From the mockups, we jumped into creating the app's screen is Sketch. Here are the final screens of DuckTab.

Key Design Decisions:

  • Colorful - attractive and kid friendly
  • Consistent - across screens
  • Simple - no learning curve
Page0_Splash.png

Splash Screen

Choose Character

QR Code Scanning

Page10_7 copy.png

Further Questions about Visit

Page1_ConsentForm.png

Terms and Agreement

Choose Age

Page8_6.png

Entertainment for kids

More Information

Page6_4.png

QR Code Scanning Instructions

Sentiment Info

Web App Design

Hospital officials will interact with the Web App.

Screen Shot 2016-12-02 at 1.50.14 PM.png

Hospital Officials' Login

After successfully logging in, the official is presented with the main dashboard view.

 

 

Screen Shot 2016-12-02 at 1.54.10 PM.png

DuckTab Web Dashboard

Here the official can view the feedback questions that are currently being presented to users who use the DuckTab iPad app.

 

Officials can also add new questions to the database for iPad users to answer, view details about the sentiments of the answered questions, modify existing questions, delete questions, and add new QR codes.

 

View Patient and Parent Responses/Feedback

Click on the “Details” button for the respected feedback question.

Screen Shot 2016-12-02 at 1.56.05 PM.png

Add a New Question

Click on the “Add new question” button to enter details for the new question.

Screen Shot 2016-12-02 at 1.55.45 PM.png

Modify a Preexisting Question

Click on the “Modify” button for the respected feedback question.

Screen Shot 2016-12-02 at 1.56.33 PM.png

Add a New QR Code

Click on the “Add new QR code” button to add new QR codes to the database for iPad users to scan and interact with.

 

Prototyping in Framer

Human Interaction > Manuals ... right? Haha, try it out!

Note: Our prototype is not a total reflection of our final app, as our main goal was to incorporate all final elements in our actual application development stages.

 
Artboard_hand.png
 
 
 

Evaluation

Due to the fact that our design process was based on best practices to be considered while designing for kids, we wanted to test the application with kids to get insights into their mental model and understanding of the interface. We spent a day recruiting and performing user testing with kids in a park. 

 

Our Participants:

Screen Shot 2016-12-18 at 10.25.35 PM.png

Key Findings:

  • The NEXT buttons are placed correctly but are too small in relation to the other buttons on the screen. This causes the kids to look around the interface to identify the action needed to proceed.
  • Some kids are inclined to enter their names on the character page OR want to enter custom names for the characters.
  • No kids recognize/selected the option to draw a character, as the option does not stand out enough on the screen.
  • The QR code instruction page is a problem area, as it required too much reading.
  • The graphics inside each instruction looks like button and kids tried to click on them expecting a response. These graphics need to be removed or edited these graphics.
  • Many kids are not able to read or understand the QR instruction page in general if they are under the age of 7. Rather than a text description, it should be a drawing/illustration or animation that shows kids that they must walk up to QR code and scan it with the iPad.
  • None of the kids used the back button. Placement and color of back button needs to be evaluated further. 
 
 

What's Next for DuckTab?

Our client is in the process of making DuckTab a part of the everyday life and medical visits at Children’s Healthcare of Atlanta.

 
136e5442b12f66923b2927c31b2db889.jpg
 
  • Meetings with the App Development team, who manages overall IT, are currently underway.
  • Our client intends for the DuckTab solution to promptly be adapted across Scottish Rite location and later, across the board at all Children's Healthcare of Atlanta facilities.
  • We would like to hand DuckTab to another Computing for Good team, so that they can iterate based on the findings from our current evaluation. This team would also work to conduct more usability studies and improve the app and web dashboard in the appropriate ways.