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.
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
- Contextual approach: Engaging in the day to day, contextual onboarding, acknowledgment of fluctuating mental and physical states.
- 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.
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.
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.
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!
