Cancer Care for Survivors

Catherine Legros
Apr 20, 2018 · 4 min read

Context

When cancer patients complete their treatments, they often feel a gap in care as their next appointment will only be 3 months later. Throughout the semester, I worked on an interaction design project attempting to fill in this gap in care for cancer survivors. This article is specifically about how motion in the UI helped us reach our design goals and how we displayed the product using AfterEffects to create an intro video, seen above.

We worked closely with CancerBC and HealthlinkBC to research the problem space and the video is a proposal intended for them.

A section about the rest of the process can be found below.

Design goals / Challenges

  1. Contextual approach: Engaging in the day to day, contextual onboarding, acknowledgment of fluctuating mental and physical states.
  2. Dynamic yet rational: Steering away from the clinical, balancing comfort and progress, grounding in reality, adding a human touch.

Packaging the work

For the proposal, I created 3 different types of frames: Introductory text, overview of the product, and detail of each feature. Changing the background colour facilitated the transitions and separated the features and style frames.

Intro, Overview, Feature display

Product Overview

Picking the video sound

Because our user group was 50–70 year old cancer survivors, I wanted an uplifting and elegant song. The song Colours by Pete Josef, is joyful and continuously building up — which reflects to the process of recovery and progress the person goes through.

UI transitions detail

I turned my mockups into clickable prototypes with elegant transitions using Flinto behaviours. Making words and graphics appear naturally makes the user more comfortable interacting with the app. Because the subject of our product is sometimes delicate and personal (health, spirituality, experience with cancer), it adds a sense of respect and softness. Motion also helps drawing the user’s attention where it is needed.

Onboarding questionnaire flow
Appearing questions and progress bar
Event detail card motion
Appearing cards and suggestions

Before motion: The process

Our process included conducting Primary & Secondary Research, working closely with CancerBC and HealthLinkBC (User Interviews, Empathy study, Proxy User Tests, User Tests), Ideation, Prototyping (Paper, Flinto, After Effects), Wireframing, High Fidelity Mockups, and custom illustrations.

Person based model and user journey
Information architecture and initial prototype
Moving to desktop/iPad — Second prototype testing
Evolving the illustrations and colours to fit our users and their context

Takeaways

Integrated motion
Considering motion as I designed the UI ultimately created better quality mockups and made my design decisions more thoughtful.

Designing in discomfort
As designers we can get comfortable with our tools and forget to have a learner’s mindset. Learning AfterEffects and Flinto Behaviours took me out of my comfort zone, as I had to troubleshoot and watch video tutorials every few minutes. This taught me to be comfortable with designing in new environments/with new tools.

Thanks for reading!

Catherine Legros

Written by

UX design intern @ Google, Interaction design student @ Emily Carr University www.catherinelegros.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade