App Screen with open sidebar
App Screen with open sidebar
App Screen with open sidebar

Children's Hospital of LA - Tia Lupe Web App

Children's Hospital of LA - Tia Lupe Web App

Children's Hospital of LA - Tia Lupe Web App

A digital community resource for the Children’s Hospital of LA

A digital community resource for the Children’s Hospital of LA

A digital community resource for the Children’s Hospital of LA

Client

Children’s Hospital of Los Angeles

Team

Emily Hedrick Elsa Grayson Yuan Li Stefan Tabenecki

Role

UX Research, UX/UI Designer, Project Manager

Timeline

Jan - June 2020

Tia Lupe is a narrative-based healthcare website that educates Latine parents and children through delightful personalized storytelling, informative testimonials, and child-focused educational narratives.

Tia Lupe is a narrative-based healthcare website that educates Latine parents and children through delightful personalized storytelling, informative testimonials, and child-focused educational narratives.

Tia Lupe is a narrative-based healthcare website that educates Latine parents and children through delightful personalized storytelling, informative testimonials, and child-focused educational narratives.

Project Brief

Design a central healthcare resource system for the Latine community of Los Angeles

Design a central healthcare resource system for the Latine community of Los Angeles

Design a central healthcare resource system for the Latine community of Los Angeles

Problem Identified

The Latine families of Children’s Hospital of Los Angeles’ patients do not have easily accessible, culturally-specific preventative healthcare resources.

The Latine families of Children’s Hospital of Los Angeles’ patients do not have easily accessible, culturally-specific preventative healthcare resources.

The Latine families of Children’s Hospital of Los Angeles’ patients do not have easily accessible, culturally-specific preventative healthcare resources.

Solution

Tia Lupe - a narrative-based healthcare tool that teaches families about preventative care and resources through delightful personalized storytelling, informative testimonials, and child-focused educational narratives.

Tia Lupe - a narrative-based healthcare tool that teaches families about preventative care and resources through delightful personalized storytelling, informative testimonials, and child-focused educational narratives.

Tia Lupe - a narrative-based healthcare tool that teaches families about preventative care and resources through delightful personalized storytelling, informative testimonials, and child-focused educational narratives.

Stakeholder & Domain Expert Research

Stakeholder & Domain Expert Research

Stakeholder & Domain Expert Research

We began the project by interviewing domain experts to identify pain points between the Latinx community and the healthcare system.

We began the project by interviewing domain experts to identify pain points between the Latinx community and the healthcare system.

We began the project by interviewing domain experts to identify pain points between the Latinx community and the healthcare system.

Connect to Content

Add layers or components to swipe between.

Connect to Content

Add layers or components to swipe between.

Connect to Content

Add layers or components to swipe between.

Desktop Research

Desktop Research

Desktop Research

Our desktop research gave us some insight into effective methods of preventative care education in the Latine community, and helped us to focus on designing for a specific demographic of Latine patients and patient families.

Our desktop research gave us some insight into effective methods of preventative care education in the Latine community, and helped us to focus on designing for a specific demographic of Latine patients and patient families.

Our desktop research gave us some insight into effective methods of preventative care education in the Latine community, and helped us to focus on designing for a specific demographic of Latine patients and patient families.

Connect to Content

Add layers or components to swipe between.

Connect to Content

Add layers or components to swipe between.

Connect to Content

Add layers or components to swipe between.

Ideation

Ideation

Ideation

We began the ideation phase by creating stakeholder system maps, current and future state journey maps, and personas to reflect the needs of the community.

We began the ideation phase by creating stakeholder system maps, current and future state journey maps, and personas to reflect the needs of the community.

We began the ideation phase by creating stakeholder system maps, current and future state journey maps, and personas to reflect the needs of the community.

System & Stakeholder Maps

System & Stakeholder Maps

System & Stakeholder Maps

Our system and stakeholder maps reflect the relationship between Latinx community patients and the CHLA healthcare system.

Our system and stakeholder maps reflect the relationship between Latinx community patients and the CHLA healthcare system.

Our system and stakeholder maps reflect the relationship between Latinx community patients and the CHLA healthcare system.

Personas

Personas

Personas

Our personas, Juliana and Luka, were created to help guide our design process and help us to focus on the needs of the Latinx community we discovered through research.​​​​​​​

Our personas, Juliana and Luka, were created to help guide our design process and help us to focus on the needs of the Latinx community we discovered through research.​​​​​​​

Our personas, Juliana and Luka, were created to help guide our design process and help us to focus on the needs of the Latinx community we discovered through research.​​​​​​​

Journey Maps

Journey Maps

Journey Maps

Our current state journey map was created to reflect the current process of accessing CHLA resources. It highlights the pain points of patients feeling overwhelmed by the amount of paperwork given to them while seeking care for their children - which often keeps patients from utilizing any hospital resources at all.​​​​​​​

However, in our future state map that includes the use of Tia Lupe, Juliana is able to readily access important information and is able to learn more about her son’s diabetes. Juliana can use our tool to help educate Luka with the children’s resources. Through the animated characters, games, and child patient testimonials - Luka feels inspired to make lifestyle changes.

