Year

2022

Keywords

Site design, brand palette, storyboarding, pitch deck, animation assets

My MedEdge

My MedEdge

Patient E-Learning Product

Web, video, graphic design, and creative management for an e-learning platform

Problem

Despite our hyper-connected world, it can still be difficult accessing patient-oriented, provider-vetted healthcare education.

Despite our hyper-connected world, it can still be difficult accessing patient-oriented, provider-vetted healthcare education.

Despite our hyper-connected world, it can still be difficult accessing patient-oriented, provider-vetted healthcare education.

In 2022, a local healthcare education company began developing an educational platform to truly connect healthcare providers and patients through education. Focused on rare and complex diseases, the platform needed to deliver reliable, easy-to-understand video education for patients while enabling providers to curate and share personalized playlists of content. The site needed to balance two distinct audiences while delivering a cohesive interface, brand identity, and scalable visuals on a fast timeline.

HMW Question

How might we test an experience that impacts patient care and engages providers?

Solution

Create and scale interface designs for a patient education product with a consistent visual identity – plus flows and features for two distinctly different audiences.

Create and scale interface designs for a patient education product with a consistent visual identity – plus flows and features for two distinctly different audiences.

Create and scale interface designs for a patient education product with a consistent visual identity – plus flows and features for two distinctly different audiences.

As Lead Web and Graphic Designer, I was responsible for expanding the concept into a fully realized brand. For this initiative, I would not only design the website interface, but also produce countless supporting visuals and e-learning graphics for the platform’s video library. My approach included creating a complete interface design and style in Adobe XD, maintaining close communication with developers and directors to ensure alignment, and cross-collaboration with multiple departments. In addition to brand and web design, I oversaw much of the video production process—making key creative and visual decisions. I also managed stakeholder approvals and collaborated with sales, content, and scientific teams to ensure I upheld standards for accuracy and consistency across all deliverables.

Responsibilities

Creation of palette, styling, key visuals

Application of brand logo and copy

User flows and wireframes

Site design and handoff

Video storyboards and graphics

Promotional material styling

Creation of palette, styling, key visuals

Application of brand logo and copy

User flows and wireframes

Site design and handoff

Video storyboards and graphics

Promotional material styling

Creation of palette, styling, key visuals

Application of brand logo and copy

User flows and wireframes

Site design and handoff

Video storyboards and graphics

Promotional material styling

Part 1: Logo and Palette

The company first worked with a talented agency to produce a logo and proposed colors. While the logo was applied to the designs, I was tasked with softening the colors and making the palette more inviting to patients and caregivers. After the two main colors were selected, I added cool accents like mint and teal to give the site a compassionate and calm presence.




Part 2: Two Unique User Flows

Two different user flows were necessary to support the providers and patients using the platform.


Part 3: Mid-Fidelity Wireframes

Working with product managers and development, I created wireframes for necessary pages, making sure to design interfaces that encouraged website engagement, content discovery, and usability.




Part 4: High-Fidelity Site Designs

For this step, I applied the branding, sourced key visuals, and brought the wireframe to life in Adobe XD. Some aspects, like the search engine, could be quickly integrated. Others like the playlist creation feature needed more layouts and oversight.





After the high-fidelity designs were approved, I annotated and provided pages in multiple screen sizes. I also altered experiences as needed to ensure a smooth implementation. 

Finally, when the site was built, I assisted in user acceptance testing, carefully inspecting the website for errors that would prevent users from completing their goals. 


Part 5: Video Graphics & Storyboarding

The company had been developing topics and recording speakers for dozens of patient videos while the site design was in progress. Now they had a library of recordings and transcripts, but needed storyboards and engaging, animation-ready graphics.

For this portion of the product, I developed storyboards that accounted for each step in the transcripts (generated from the pre-recorded videos).



Frame by frame, I then sourced or illustrated graphics for each scene and gained approval (or receive edits). After approval, the designs were handed to video production and transformed into engaging animations alongside the speaker's video recording. 





