Year
2023
Keywords
Site design, marketing assets, creative mgmt, style guide
Medical Masterclass
Medical Masterclass
Medical E-Learning Product
UX/UI and creative management for a certified medical education website
Problem
Learning a new skill takes motivation and time – can busy healthcare professionals be persuaded of the value?
Learning a new skill takes motivation and time – can busy healthcare professionals be persuaded of the value?
Learning a new skill takes motivation and time – can busy healthcare professionals be persuaded of the value?
In 2023, a digital education company aimed to develop a website delivering continuing education programs on a rare disease. The project required a designer to quickly orchestrate the website and brand design. The platform needed to support busy healthcare professionals through educational content and assessments, providing a smooth and engaging learning experience.
HMW Question
How might we cultivate and guide learners through a new skillset, given our expedited launch date?
Solution
Use our e-learning expertise to create elevated experience packages that teach relevant, in-demand skills.
Use our e-learning expertise to create elevated experience packages that teach relevant, in-demand skills.
Use our e-learning expertise to create elevated experience packages that teach relevant, in-demand skills.
As Brand and UI Designer, I expanded the Medical Masterclass initiative into a fully formed website and brand. The challenge was to deliver a wide range of aligned assets that reflected the quality of the educational content and differentiated the programs from other e-learning courses. I designed a comprehensive e-learning site in Figma, commissioned a logo and color palette, managed stakeholder approval, and supported development integration. To ensure consistency across materials, I created a style guide and produced splash pages, email templates, and graphics for both the platform and promotional campaigns.
Responsibilities
Creative management
Procurement of logo, palette
Marketing images, mockups
Mid and hi-fi site designs
Style guide creation and rollout
Email design and handoff
Creative management
Procurement of logo, palette
Marketing images, mockups
Mid and hi-fi site designs
Style guide creation and rollout
Email design and handoff
Creative management
Procurement of logo, palette
Marketing images, mockups
Mid and hi-fi site designs
Style guide creation and rollout
Email design and handoff
Part 1: Mid-Fidelity Wireframes
Drawing on my experience designing e-learning websites, I mapped out necessary pages and flows for the platform, prioritizing an experience that encouraged busy healthcare professionals to engage with and complete educational content.
Part 2: Product Style Management
With a strong brand name and premise already provided, I engaged a talented freelancer to create the logo and color palette while I focused on site designs. I communicated the brand premise, provided guidance, and reviewed iterations. I then shared the three finalists with stakeholders, who approved one for use.
Part 3: High-Performance Marketing Assets
Generative AI solutions:
Stills gathered from the initiative's high-quality educational videos:
Illustrated value with final package mockups:
(To be mailed to users who completed the experience)
Part 4: High-Fidelity Site Designs
For this step, I applied the branding to a robust, high-fidelity mockup in Figma. Working closely with a product owner, I finalized flows, assisted with handoff to development, and supported user acceptance testing.
Part 5: Growth-Oriented Brand Guidelines
With the brand approved and applied to one key part of the project, it was time to share with others. For this task I created a document with brand guidelines and dispersed the final PDF (paired with a folder of assets) to departments like video production, marketing, sales, and graphic design to assist them in generating on-brand materials.
Part 6: Responsive Email Design
Figma is great for email design, so for marketing, I created a set of responsive, developer-friendly email designs in Figma that could hold both custom campaigns and automated, behavior-based messages. I also reviewed and approved the developed builds to ensure they maintained visual and functional consistency.
Part 7: Conversion-Friendly Splash Pages
With the site launched, the final task was to create two on-brand splash pages for further campaigns. These pages visually aligned with the overall brand identity, supported sign-ups, and encouraged engagement with debut courses.
Part 1: Mid-Fidelity Wireframes
Drawing on my experience designing e-learning websites, I mapped out necessary pages and flows for the platform, prioritizing an experience that encouraged busy healthcare professionals to engage with and complete educational content.
Part 2: Product Style Management
With a strong brand name and premise already provided, I engaged a talented freelancer to create the logo and color palette while I focused on site designs. I communicated the brand premise, provided guidance, and reviewed iterations. I then shared the three finalists with stakeholders, who approved one for use.
Part 3: High-Performance Marketing Assets
Generative AI solutions:
Stills gathered from the initiative's high-quality educational videos:
Illustrated value with final package mockups:
(To be mailed to users who completed the experience)
Part 4: High-Fidelity Site Designs
For this step, I applied the branding to a robust, high-fidelity mockup in Figma. Working closely with a product owner, I finalized flows, assisted with handoff to development, and supported user acceptance testing.
Part 5: Growth-Oriented Brand Guidelines
With the brand approved and applied to one key part of the project, it was time to share with others. For this task I created a document with brand guidelines and dispersed the final PDF (paired with a folder of assets) to departments like video production, marketing, sales, and graphic design to assist them in generating on-brand materials.
Part 6: Responsive Email Design
Figma is great for email design, so for marketing, I created a set of responsive, developer-friendly email designs in Figma that could hold both custom campaigns and automated, behavior-based messages. I also reviewed and approved the developed builds to ensure they maintained visual and functional consistency.
Part 7: Conversion-Friendly Splash Pages
With the site launched, the final task was to create two on-brand splash pages for further campaigns. These pages visually aligned with the overall brand identity, supported sign-ups, and encouraged engagement with debut courses.
Part 1: Mid-Fidelity Wireframes
Drawing on my experience designing e-learning websites, I mapped out necessary pages and flows for the platform, prioritizing an experience that encouraged busy healthcare professionals to engage with and complete educational content.
Part 2: Product Style Management
With a strong brand name and premise already provided, I engaged a talented freelancer to create the logo and color palette while I focused on site designs. I communicated the brand premise, provided guidance, and reviewed iterations. I then shared the three finalists with stakeholders, who approved one for use.
Part 3: High-Performance Marketing Assets
Generative AI solutions:
Stills gathered from the initiative's high-quality educational videos:
Illustrated value with final package mockups:
(To be mailed to users who completed the experience)
Part 4: High-Fidelity Site Designs
For this step, I applied the branding to a robust, high-fidelity mockup in Figma. Working closely with a product owner, I finalized flows, assisted with handoff to development, and supported user acceptance testing.
Part 5: Growth-Oriented Brand Guidelines
With the brand approved and applied to one key part of the project, it was time to share with others. For this task I created a document with brand guidelines and dispersed the final PDF (paired with a folder of assets) to departments like video production, marketing, sales, and graphic design to assist them in generating on-brand materials.
Part 6: Responsive Email Design
Figma is great for email design, so for marketing, I created a set of responsive, developer-friendly email designs in Figma that could hold both custom campaigns and automated, behavior-based messages. I also reviewed and approved the developed builds to ensure they maintained visual and functional consistency.
Part 7: Conversion-Friendly Splash Pages
With the site launched, the final task was to create two on-brand splash pages for further campaigns. These pages visually aligned with the overall brand identity, supported sign-ups, and encouraged engagement with debut courses.
Results
Participation goals were met! Medical Masterclass was a perfect fit for learners, equipping providers with in-demand skills through a multi-step journey carefully designed for completion.
Participation goals were met! Medical Masterclass was a perfect fit for learners, equipping providers with in-demand skills through a multi-step journey carefully designed for completion.
Participation goals were met! Medical Masterclass was a perfect fit for learners, equipping providers with in-demand skills through a multi-step journey carefully designed for completion.
🎓
Multi-episode masterclasses successfully published
🎓
Multi-episode masterclasses successfully published
🎓
Multi-episode masterclasses successfully published
✅
Learners successfully engaged in all aspects of the education
✅
Learners successfully engaged in all aspects of the education
✅
Learners successfully engaged in all aspects of the education
👍
Cross-platform designs and materials supported a robust initative
👍
Cross-platform designs and materials supported a robust initative
👍
Cross-platform designs and materials supported a robust initative
The Medical Masterclass platform successfully launched with educational programs for rare disease specialists, driving engagement and participation from a dedicated group of healthcare professionals.
From a UX perspective, the project highlights how consistent branding, clear flows, and well-designed educational touchpoints can support learning. The cohesive design streamlined collaboration across design, development, and video teams, while website flows, marketing splash pages, and emails encouraged course completion and reinforced engagement.
Together, these elements positioned the program for future expansion into additional courses and medical specialties.
The Medical Masterclass platform successfully launched with educational programs for rare disease specialists, driving engagement and participation from a dedicated group of healthcare professionals.
From a UX perspective, the project highlights how consistent branding, clear flows, and well-designed educational touchpoints can support learning. The cohesive design streamlined collaboration across design, development, and video teams, while website flows, marketing splash pages, and emails encouraged course completion and reinforced engagement.
Together, these elements positioned the program for future expansion into additional courses and medical specialties.
The Medical Masterclass platform successfully launched with educational programs for rare disease specialists, driving engagement and participation from a dedicated group of healthcare professionals.
From a UX perspective, the project highlights how consistent branding, clear flows, and well-designed educational touchpoints can support learning. The cohesive design streamlined collaboration across design, development, and video teams, while website flows, marketing splash pages, and emails encouraged course completion and reinforced engagement.
Together, these elements positioned the program for future expansion into additional courses and medical specialties.