Year

2023

Keywords

Site design, marketing assets, creative mgmt, style guide

Medical Masterclass

UI/UX and creative management for a certified medical education website

Problem

In 2023, Total CME needed to fulfill a client contract for a series of continuing education programs on a rare disease, and required a designer to quickly orchestrate the website and brand design. In addition to a tight timeline and a highly specialized audience, the platform had to ensure users from a niche audience not only signed up but completed all courses and the final assessment.

The Solution

As Brand and UI Designer, I was tasked with expanding Total CME’s Medical Masterclass initiative into a fully formed product. The challenge was delivering a wide range of aligned assets that reflected the caliber of the educational content and differentiated the programs from existing offerings. To tackle this project, I designed a comprehensive e-learning site in Figma, commissioned a logo and color palette, and managed stakeholder approval and integration. I collaborated in sprints and problem-solved throughout the project. To ensure consistency, I also created a style guide and produced splash pages, email templates, and graphics for both the platform and promotional campaigns.

Responsibilities

✔️ Procurement and application of logo and brand palette

✔️ Procurement of site and marketing copy

✔️ Font and key visuals

✔️ Figma designs, creation & application of design system components

✔️ Layout, appearance, states, and behaviors

✔️ Email design and handoff with Figma

✔️ Product style guidelines and brand design rollout

✔️ Procurement and application of logo and brand palette

✔️ Procurement of site and marketing copy

✔️ Font and key visuals

✔️ Figma designs, creation & application of design system components

✔️ Layout, appearance, states, and behaviors

✔️ Email design and handoff with Figma

✔️ Product style guidelines and brand design rollout

✔️ Procurement and application of logo and brand palette

✔️ Procurement of site and marketing copy

✔️ Font and key visuals

✔️ Figma designs, creation & application of design system components

✔️ Layout, appearance, states, and behaviors

✔️ Email design and handoff with Figma

✔️ Product style guidelines and brand design rollout

Part 1: Site Wireframes 

Drawing on my experience designing e-learning websites, I mapped out the necessary pages and flows. I also focused heavily on designing an experience that encouraged busy healthcare professionals to engage with and complete a substantial amount of educational content.




Part 2: Product Style Sourcing

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-Fidelity 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. I also provided and altered flows and experiences as needed to ensure a smooth implementation.






Part 4: 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 5: 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 6: Splash Pages

With the site launched, the final task was to support specific retargeting campaigns. Marketing requested splash pages they could edit and A/B test for the debut courses, so I designed two on-brand pages in Figma. Each page aligned visually with the overall brand identity, reinforced the educational messaging, and encouraged users to sign up and engage with the courses.


Part 1: Site Wireframes 

Drawing on my experience designing e-learning websites, I mapped out the necessary pages and flows. I also focused heavily on designing an experience that encouraged busy healthcare professionals to engage with and complete a substantial amount of educational content.




Part 2: Product Style Sourcing

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-Fidelity 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. I also provided and altered flows and experiences as needed to ensure a smooth implementation.






Part 4: 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 5: 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 6: Splash Pages

With the site launched, the final task was to support specific retargeting campaigns. Marketing requested splash pages they could edit and A/B test for the debut courses, so I designed two on-brand pages in Figma. Each page aligned visually with the overall brand identity, reinforced the educational messaging, and encouraged users to sign up and engage with the courses.


Part 1: Site Wireframes 

Drawing on my experience designing e-learning websites, I mapped out the necessary pages and flows. I also focused heavily on designing an experience that encouraged busy healthcare professionals to engage with and complete a substantial amount of educational content.




Part 2: Product Style Sourcing

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-Fidelity 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. I also provided and altered flows and experiences as needed to ensure a smooth implementation.






Part 4: 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 5: 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 6: Splash Pages

With the site launched, the final task was to support specific retargeting campaigns. Marketing requested splash pages they could edit and A/B test for the debut courses, so I designed two on-brand pages in Figma. Each page aligned visually with the overall brand identity, reinforced the educational messaging, and encouraged users to sign up and engage with the courses.


Results

The Medical Masterclass platform successfully launched with learning programs for rare disease specialists. After one year it successfully met its engagement and participation goals with a dedicated group of healthcare professionals. The cohesive design and consistent product branding streamlined collaboration across design, development, and video teams. Website flows, marketing splash pages, emails, and supporting assets encouraged course completion and reinforced engagement. Together, these elements positioned the program for future expansion into additional courses and medical specialties.