In this way we soon created a library of quick and informative videos that patients and providers would enjoy watching, with empathetic healthcare professionals explaining aspects of serious diseases.


VIDEO: This short clip from a My MedEdge video on Hepatic Encephalopathy (HE) shows how even simple animated graphics can improve comprehension, especially for newly diagnosed patients (video has no sound)


Part 6: On-Brand Promo Materials

With the website live and churning out content, My MedEdge wanted to bring awareness and understanding to healthcare specialists. First I collaborated with sales and created a how-to guide aimed at specialists and patients, which was distributed to key healthcare professionals that had provided guidance on the platform. 



After the initial users were onboarded and providing positive feedback, I worked with marketing to create engaging email communications. These would explain the platform and our goal to a wider audience:




As a final step in the product's rollout, a PowerPoint was developed to facilitate meetings and promote the product. For this step I rearranged, reworded, and enhanced each slide to tell the brand's story, communicating the values and benefits of the initiative.


Part 1: Logo and Palette

The company first worked with a talented agency to produce a logo and proposed colors. While the logo was applied to the designs, I was tasked with softening the colors and making the palette more inviting to patients and caregivers. After the two main colors were selected, I added cool accents like mint and teal to give the site a compassionate and calm presence.




Part 2: Two Unique User Flows

Two different user flows were necessary to support the providers and patients using the platform.


Part 3: Mid-Fidelity Wireframes

Working with product managers and development, I created wireframes for necessary pages, making sure to design interfaces that encouraged website engagement, content discovery, and usability.




Part 4: High-Fidelity Site Designs

For this step, I applied the branding, sourced key visuals, and brought the wireframe to life in Adobe XD. Some aspects, like the search engine, could be quickly integrated. Others like the playlist creation feature needed more layouts and oversight.





After the high-fidelity designs were approved, I annotated and provided pages in multiple screen sizes. I also altered experiences as needed to ensure a smooth implementation. 

Finally, when the site was built, I assisted in user acceptance testing, carefully inspecting the website for errors that would prevent users from completing their goals. 


Part 5: Video Graphics & Storyboarding

The company had been developing topics and recording speakers for dozens of patient videos while the site design was in progress. Now they had a library of recordings and transcripts, but needed storyboards and engaging, animation-ready graphics.

For this portion of the product, I developed storyboards that accounted for each step in the transcripts (generated from the pre-recorded videos).



Frame by frame, I then sourced or illustrated graphics for each scene and gained approval (or receive edits). After approval, the designs were handed to video production and transformed into engaging animations alongside the speaker's video recording. 





In this way we soon created a library of quick and informative videos that patients and providers would enjoy watching, with empathetic healthcare professionals explaining aspects of serious diseases.


VIDEO: This short clip from a My MedEdge video on Hepatic Encephalopathy (HE) shows how even simple animated graphics can improve comprehension, especially for newly diagnosed patients (video has no sound)


Part 6: On-Brand Promo Materials

With the website live and churning out content, My MedEdge wanted to bring awareness and understanding to healthcare specialists. First I collaborated with sales and created a how-to guide aimed at specialists and patients, which was distributed to key healthcare professionals that had provided guidance on the platform. 



After the initial users were onboarded and providing positive feedback, I worked with marketing to create engaging email communications. These would explain the platform and our goal to a wider audience:




As a final step in the product's rollout, a PowerPoint was developed to facilitate meetings and promote the product. For this step I rearranged, reworded, and enhanced each slide to tell the brand's story, communicating the values and benefits of the initiative.


Part 1: Logo and Palette

The company first worked with a talented agency to produce a logo and proposed colors. While the logo was applied to the designs, I was tasked with softening the colors and making the palette more inviting to patients and caregivers. After the two main colors were selected, I added cool accents like mint and teal to give the site a compassionate and calm presence.




Part 2: Two Unique User Flows

Two different user flows were necessary to support the providers and patients using the platform.


Part 3: Mid-Fidelity Wireframes

Working with product managers and development, I created wireframes for necessary pages, making sure to design interfaces that encouraged website engagement, content discovery, and usability.




