Design Ecosystem

Stride Health
Product Design | Visual Design | Component Libraries
Project Overview
Stride is a resource for independent contractors to receive all of the things full time employees might get from an HR department like healthcare, tax withholdings, etc. Stride has health, dental and vision insurance for sale through the marketplace and a tax calculator app.

Usage and conversion across all products was healthy, but users weren't cross pollinating. One major design issue was that each product and it's associated marketing efforts looked radically different from each other. User research showed most users didn't realize it was the same brand providing them with these tools. Stride needed a unified experience that had a welcoming and friendly yet professional brand voice. I led our product and marketing design teams as well as an on-staff illustrator through this effort.

The focus was to make Stride feel easy, simple, friendly, secure and not intimidating. Purchasing health insurance and paying taxes are difficult and emotional tasks that people avoid dealing with. They are heavy on cognitive load, require preparation, organization and require highly personal inputs. Building trust is key.
The Goal
Generate a living document UI kit in sketch of reusable components for the design team to work out of, ensuring vigilant consistency. I also put workflows in place with the team to collaborate and critique any new elements that were added to the kit after this effort.

Build a wiki with the engineering team documenting how to build each component and ensure all components matched and were reusable across all platforms.

Existing Design

The Problem
  • Inconsistent. The tax offering looks radically different from the insurance offerings, and the health funnel looks different on different devices. Users don't always know they're getting emails/notifications from the same company.
  • No hierarchy. Every button is the same shape and size so users aren't sure which actions to take first.
  • The site isn't welcoming and feels like work. The challenge: how can we make health insurance feel less intimidating?



The Solution: Atomic Design

The best way to build a consistent brand experience is to re-edesign every element across all experiences starting with the small and working up to complete pages.

‍




1. Color & Type

I chose colors that brought life and energy to the screen. The palette leans to calming blue hues to mitigate stress. Blue is also associated with nature and health. The green is the primary action color that all other colors work around; it's bright, eye catching and associated with money. Only one thing per screen is allowed to be green.

‍
Color gradients allow for more depth and variety in a brand
Open Sans

Developed with an upright stress, open forms and a neutral, yet friendly appearance, Open Sans is the perfect font for making Stride users feel at home. It's also optimized for legibility across print, web and mobile interfaces making it the perfect font to tie everything together.





2. Elements

The elements were designed to feel friendly and responsive to human interaction. The thoughtful color, rounded edges and fun illustrations were designed to make filling out painful forms more fun and encouraging.  Below is some shots of what our actual UI Kit looked like.
‍

‍
Fields



Buttons



Illustrations

I worked with an overseas illustrator to define our illustration style. He made a library of hundreds friendly illustrations to be used across all platforms to help solidify a brand identity and make our products more fun to use.
‍

Together we developed a library of hundreds of illustrations to use across all platforms and marketing campaigns.



3. Components

These are slightly more complex elements in a UI that bring several elements together. Here's a small sample of some of the reusable components I designed in Sketch, which quickly became our design bible. All were composed with built in padding for easy copy/paste workflows.
‍
‍

Cards & Badges



Responsive Navigation



Notifications


Lists



4. Layouts

These were the rules for the scaffolding of how to build pages. I created an art board for every possible grid scenario for all of the designers to start projects from. They could copy/paste containers to create content rich layouts from.
‍



5. Pages

Designers thrive with rules. Once I put all of the rules together, I redesigned every screen to adhere to them which resulted in a cleaner, easier to use and more cohesive experience across all platforms.
‍
M AD e B Y M E  © 2 0 1 9
VSCOLINKEDINInstagram



1. Color & Type