Empowering health decisions through user-centered design
For Johnson & Johnson’s My Health Can’t Wait initiative, I helped to reimagine the digital experience to drive proactive healthcare engagement in minority populations. Through in-depth user and stakeholder research coupled with collaborative design, I crafted a responsive platform that seamlessly housed the campaign’s critical resources. Key features included interactive tools like a family medical history tracker and cancer screening assessments, all designed to empower users in making informed health decisions. This work balanced regulatory constraints, usability and accessibility, ensuring the platform aligned with the initiative’s mission to reduce care delays and enhance public health awareness.
Client
Johnson & Johnson
Scope
UXD | Prototyping | Design systems
Year
2024
Uncovering user & brand needs
Collaborating closely with the Johnson & Johnson team and a third-party development team, we pinpointed areas where the existing campaign experiencee could be improved. Our primary focus was to refresh the design to better align with the brand’s updated style, enhance the overall user experience, and make essential health resources more accessible. A key insight we uncovered was the importance of preventative care in empowering users to better understand their health risks before they arise. With this in mind, we set out to create an intuitive experience that made it simple for users to engage with resources that could truly impact their health outcomes.
Collaborating closely with the Johnson & Johnson team and a third-party development team, we pinpointed areas where the existing campaign experiencee could be improved. Our primary focus was to refresh the design to better align with the brand’s updated style, enhance the overall user experience, and make essential health resources more accessible. A key insight we uncovered was the importance of preventative care in empowering users to better understand their health risks before they arise. With this in mind, we set out to create an intuitive experience that made it simple for users to engage with resources that could truly impact their health outcomes.
What do they
Think?
My friend will text me their shazams after a night out.
The features of this app are limited.
What else has this artist made?
Is this the right song?
What do they
Say?
I usually share links in group chats.
People always share music with me.
I want to see what my friends Shazam.
Send me the songs we discover together.
How do they
Feel?
Disappointed by inaccurate results.
Frustrated sharing results mid-event.
Excited when friends share songs.
Thrilled discovering a new artist.
What do they
Do?
Screenshots Shazam results.
Checks Shazam history after night out.
Shares Shazam screenshots with friends.
Uses Shazam often during DJ sets.
Designing engaging, interactive tools for preventative care
With preventative care at the core of the campaign, we wanted to provide users with tools that could make an immediate impact. A key addition was the Family Health Tree, which allows users to input family history details to help assess their risk of future diseases. This tool wasn’t just static; we designed it as an interactive PDF that users could access and print directly from their phone, enabling them to bring it to their healthcare provider for more informed discussions. Additionally, we developed an Interactive Cancer Screening Questionnaire that guides users through a series of questions to help them determine whether they should seek cancer screenings based on their health profile. These tools were designed to be easily navigable, offering users personalized insights into their health risks.
With preventative care at the core of the campaign, we wanted to provide users with tools that could make an immediate impact. A key addition was the Family Health Tree, which allows users to input family history details to help assess their risk of future diseases. This tool wasn’t just static; we designed it as an interactive PDF that users could access and print directly from their phone, enabling them to bring it to their healthcare provider for more informed discussions. Additionally, we developed an Interactive Cancer Screening Questionnaire that guides users through a series of questions to help them determine whether they should seek cancer screenings based on their health profile. These tools were designed to be easily navigable, offering users personalized insights into their health risks.
1.0
Home
1.1
My music
1.1.1
Shazams
1.1.2
Likes
1.1.3
Artists
1.1.4
Recents
1.1.5
Playlists
1.2
My Friends
1.2.1
Following
1.2.2
Followers
1.2.3
Recents
1.2.4
Likes
1.2.5
Who to follow
1.3
🔍
1.4
⚙️
Application map and architecture
New feature
Existing
Primary task/screen flows
User wants to find a track their friend Shazamed.
Taps “My friends”
“My friends”
Taps “Following”
List of followers
Locates user
User's profile
Browses history
Track ID
User wants to see who else Shazamed the same song.
Shazams a song
Track ID
Taps number of shazams
List of users who Shazamed
Taps a username
User profile
Browses users history
User wants to search for and then follow a friend.
Taps “My friends”
“My friends”
Taps “Search”
Enters name in field
Selects user from results
User's profile
Taps “Follow”
Action
Screen
High-view user flow for new features
High-view user flow for new features
Track ID
is this the right song?
Plays preview
Like or Save?
View track's Shazam history?
Stream/
download?
Taps ♥︎ icon
Taps number of Shazams
List of users
Taps on a username
User's Profile
Follow User?
"My friends" feed
Taps on a track in feed
Track ID
"My friends" feed
Browses "Who to follow"
Screen
Action
Question
Creating a seamless workflow with atomic design, tokens and rapid prototyping
I played a key role in building a robust atomic design system for this project, breaking everything down into its smallest components—buttons, form fields, color swatches, etc—so that each element could be easily documented, accessed, and scaled. This approach not only created a consistent, adaptable design but also made collaboration with the third-party development team more efficient. By providing clear guidelines and easily shareable assets, we empowered developers to move quickly while ensuring a seamless integration of new elements. Rapid prototyping was also crucial in bridging the gap between design and development. It allowed us to test and iterate on features early, identify potential issues, and refine interactions, all while saving time and aligning the team. This continuous collaboration helped maintain a strong designer-developer relationship and ensured that the final product met both user needs and technical requirements efficiently.
I played a key role in building a robust atomic design system for this project, breaking everything down into its smallest components—buttons, form fields, color swatches, etc—so that each element could be easily documented, accessed, and scaled. This approach not only created a consistent, adaptable design but also made collaboration with the third-party development team more efficient. By providing clear guidelines and easily shareable assets, we empowered developers to move quickly while ensuring a seamless integration of new elements. Rapid prototyping was also crucial in bridging the gap between design and development. It allowed us to test and iterate on features early, identify potential issues, and refine interactions, all while saving time and aligning the team. This continuous collaboration helped maintain a strong designer-developer relationship and ensured that the final product met both user needs and technical requirements efficiently.
What do they
Do?
Screenshots Shazam results.
Checks Shazam history after night out.
Shares Shazam screenshots with friends.
Uses Shazam often during DJ sets.
What do they
Think?
My friend will text me their shazams after a night out.
The features of this app are limited.
What else has this artist made?
Is this the right song?
How do they
Feel?
Disappointed by inaccurate results.
Frustrated sharing results mid-event.
Excited when friends share songs.
Thrilled discovering a new artist.
What do they
Say?
I usually share links in group chats.
People always share music with me.
I want to see what my friends Shazam.
Send me the songs we discover together.
Primary task flows
User wants to find a track their friend Shazamed.
Taps “My Friends”
“My Friends”
Taps “Following”
List of Followers
Locates User
User Profile
Browses History
Track ID
User wants to search for, then follow a friend.
Taps “My Friends”
“My Friends”
Taps “Search”
Enters name in field
Selects user from results
User's profile
Taps “Follow”
User wants to see a song's shazam history.
Shazams a Song
Track ID
Taps number of Shazams
Taps a username
User profile
Browses user's history
List of users who shazamed
Action
Screen
Live screens
MORE PROJECTS