Part 4: High-Fidelity Site Designs

For this step, I applied the branding, sourced key visuals, and brought the wireframe to life in Adobe XD. Some aspects, like the search engine, could be quickly integrated. Others like the playlist creation feature needed more layouts and oversight.





After the high-fidelity designs were approved, I annotated and provided pages in multiple screen sizes. I also altered experiences as needed to ensure a smooth implementation. 

Finally, when the site was built, I assisted in user acceptance testing, carefully inspecting the website for errors that would prevent users from completing their goals. 


Part 5: Video Graphics & Storyboarding

The company had been developing topics and recording speakers for dozens of patient videos while the site design was in progress. Now they had a library of recordings and transcripts, but needed storyboards and engaging, animation-ready graphics.

For this portion of the product, I developed storyboards that accounted for each step in the transcripts (generated from the pre-recorded videos).



Frame by frame, I then sourced or illustrated graphics for each scene and gained approval (or receive edits). After approval, the designs were handed to video production and transformed into engaging animations alongside the speaker's video recording. 





In this way we soon created a library of quick and informative videos that patients and providers would enjoy watching, with empathetic healthcare professionals explaining aspects of serious diseases.


VIDEO: This short clip from a My MedEdge video on Hepatic Encephalopathy (HE) shows how even simple animated graphics can improve comprehension, especially for newly diagnosed patients (video has no sound)


Part 6: On-Brand Promo Materials

With the website live and churning out content, My MedEdge wanted to bring awareness and understanding to healthcare specialists. First I collaborated with sales and created a how-to guide aimed at specialists and patients, which was distributed to key healthcare professionals that had provided guidance on the platform. 



After the initial users were onboarded and providing positive feedback, I worked with marketing to create engaging email communications. These would explain the platform and our goal to a wider audience:




As a final step in the product's rollout, a PowerPoint was developed to facilitate meetings and promote the product. For this step I rearranged, reworded, and enhanced each slide to tell the brand's story, communicating the values and benefits of the initiative.


Results

The launch succeeded! Multi-channel design management led to a consistent brand experience with unique interface experiences for different user groups and relevant, approachable education by providers.

The launch succeeded! Multi-channel design management led to a consistent brand experience with unique interface experiences for different user groups and relevant, approachable education by providers.

The launch succeeded! Multi-channel design management led to a consistent brand experience with unique interface experiences for different user groups and relevant, approachable education by providers.

70+

Educational videos created and animated, featuring real providers and caregivers

70+

Educational videos created and animated, featuring real providers and caregivers

70+

Educational videos created and animated, featuring real providers and caregivers

❤️

Successfully gained support from patients, caregivers, and healthcare providers

❤️

Successfully gained support from patients, caregivers, and healthcare providers

❤️

Successfully gained support from patients, caregivers, and healthcare providers

🌱

Library grew from a single topic to over a dozen diagnoses and subcategories

🌱

Library grew from a single topic to over a dozen diagnoses and subcategories

🌱

Library grew from a single topic to over a dozen diagnoses and subcategories

My MedEdge successfully gained support from the healthcare professionals targeted. The project grew and ultimately delivered 70+ patient education videos and other materials across a cohesive solution that combined UI, video education, and supporting materials.

From a UX perspective, this patient-centered interface helped develop a consistent user experience for recently diagnosed patients, while the visual approach reinforced the brand across the initiative.

My MedEdge successfully gained support from the healthcare professionals targeted. The project grew and ultimately delivered 70+ patient education videos and other materials across a cohesive solution that combined UI, video education, and supporting materials.

From a UX perspective, this patient-centered interface helped develop a consistent user experience for recently diagnosed patients, while the visual approach reinforced the brand across the initiative.

My MedEdge successfully gained support from the healthcare professionals targeted. The project grew and ultimately delivered 70+ patient education videos and other materials across a cohesive solution that combined UI, video education, and supporting materials.

From a UX perspective, this patient-centered interface helped develop a consistent user experience for recently diagnosed patients, while the visual approach reinforced the brand across the initiative.