Crafting a digital space to promote diversity in healthcare education
To tackle the lack of diversity and inclusion in medical education resources, Johnson & Johnson and I developed a user-centered digital platform for their "Illustrate Change" initiative. The digital experience showcases diverse medical illustrations, fosters collaboration among educators and students and drives actionable change within the healthcare industry. My role focused on designing an intuitive user experience that seamlessly blended storytelling with functionality—creating smooth navigation, interactive features and accessible design elements to ensure the platform was both impactful and compliant with medical education standards.
Client
Johnson & Johnson
Scope
UXD | Interaction design | Design systems
Year
2024
Uncovering the need for representation in medical education
I started by diving deep into understanding the problem space. Through stakeholder interviews and user research, it became clear that a lack of representation in medical illustrations was perpetuating gaps in healthcare education. Stories like that of Chidiebere Ibe, whose diverse medical illustrations sparked global conversations, underscored the urgency of this initiative. With these insights, we envisioned a platform that would not only showcase inclusive medical artwork but also empower educators and healthcare professionals to incorporate it into their teaching materials.
I started by diving deep into understanding the problem space. Through stakeholder interviews and user research, it became clear that a lack of representation in medical illustrations was perpetuating gaps in healthcare education. Stories like that of Chidiebere Ibe, whose diverse medical illustrations sparked global conversations, underscored the urgency of this initiative. With these insights, we envisioned a platform that would not only showcase inclusive medical artwork but also empower educators and healthcare professionals to incorporate it into their teaching materials.
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 an experience that balances precision and usability
Designing this digital experience required a meticulous approach. I collaborated closely with specialized medical illustrators, guiding them on dimensions, resolutions, and adherence to strict medical illustration guidelines. These standards ensured both the accuracy and usability of their artwork. To bring the vision to life, I developed wireframes that clearly articulated the user journey, prioritizing a mobile-first approach. Building a robust design system that accommodated five responsive screen sizes was critical to maintaining consistency across devices.
Designing this digital experience required a meticulous approach. I collaborated closely with specialized medical illustrators, guiding them on dimensions, resolutions, and adherence to strict medical illustration guidelines. These standards ensured both the accuracy and usability of their artwork. To bring the vision to life, I developed wireframes that clearly articulated the user journey, prioritizing a mobile-first approach. Building a robust design system that accommodated five responsive screen sizes was critical to maintaining consistency across devices.
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
Turning user feedback into improvements
Usability testing played a pivotal role in refining my designs. Insights from these sessions helped us optimize navigation, accessibility and the overall user experience. Beyond design, I managed the logistical challenges of content population and alignment with technical requirements, ensuring seamless integration of illustrations and metadata. The result was a thoughtfully crafted platform that not only met the needs of educators and healthcare professionals but also adhered to the rigorous standards of medical practice, making it impactful, inclusive and functional across diverse use cases.
Usability testing played a pivotal role in refining my designs. Insights from these sessions helped us optimize navigation, accessibility and the overall user experience. Beyond design, I managed the logistical challenges of content population and alignment with technical requirements, ensuring seamless integration of illustrations and metadata. The result was a thoughtfully crafted platform that not only met the needs of educators and healthcare professionals but also adhered to the rigorous standards of medical practice, making it impactful, inclusive and functional across diverse use cases.
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
Key features & enhancements:
Information architecture for effortless navigation
I collaborated closely with the project leader at J&J and the medical illustrators to understand how to organize over 200 medical conditions for this digital experience. We needed to create a logical structure not only for these conditions but also for the other key pages of this platform. Through brainstorming sessions, we categorized the medical conditions into 8 key groups (like cardiology, dermatology, oncology, etc.) and listed them alphabetically. This led to the creation of a standard 3-level information architecture that ensured clear and intuitive navigation, making it easy for users to explore both the medical content and the other important pages of this digital experience.
I collaborated closely with the project leader at J&J and the medical illustrators to understand how to organize over 200 medical conditions for this digital experience. We needed to create a logical structure not only for these conditions but also for the other key pages of this platform. Through brainstorming sessions, we categorized the medical conditions into 8 key groups (like cardiology, dermatology, oncology, etc.) and listed them alphabetically. This led to the creation of a standard 3-level information architecture that ensured clear and intuitive navigation, making it easy for users to explore both the medical content and the other important pages of this digital experience.
Simplifying complexity by layering Information thoughtfully
Based on insights gathered from stakeholder and user interviews, it was clear that addressing the complexity of medical jargon was essential to creating an effective user experience. To avoid overwhelming users with information, we focused on presenting only what was necessary at each stage, keeping the experience streamlined and accessible. At the same time, we added layers of detail and options for users to dive deeper when needed, allowing them to explore the content further without feeling bogged down by unnecessary information. This approach ensured that the digital experience remained clear, focused and intuitive, while still accommodating the intricacy of the medical content.
Based on insights gathered from stakeholder and user interviews, it was clear that addressing the complexity of medical jargon was essential to creating an effective user experience. To avoid overwhelming users with information, we focused on presenting only what was necessary at each stage, keeping the experience streamlined and accessible. At the same time, we added layers of detail and options for users to dive deeper when needed, allowing them to explore the content further without feeling bogged down by unnecessary information. This approach ensured that the digital experience remained clear, focused and intuitive, while still accommodating the intricacy of the medical content.
Refining interactions for seamless usability
The annotations provided by medical professionals were dense with detailed information, often including sub-bullets and multiple layers of data. Our challenge was to design an annotation style that not only presented this complexity clearly but also worked seamlessly across all devices. During usability testing, I discovered that users needed to view the image and its annotations simultaneously, making responsiveness and accessibility key priorities. To address this, I designed a stick-on-scroll interaction where the image remained fixed at the top of the screen while the overflow information scrolled gracefully beside/behind it. This approach ensured users could easily reference both elements without losing context. On mobile devices, where screen space is limited, this solution was particularly impactful, delivering a smooth, intuitive experience that kept the focus on clarity and usability.
The annotations provided by medical professionals were dense with detailed information, often including sub-bullets and multiple layers of data. Our challenge was to design an annotation style that not only presented this complexity clearly but also worked seamlessly across all devices. During usability testing, I discovered that users needed to view the image and its annotations simultaneously, making responsiveness and accessibility key priorities. To address this, I designed a stick-on-scroll interaction where the image remained fixed at the top of the screen while the overflow information scrolled gracefully beside/behind it. This approach ensured users could easily reference both elements without losing context. On mobile devices, where screen space is limited, this solution was particularly impactful, delivering a smooth, intuitive experience that kept the focus on clarity and usability.
Optimizing touch zones for improved engagement
Usability testing revealed that users browsing the medical image gallery often needed to view multiple images in quick succession. With the variety of images—ranging from different skin tones to varying anatomical locations of conditions—users frequently switched back and forth between images. To improve this experience, I optimized the placement of interaction elements, such as open and close buttons, by relocating them to the “green flag” thumb zone for optimal accessibility. This adjustment made it faster and easier for users to navigate through the gallery, ensuring a seamless and efficient interaction, especially on mobile devices.
Usability testing revealed that users browsing the medical image gallery often needed to view multiple images in quick succession. With the variety of images—ranging from different skin tones to varying anatomical locations of conditions—users frequently switched back and forth between images. To improve this experience, I optimized the placement of interaction elements, such as open and close buttons, by relocating them to the “green flag” thumb zone for optimal accessibility. This adjustment made it faster and easier for users to navigate through the gallery, ensuring a seamless and efficient interaction, especially on mobile devices.
Evolving the MVP with user-centered enhancements
With plans to significantly expand the medical library beyond the 25 images included in the MVP, we recognized the need to improve findability as the collection grew to hundreds of entries. Based on insights from user and stakeholder research, I introduced two new features on the homepage to streamline navigation. First, I added a search field, enabling users—whether patients familiar with a condition or medical students seeking to learn more—to quickly locate specific content. Additionally, I added a dropdown filter to house all the conditions categories, allowing users to narrow their search if they were unsure of the exact medical name. These updates ensured the platform remained intuitive and efficient, even as the content scaled significantly.
With plans to significantly expand the medical library beyond the 25 images included in the MVP, we recognized the need to improve findability as the collection grew to hundreds of entries. Based on insights from user and stakeholder research, I introduced two new features on the homepage to streamline navigation. First, I added a search field, enabling users—whether patients familiar with a condition or medical students seeking to learn more—to quickly locate specific content. Additionally, I added a dropdown filter to house all the conditions categories, allowing users to narrow their search if they were unsure of the exact medical name. These updates ensured the platform remained intuitive and efficient, even as the content scaled significantly.
MORE PROJECTS
