Digging Deep to Solve Problems

We here at Stotion really dig complex design problems. Whatever the project might be, we entrench ourselves in the industry, dig deep, get to the root of the problem, and build on that knowledge as a foundation of our designs. You can’t really solve a problem that you don’t understand — so yes, solving UX problems for SelectHealth has meant becoming pseudo-experts in health insurance. In fact, that’s one of the best parts of being a designer at Stotion; each design problem becomes a vehicle for learning, working, and solving quantum physics level design problems for our clients.

Giving Text Meaning & Purpose

It’s amazing what a well defined color is capable of.

SelectHealth loves green. And they should. Green is a major part of their brand and is an important visual differentiator between them and their competitors. But green had overstepped it’s bounds. When a color is overused, it loses meaning. And without meaning, color becomes decorative without being functional. Color without function is not living up to its potential We understand that it isn’t easy being green, so we wanted to help. We stepped in, embraced SelectHealth green, and started to give it an identity. New interfaces no longer use green all willy nilly. Green has become the hero color, and the guiding companion to the user. Green is used for primary calls-to-action, and is only used for buttons that represent the user’s primary objective. We found that when green was used sparingly, it became more beautiful and useful.

Orange already existed as a SelectHealth web color, but needed to be tamed to fulfill it’s spicy destiny. Orange, in all of it’s loud and warm glory, became the error-indicating color for the website. As the Tobasco sauce of the interface, a little bit has proven to go a very long way. Prudent use of orange gave the site a consistently helpful and calm feel, and allowed errors to be easy to identify and resolve.

SelectHealth green would not have been able to become so important were it not for the integration of blue. While SelectHealth already had a well-defined brand color palette, it was apparent that it was created specifically with print purposes in mind. Web interfaces often warrant a palette extension to help provide clues and insights to users, so blue was welcomed into the SelectHealth user experience as a guiding tool for hyperlinks. Now it is easier than ever for users to anticipate what they can click on, and what clicking on blue will do.

In with the good — out with the bad.

Sometimes the sad part of refining an interface palette is that certain colors have to be let go. Lavender and periwinkle were both hard working colors over the years but they weren’t pulling their weight on the interface. They were convoluting the palette. Trust us, we hate to see a good color go– but we had to stick to the primary color objective: use colors that complement the goals of the company and create the best experience for their users. A clean white interface with cool grays, accented with green and blue proved harmonious with SelectHealth’s goals to be helpful, clear, and approachable to their customers.

Do you notice anything different about this sentence? Look closely and you’ll see that the text is a darker black than the rest of the website. It is a minor thing, but we’re the minor kings — so we sweat the small stuff. All across SelectHealth we have systematically replaced “Blackity-black-black” with a very dark gray that is easier on the eyes. We call it “Web Soft Black” and it is our gift to your retinas.

We also formulated a SelectHealth green that is optimized for use on the web and on mobile devices. The old green was a direct translation of a Pantone, which printed as a rich green on paper but when it was used on screen it looked drab and sad, like thirsty grass. There is nothing wrong with the color itself, but creating a more vibrant green for the web made the brand span between mediums more cohesively.

Component Guides and Speccing

Because we were designing for a large development team both in-house and overseas, we worked hard to establish ways for the transition from design to implementation to be as smooth as possible. While optimizations of this workflow are constantly evolving, we are very happy with how creating a Component Guide and a Speccing System has resulted in higher fidelity implementations of our designs.

Component Guide

The SelectHealth Component Guide is kind of like a Lego set of SelectHealth pieces and instructions. It details how to build individual repeating components, and how to handle different types of variables. It’s a thing of beauty.

Blueprints

We meticulously specify the characteristics of our web pages to reduce the margin of error, and ensure that the vision we conceived in our designs becomes a reality on our clients’ webpage. This process of specifying sizes, colors, fonts, functionalities and other details about the page is what we call “Speccing” and it sure goes a long way when the rubber hits the road.

SelectHealth Enrollment Tool

Creating an online insurance shopping experience with benefits in every click.

Speaking to Everybody, One Person at a Time