Wireframing

Wireframing

Wireframing

Our initial wireframes reflected a larger structure that had separate resources for parents and children. In this larger structure, parents would have access to CHLA resources and programs, condition information, and ways to contact a health advisor. For the sake of time, my team and I zoomed in on the highlighted children’s side of Tia Lupe. Here, children could learn to manage their health condition through animated characters, education games and activities, and video testimonials from kids like them.​​​​​​​

Our initial wireframes reflected a larger structure that had separate resources for parents and children. In this larger structure, parents would have access to CHLA resources and programs, condition information, and ways to contact a health advisor. For the sake of time, my team and I zoomed in on the highlighted children’s side of Tia Lupe. Here, children could learn to manage their health condition through animated characters, education games and activities, and video testimonials from kids like them.​​​​​​​

Our initial wireframes reflected a larger structure that had separate resources for parents and children. In this larger structure, parents would have access to CHLA resources and programs, condition information, and ways to contact a health advisor. For the sake of time, my team and I zoomed in on the highlighted children’s side of Tia Lupe. Here, children could learn to manage their health condition through animated characters, education games and activities, and video testimonials from kids like them.​​​​​​​

Character Design

Character Design

Character Design

As a team, we created four characters - Maria, Luna, Miguel, and Antonio. We created and designed each of these characters to help educate and inspire users to live healthy lives - each using their own expertise.

As a team, we created four characters - Maria, Luna, Miguel, and Antonio. We created and designed each of these characters to help educate and inspire users to live healthy lives - each using their own expertise.

As a team, we created four characters - Maria, Luna, Miguel, and Antonio. We created and designed each of these characters to help educate and inspire users to live healthy lives - each using their own expertise.

Maria

The Chef Bear

Antonio

The Fitness Tiger

Luna

The Genius Lemur

Miguel

The Emotional Owl

Design System & High-Fidelity Screens

Design System & High-Fidelity Screens

Design System & High-Fidelity Screens

We combined our wireframes with a design system to build out the high-fidelity Tia Lupe structure.

We combined our wireframes with a design system to build out the high-fidelity Tia Lupe structure.

We combined our wireframes with a design system to build out the high-fidelity Tia Lupe structure.

Design System

Design System

Design System

High Fidelity Screens

High Fidelity Screens

High Fidelity Screens

Results & Reflection

Results & Reflection

Results & Reflection

Usability & SME Testing with Kids

Usability & SME Testing with Kids

Usability & SME Testing with Kids

To test the usability and subject matter of Tia Lupe kids, we gained insight from our target age group (5-12 years old.)

To test the usability and subject matter of Tia Lupe kids, we gained insight from our target age group (5-12 years old.)

To test the usability and subject matter of Tia Lupe kids, we gained insight from our target age group (5-12 years old.)

Testing with Zhen (7)

Testing with Zhen (7)

Testing with Zhen (7)

  • Zhen loved any imagery with colors and graphic elements.

  • She wasn’t familiar with lemurs as an animal, which added a bit of confusion while learning about the characters.

  • She appeared more engaged with the more visual-based games and printables as opposed to written content.

  • She found the activity walkthrough to be confusing. The copy in the walkthrough was too advanced for her reading level, and she wasn’t interested in the highlighted sport.

Testing with Joey (6) and Maverick (9)

Testing with Joey (6) and Maverick (9)

Testing with Joey (6) and Maverick (9)

  • Joey suggested an audio feature for kids who might better retain information in an audio form.

  • Maverick and Joey also felt the Lemur may be too obscure of an animal, and suggested a more widely-known animal to represent Luna.

  • Joey and Maverick learned new things from the experience, specifically the impact of diet on blood sugar levels.

Stakeholder Testing

Stakeholder Testing

Stakeholder Testing

To gain some insight from our stakeholder at the hospital, I scheduled a meeting with Ali Arnett from the Innovation Team to walk her through our prototype.​​​​​​​

To gain some insight from our stakeholder at the hospital, I scheduled a meeting with Ali Arnett from the Innovation Team to walk her through our prototype.​​​​​​​

To gain some insight from our stakeholder at the hospital, I scheduled a meeting with Ali Arnett from the Innovation Team to walk her through our prototype.​​​​​​​

Stakeholder Feedback

Stakeholder Feedback

Stakeholder Feedback

  • Consider how content would change through different age groups.

  • Think about showing the whole structure of Tia Lupe.

  • Explore more food resources - like grocery list calculators and fast food order guides.

  • Could be a need for a supplementary physical product.

CHLA Feedback Takeaways

CHLA Feedback Takeaways

CHLA Feedback Takeaways

At the end of the semester, my team had the chance to present our high fidelity prototype to the CHLA Innovation Team.

At the end of the semester, my team had the chance to present our high fidelity prototype to the CHLA Innovation Team.

At the end of the semester, my team had the chance to present our high fidelity prototype to the CHLA Innovation Team.

Connect to Content

Add layers or components to swipe between.

Connect to Content

Add layers or components to swipe between.

Connect to Content

Add layers or components to swipe between.