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.

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.

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.

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.

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.