Interactive Micro-Content

Graphic design

Overview

We use interactive micro-content across our sites and blogs. These interactive pieces can help explain serious medical topics in a condensed, user friendly way to patients, help traffic and time spent on page, as well as offer additional ways of connecting with our user base.

My Role

Identifying articles published across our site that seemed like good candidates for micro-content - basing these decisions on complexity of the topic, seriousness of the issue, and if the article was a suitable candidate for a visual that could help explain the contents to the user in a simpler way.

Who Was Responsible

Collaboration with writers and myself.

A Quick Glimpse at a Few Examples

We used Ceros to create these and then embedded them in Health Essentials articles or the main site. When making them, we have to consider scalability - often, it can only be the same experience on both desktop and mobile, meaning the design had to scale down and be usable on a phone. Trust me - I love small type; these are missing some of that good old type hierarchy for the reason mentioned above. We also have limited space to design within set sizes - combine that with set standards for large type sizes that are viewable when scaled down, you really don’t have much room to create your ideal layout.

Working on these, I also established templates and standardized animation times so that other designers can get these out quickly, and so they can all have a consistent visual approach to animated timing.

Although these seem more like graphic elements - usability and accessibility are all considerations behind every design choice that goes into them.

A simple slideshow - this experience is templated and easy for others to pick up and use

Flu’s Serious Too

This was created for a “Flu’s Serious Too” campaign, it was launched during an initiative to encourage more people to get there flu shots. The campaign was set on our main site - where I am always weary of using illustrations on (in my personal taste, I think they can cheapen the Clinical nature of our site at times) - therefore I established a more minimal style with the graphics and implemented the idea of “scroll-tell” slideshow animation (something that was extremely difficult to do in Ceros, there are hundreds of hidden and unhidden layers just to make this thing work.

In the years since it went live it appears it’s gotten slightly buggy in some spots - luckily the campaign is over.

Contact Lenses: Do’s & Don’ts

A much less serious interactive - this one is more fun and lighthearted visualizing the do’s and don’ts of wearing contact lenses. This also established a new template for any type of “Do’s & Don’ts” slideshow.

Metastatic Breast Cancer

A much more serious interactive was required for a campaign on Metastatic Breast Cancer. With topics like these, it’s hard to create an interactive that doesn’t come across as cheapening the seriousness of the ailment. In this case, a symptom checker type approach was chosen - giving those experiencing the disease red flags to look for to help detect potential spread.

Skincare Routine: Day & Night

A simple slideshow for the order to apply skincare products. The visual uses colors and toggles to switch between recommendations for Day vs Night.

COVID: Do You Need to Isolate or Not?

This was created around the time I was hired at the Clinic - it was the height of Omicron, and the CDC had just released new guidelines on whether you needed to isolate. Many people were finding the guidelines confusing and complex - as well as controversial as they had shortened the window of time you needed to isolate. This experience helped users understand, based on their own symptoms, vaccination status, etc, what their exact isolation guidelines would be. Although it seems simple on the outside, I had to do a lot of hidden pathways and questions based on what answers the user selected.

Low Testosterone Logic Based Quiz

Based on analytics, quizzes have proven to be something users enjoy engaging with. For this one, I explored adding back-end knowledge so it would track your right and wrong answers and give you a score at the end - gamifying the experience. This was for a campaign for Low Testosterone awareness, and the quiz helped provide some background on whether certain things were fact or fiction on raising or lowering testosterone.