Solution
As Brand and UI Designer, I was responsible for expanding the proposal into a fully realized product. The challenge involved not only designing the website interface but also producing 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 and maintaining close communication with developers and directors to ensure alignment.
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 brand palette, product styling, and key visuals
✔️ Application of brand logo and copy
✔️ Site designs, handoff, user acceptance testing
✔️ Video storyboards and graphics
✔️ Pitch deck and user handout graphics and layout
Part 1: Logo and Palette
Total CME 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.
With the logo and palette finalized, I transferred the logo to our video production department in an animation-friendly format, which enabled the team to create a quick animation that would bookend each video.
Part 2: Site 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 3: 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, were in use on other Total CME platforms and could be quickly integrated. Others like the playlist creation feature were new and 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 4: Video Graphics & Storyboarding
Total CME 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).
A typical storyboard for a My MedEdge video was anywhere from 12-20 frames
Frame by frame, I sourced or illustrated graphics for each scene and gained approval (or receive edits) from project management and the scientific lead. 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.
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 5: Marketing & Onboarding Materials
With the website live and churning out content, My MedEdge needed to bring awareness and understanding to healthcare specialists. This would be key to the platform's success, as lack of comprehension would reduce conversion rates.
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 test users were on the platform and providing positive feedback, I worked with marketing to create engaging email communications. These would explain the platform and our goal to a slightly wider audience of healthcare professionals.
Part 6: Client-Facing Deck
As a final step in the product's rollout, client-facing materials were developed to draw interested companies and expand the topics offered. Working in Powerpoint, I rearranged, reworded, and enhanced each slide to tell the brand's story, communicating the values and benefits of the product to clients.
Result
The project delivered a cohesive solution that combined UI, video content, and supporting materials. The patient-centered interface and playlist feature established a mode to onboard recently diagnosed patients with complex diseases, while the consistent visual approach reinforced the brand across the initiative.