Before you know what to say, you have to know who you are talking to. Ah, but there’s the rub: how do you define your target audience when your target audience is everybody? Health insurance is tricky like that. It is the only product that the US Federal Government has mandated its citizens purchase, so everybody is (or should be) shopping for it.

How do you eat an elephant? One bite at a time. Or in our case, we defined our conglomerate target audience one person at a time. Rather than operating on the assumption that every page could work for every person, we guided our friends at SelectHealth to define who these pages were for, and honed the experience accordingly.

Knowing who you are designing for makes all the difference in the world. Our designs incorporated expert tools for expert users, helpful tool-tips and on-boarding for new users, and clear, friendly instructions to create the easiest experience possible.

One example of customizing pages for our audience has been through the implementation of location-aware pages. Insurance options vary based on the zip-code, so we designed for pages to be location aware in order to prevent irrelevant options from being presented to the users.

Thinking Outside the Check Box

Check box buttons predominate the web as the go-to convention for multi-select functionality. While there is often wisdom in sticking to an established convention, we found some great efficiencies in thinking outside the check box and creating a multi-select toggle switch that is customized to SelectHealth. It’s a small but powerful detail that brings value to the user by incorporating SelectHealth green, improving browse-ability, and creating an enjoyable interaction. We also added a new layer of clarity to the conventional radio button by adding an arrow within the button to point to what the user was selecting. These two selectors are major players in the new SelectHealth interface.

Let the Navigation Be Your Guide

The SelectHealth Private Exchange tool is chock full of tasks and functionalities that would be overwhelming and disorienting without a well structured navigation. Naturally, we don’t want brokers, employers, and other users to suffer from website vertigo; so we created a navigation solution that provides just the right balance of structure and flexibility to anchor the user without restricting them.

The implemented navigation solution is structured around a chronological backbone, which helps the user approximate their progress, and see how close they are to completion. Status icons help teach and remind the user where they have been and what is next. Mega-menu help brokers and their proxies keep track of what group they are working on.

With a large and growing tool like this, it can be tempting to add more and more to the wonderfully simplified navigation. Don’t give in to that temptation. It’s supremely important to avoid crowding the most important navigation with less-important navigation.

SelectHealth App

Easy access to SelectHealth services on your mobile device? Sounds appetizing.

Hide and Go Search

We created a robust search function to help members quickly find what they are looking for without having to click through pages and pages of browsable content. Members needed a way to be able to do any number of jobs quickly and easily from the app, and that means anything from looking up a prescription drug, finding a local doctor, or pulling up their I.D. Card on their phone.

Your Very Own Dashboard

All of your pertinent information, right at your fingertips on your handy-dandy dashboard. What’s more, you can customize what you see so you can accomplish your tasks more easily than ever.

We Like Tests

Getting real users to go through the app while we recorded their thoughts and actions helped us to create a better experience. Their feedback helped to affect wording, placement, and flow from element to element. After each test, the app got better at helping the user get to the information they wanted.

20/20 Data Visualization

Infographics and Data Viz are as trendy as horn rimmed glasses, but how often are they really serving their purpose? When done well, infographics can simplify complex data, improve understanding, and help people accomplish their objectives. (Beautiful and beneficial!) When they are done poorly, they don’t simplify the data at all. They are just stylish without substance, or worse — they actually make the data more confusing! Using the wrong kind of infographic is like wearing glasses with the wrong prescription lenses because they convolute communication for the sake of supposed stylishness.

The Stotion approach to Data Visualization is simple: it has to make sense. For this infographic showing Health Savings Account balances, expenditures, and target amounts; we went through an extensive exploration process to make sure the info was in the graphic and the data was in the viz. We didn’t reinvent the wheel (pie chart) — we ditched the wheel altogether and came up with something entirely custom and delightfully logical.

Key contributors

Seth Taylor — UX Director
Matt Beynon — Interface Designer
Hunter Paramore — Interface Designer
Brett Bertola —Jr. Designer
Suzanne Smith Allen — Project Manager

Designed at Stotion before it was acquired and became A Tech9 Company. This article is intended to be a personal portfolio item of Seth Taylor so as to not rely on Stotion’s website.