Senior Designer + Animator
HSA_LandingPage_Anim.gif

ALEX | HSA

 
 

ALEX HSA is an interactive task dashboard and app created by Jellyvision Inc and HSA Bank, designed to boost engagement and investment in HSA accounts. I led the branding, style guide development and oversaw the product's visual design from concept to launch. I also executed multiple 360 marketing campaigns to promote ALEX HSA, which includes email and social media banners, landing pages, and physical promotional materials. Additionally, I created illustrations and infographics for blogs and the website, ensuring consistent messaging across all employee communications.

 

Logo Design

The ALEX HSA logo features an abstracted dollar sign, symbolizing financial clarity and accessibility. Its versatile design seamlessly integrates into various mediums, including animations, patterns, and print. Its simplicity embodies the goal of “simplifying HSA fund management,” and resonates with users seeking financial wellness and straightforward solutions for their health savings accounts.

HSA Logo (stacked)

Logo pattern

Investment pattern

Open Enrollment pattern

 

Style Guide

With every new product, one of the biggest challenges is creating a style guide. I personally love making them because, as contrary as it may sound, there is a freedom in establishing the rules. Once you know what the rules are, the sooner you can find ways to push your boundaries and advance your branding. ALEX HSA’s style guide was quite extensive (11 pages). I not only developed brand standards for typography, color palettes and infographics, but also designed templates and best practices for animation and video.

Style Guide | Page 2: A break down of the color palette and color use

Style Guide | Page 4: An introduction to our iconography and icon library

 

Landing Page

I worked closely with the UI/UX team to tackle the landing page layout and color design. I also incorporated subtle animated gifs and minimal line art to break up large blocks of color (bottom dark blue panel). The use of this line art also extended to printed and digital marketing materials.

 

Animated Dashboard Headers (multi-stepped)

ALEX HSA’s dashboard needed some visual interest and added interactivity. So I created over 50 multi-stepped animated headers. We called them “multi-stepped” because each animation consisted of 2-6 steps that were tied to button clicks (pictured is a 4-step animation). Every time the user clicked the forward button, they would see the next step of the animation. Since we used Lottie as our file format, we had the added benefit of each animation step playing in reverse when clicking the back button.

More Animated Dashboard Headers…

Bank Maintenance Header (4-Step)

Prescription Costs Header (2-Step)

Big Medical Expense Header (2-Step)

401k and HSA Match Header (3-Step)

 

Debit Card and Mailer

When developing the style for our printed materials we decided to keep things simple. A straight forward layout with minimal art to accommodate and highlight the debit card in the center panel. The line art from the landing page was also used here to break up the dark blue card, but still allow clarity of the text.

Mailer + Debit Card

Debit Card (features line art used across all printed materials)

 

Promotional

I also produced digital, print and branded merchandise to help boost customer engagement, and promote ALEX HSA at conferences and events. Pictured are a set of customizable post cards with abstract spot illustrations. HR representatives would use these in either digital or print format to leverage helpful HSA-related information, like savings, tax advantages or Open Enrollment announcements. We also produced branded merchandise like tote bags, notebooks and cell phone chargers.

Customizable Postcards

Branded Tote Bag

 

Email and Social Media

HSA account holders log in to their accounts an average of only seven times a year. So we implemented a two-pronged strategy:  (1) Engage + Activate: We launched targeted email campaigns to encourage users to log into their accounts. (2) Maximize Engagement: During these login moments, we provided personalized action items highlighting money-saving opportunities within their employer benefits beyond just their HSA. My animated banners served as the main “attention-grabber,” while their corresponding emails or texts prompted users to take specific actions.

Investment High Touch Email Header

More Email banners…

HSA Contribution Increase Header

HSA Investment Header

Inactive User Header

Investment Nudge Header

 

Blog Illustrations

Jellyvision wrote several articles highlighting the advantages of HSA accounts, with an emphasis on their potential for future investment. On average, retirees spend about 15-20% of their annual income to healthcare expenses. So investing in your HSA not only offers tax-free benefits, but also serves as an effective way to save for long-term healthcare needs and financial goals.

Contribution Increase illustration

Growing Future Investment illustration