Ellen Kalenscher-Birkholz

Public facing website

— PROJECT NAME

Public facing website


— ROLE

UX Designer

Accessibility coordinator

UX Researcher


— DATE

Current project

The original version of the public facing website has not been updated for well over ten years. Over that span of time a number of changes have been made to the company, the health insurance industry, and general web/web practices. With all of these changes, the website cannot keep up, and needed a complete overhaul.


For example, Moda Health expanded into multiple new states, and the original site was not expanded on, but instead, they created a new ‘version’ for those two new states. Moda also began servicing new clients, and had created new partnerships, and this current version of the site could not accommodate any of these updates. It was time for a fresh new look for our first point of contact with the public.

The problem

Modahealth.com is the front door for any new, or returning, members of Moda Health, and their associated networks. The problem is that we don’t have a very inviting, or enticing, welcome for all these folks. Between the lack of updates being made for some states, the lack of continuity between state content and navigation, and the complete disregard for accessibility, it was time for this project to become a priority.


Problem number two, this project has not been a priority. We are over two years into this project, and have to continuously put it on hold to accommodate other digital needs within the company. We’ve done a lot of great work to this point, and now we just have to wait for the finishing development touches.

The solution

We determined early in this process that we needed a complete overhaul of our current site. New navigation, new components, and a seamless experience between all Moda products, public facing and logged in. With the new look navigation, and components we can build something new, and up to date, including a refreshed information architecture, and newly designed experience.

The current site -Oregon

Here you can see an image of our Oregon home page. On this pate, there are two ways to navigate the site, no clear path for our users, and a very bland and confusing experience.

The current site – Idaho

And here, you can see the home page for the Idaho version of the site. As you can see, the difference between the two home pages is stark. A completely different experience for users in different states.

Mobile

Below you’ll see two versions of the current mobile site, underneath you’ll get a brief overview of the key differences.

Mobile – Oregon

Now let’s compare the current mobile version for Oregon and Idaho. As you can see, the OR version is lacking any real navigational element (no hamburger menu, etc). There is no way for the user to switch states, or really navigate the site on their phone.

Mobile – Idaho

This is clearly a completely separate site than Oregon. It has its own navigation, completely different components, and a full layout versus the basic look and experience of the Oregon version.

Research phase

Before doing anything for the new site we knew we had to do our initial research. We wanted to look at what fellow industry leaders were doing for their public facing sites. What kind of navigation they used, who they were appealing to, and what they deemed to be the most important parts of a website.


After doing some competitor research we threw together some low-fidelity mockups, and also ran some quick tests on Userlytics to get an understanding of how people interact with navigation, content, and generally found success on the new site.

HiOscar main navigation

Moda gray scale mockup 1

Kaiser main navigation

Moda gray scale mockup 2

Mockup, prototype, research again

In this phase we worked to build out the new components for our website. The unique aspect of this project is that we are able to create a fully refreshed molecular layout of the site. These components are also the first parts of the site to be built and implemented into our CMS.

The large, Moda branded, callout box

The Moda style tiles that have a flexible header, and number of tiles

The new accessible table

The Moda branded tile, that is fully customizable for color, and based on content.

Outcomes

The component outcomes allowed for us to create highly customizable, responsive, and up to date pieces of the larger puzzle. Each of our new components, of which these four are only a snippet, have allowed for us to create a new design library for this product.


With these new components we are able to drag and drop to create full layouts, dynamic pages, and a beautiful new experience that will make our products a breeze to navigate.

Content, delays, and IAs

Before we could create beautiful design concepts, we needed to create a new information architecture. Why might we need a new IA? Well that's a great question! The current site has an outdated architecture, and on top of that, the content was just as outdated. With this opportunity to completely redo the site, we knew that we wanted to zhuzh up our content as well.


The problem with this content revamp? We couldn't get our content track moving. We were waiting on subject matter experts who were unresponsive, we dealt with a lack of progress on writing new content, and eventually had to completely start over with a new content owner based on a decision made by our Chief Marketing Officer.


Because of these delays, this project is still in the design and build phase. We've taken a much more hands on and collaborative approach to content. I was able to work closely with the new content owner to create a brand new IA that accurately represented the experience we wanted users to have. Because of this collaborative approach, we were able to have in-depth conversations, and good banter around what felt like it benefited the business, and what may benefit our users. These conversations led to a brand new, reduced, IA that better represents the needs of our customers. You can see the old IA compared to a new version of the IA in this document.

Put it all together

I wanted to include just a couple of snippets into how this project has all come together. Unfortunately, this is all still a work in progress, but we are getting closer and closer to getting it live. But, with our new components, and our new IA, here are a couple of examples of pages that have been designed, and built in our staging environment.

Thoughts

While this project has been a long time in the making, and is still a work in progress, I am so proud of the progress that has been made. It gives me hope that it will be launched, and something that will allow the business and user experience to be better.