Challenge
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
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.
