Cancer Care for Survivors

Celebrating victory and supporting a healthy lifestyle through service design.

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.

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

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.

Designer @Microsoft, previously @Google, @YouTube, and @EmilyCarrU www.catherinelegros.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store