bp2_home-scroll_browser2.gif

Being Present 2.0

a web-based mindfulness program that aims to tackle the mental + emotional distresses that come with metastatic cancer.

branding | content strategy | ux/ui

 
bp2_home_browser3.gif
 
 

"Take a breather and drop into now."


Initiative

web-based mindfulness meditation program to reduce distress associated with metastatic cancer

Role

ux/ui | visual design | content strategy


view site


Undergoing treatment is a difficult, multi-faceted battle. Rounds of chemotherapy, surgeries, etc. is taxing to one's physical wellbeing—and as a result, it also affects their mental health, causing unnecessary anxiety, stress, and emotional trauma.

Being Present 2.0 (BP2.0) is a web-based mindfulness program for both patients and caregivers. The 8 weeks contain of guided meditations and weekly webinars, which users can access via their portal. I was responsible for designing all aspects of the website, from UX to visual branding/UI, and also worked with the oncologist to strategize on how to present content throughout the experience.

 
 

Design challenges + process.

What is the user experience? How do we lead users through the program?

Challenge: While we knew that the program would consist of 8 weeks' worth of audio meditations + webinars, the way in which these would be presented to users was a giant question mark.

Solution: Looking to existing online programs and constantly asking myself "What would make this new 'Being Present' experience better than the first pilot?" were key to framing the experience. I identified common features among the programs and compared alongside the data + feedback from the previous BP pilot. Through these steps, I could uncover the missing pieces that needed to be implemented for the sake of retention, effectiveness, and consistency—as well how to present them.

What tone should the program embody?

Challenge: Mindfulness can take on many voices. It can be rejuvenating + energizing, or it can be calming. An extra deep breath can help to relieve stress, but also bring clarity. We had to come to a consensus on what message we wanted to express early on, since much of the design depended on the program's branding.

Aside from being given their logo, I did not have much direction to work with initially. Thus, much of the iterating, concepting, and designing had to be done from scratch. This was exciting in many instances but also posed some challenges in moving at an efficient pace, especially since the program being housed under UCSF brought additional restrictions (typeface, platform, among others) I had to abide by.

Solution: Being unfamiliar with UCSF's brand at this time, I had to spend some time push-n-pulling—attempting to figure out both the extent of UCSF's branding system, as well as a happy medium between looking and feeling 100% UCSF vs. a new, custom program offering. In parallel, I was producing moodboards + mid-fidelity sketches to use to facilitate discussions around what mood we wanted BP2.0 to portray.

 

 

The outputs.

 
Styleguide_1.png

Branding

The voice of BP2.0 can be described with three terms: simple, calming, and clarifying. 

Using an optimistic yet calming turquoise as an accent amongst a white + grey color scheme helps bring attention to the elements that need it most—especially when juxtaposed with clean, structured Helvetica Neue (UCSF's primary typeface). A clean visual system that takes on a modern element distinguishes BP2.0 from the rest of UCSF.

The use of iconography, paired with clear, succinct content, is something that is uncommon amongst UCSF's web experiences, which helps BP2.0 be that much more digestible (and thus attractive) to patients. I created the set above using simple lines and a flat style to depict each of BP2.0's unique features. Majority of strokes are rounded at the edges/corners for a more friendly feel.

 
bp2_portal_browser.png

BP2.0 Portal

When users register for the program, they are given access to their own digital portal. The portal serves as the main hub for the program, where users can listen to their meditation(s) for the week, track their progress, and sign in to webinars. New tracks are revealed as they complete each week, and old ones can be found in a running list at the bottom of the page.

Progress trackers were a common feature that I found across several online/digital programs. Because they're primarily visual-based, they are easy to glance at—yet simple to understand + give users a sense of accomplishment. They also allude to the idea that "consistent practice is key," which speaks true to forming good mindfulness habits.