Graphic design

Illustrations and Animations for Digital Products and Social Media

Overview

Apart from typical UX Design, I have also contributed and established a design style for illustrations and animations that are posted on our site and on social media.

My Role

UI/Graphic Design Lead, Taking the illustration style the graphic designers use and making it more cohesive and branded for our website - more professional and more serious.

Who Was Responsible

Worked alongside the social team, project managers, and content architects.

Home Page Illustrations

Underneath the Legacy Hero Image on our home page, they placed three CTAs for our site's most popular sections. We had requested they use the initial dev builds of our Story Panel card that had just been created - a flexible and responsive component. We had wanted this component used with images turned off - however big surprise - they hadn't built that functionality in like requested. Meaning we had to throw images into the cards. I suggested photography, but they wanted what I dreaded - illustrations - right on the home page!

I created a more muted and simplified style for these illustrations than what we had previously done, and this started the new approach we would start to use on the rest of the site.

Home Page Illustrations - Children’s

Shortly after the home page illustrations were done, I received a request that made my blood run cold - jokingly referred to internally in the creative department as “Baby Doctors.” The Children’s Department wanted versions of the home page illustrations with children’s icons involved. We tried to push back - thinking this was not the right idea - parents are coming to that site with children with cancer - scared and anxious - doing something like this felt cheap.

Ultimately, what I created was subtle enough to keep everyone happy.

Health Library Social Share Images

Health Library articles are commonly shared across numerous social sites - this method of sharing is one factor in bring traffic to the Health Library. The social share image that would pop up was generic and not at all related to the actual article.

I designed over 20+ illustrations based off of an article’s potential institute that the article belonged to (i.e Neurology Institute, Heart Institute, etc.) and several other images based off of Health Library categories in the event the article didn’t have a related institute.

These default images had to address multiple health topics that could be featured, so it didn’t feel weird if it the imagery didn’t feel related to the article. A default image was also created and is occasionally used as a graphic across the site to represent the Health Library.

Here are a few of them:

Animated Reels / TikToks / Whatever You Want to Call Them - A Few Examples

We started doing animated content to support the social team, creating content that animated different Health Essentials articles and helping drive traffic to the blog.

I established timing consistency, animated effect styles, and do’s and don’ts to ensure that the user was able to properly view and experience the animations in a consistent and useable format.

None of us had any animation experience, so we had to learn on the fly