The Metropolitan Health Plan (MHP) offers health services for residents of Hennepin County who are eligible for Medical Assistance (Medicaid) or MinnesotaCare. Most of the people who rely on MHP are generally under the poverty line and get assistance through MHP’s network of doctors, nurses, pharmacists, social workers and community health workers. Members who need assistance getting to and from their health services are also offered free or discounted transportation services through the plan.
Metropolitan Health Plan works hard to provide for its members and network. Unfortunately, their website just wasn’t working as hard. To fix this, Hennepin County approached Azul 7—who had hired me on as a contract designer at the time—to redesign their website.
During the lifecycle of this project, I collaborated with the design team to identify our audience and their needs for the site. I worked with the UX Lead to develop the site architecture and created wireframe documents. I turned those wireframes into a prototype for user testing. And I also created the visual styles for the final website.
Talking with people
Just before I was introduction to the project, the research team had gathered evidence and documented the pain points of the existing MHP site. They met with key stakeholders to identify their business goals and interviewed enrolled members, health care providers, and staff about their experiences and needs. And during their visits to MHP’s headquarters they took the time to conduct in-person observations in the lobby.
The research revealed how providers, care coordinators and staff were all using workarounds to complete common, and often repeated, tasks. When talking with people who had tried to use the site, almost everyone who was interviewed recounted how they found it confusing and frustrating to use. On top of that, we discovered most of MHP’s members were unaware the website even existed as a resource. Nobody the team interviwed enjoyed using the site, and the majority of interviewees recounded that they avoid it whenever possible.
“It’s easier just to send someone what they need than to try to tell them where to find it on the website.” – MHP Staff Member
The research backed up Hennepin County’s concerns and identified the ways their website was not adequately serving the needs of the people who rely on it most.
Designing for the right people
Our next step in making sure we were designing solutions to meet the needs of MHP’s audiences was to identify who we were designing for and what their needs were exactly.
I worked with the research team to help unpack the raw information they gathered during their on-site observations and interviews. In these unpacking sessions we discovered three primary groups who rely on the MHP website: Members, Providers, and MHP Staff. We also identified a secondary group of Care Coordinators who have external resources they rely on most and made sure to provide a jumping off point to the web portals only they need to access.
The Lead UX Designer and I collaborated to document our findings. We created a user persona to represent each of our three primary audiences. These personas would guide our design decisions to make sure we were meeting the needs and goals of each role.
Once we had identified who we were designing for—and made sure we had the content to meet their needs—the UX Lead and I began sketching potential solutions as wireframes. After a few rounds of working things out on the whiteboard, we arrived on a solution for a simple template that could be customized to fit relevant content. I translated our sketches into a wireframe document that identified our page types and the overall structure for the new site.
We remained mindful of our audiences and structured the site to serve the needs of MHP’s members first and foremost. We then offered secondary pathways that enabled providers and staff to quickly access the resources they need and use most often.
When it came to organizing content on the page, we would use a page template with 2-columns: one larger column for primary content and the other a narrower sidebar for related content. This approach allowed us to create a modular system of content blocks (we referred to as modules) that could be added to the sidebar of any page. I developed the patterns for these content modules so they could contain related information and tasks like: in-page navigation, links to related content, and other interactive elements like simple forms or downloadable files.
Remember those workarounds heard about during the research phase of the project? This modular solution allowed us to include common tasks and provide jumping off points to related resources on pages where it was needed. For example, we were able to offer a link to information about getting ride assistance on the search for a provider page.
Testing our assumptions
We were really excited with our solution, but before we rushed into visual design and development, we needed to first test our assumptions. I turned our wireframes into a simple HTML prototype with a working dropdown navigation menu and on-page hot spots. We invited some of the same people we interviewed to test the navigational hierarchy and to see if they could find the key information they needed to find. I also co-wrote a script to accompany the prototype that would be a guide to facilitate the user testing.
When it came to putting the design in front of our audience, we had concerns about the obviousness of our main navigation pattern. We chose to implement a horizontal overflow pattern which was an emerging trend at the time and a bit unconventional. But, to our delight, everyone who tested the site was able to navigate the site successfully using our menu!
A modular system of content modules
Since MHP is a service of Hennepin County, the majority of the visual design styles were already predetermined. We knew that the typography, logos and colors would need to match the styles set forth by the existing Hennepin County website. These constraints weren’t completely limiting. The team and I still had freedom to add personality through the use of imagery, iconography, and additional brand colors. We were careful to achieve the right balance when designing the visual styles for MHP. It needed to be able to stand on it's own and reflect the MHP brand as well as fit in with the greater Hennepin County website family.
One of the ways we were able to add personality was through our modular content blocks. I included a guide to specify the type of information that could be included in a module and how that information would look. I also made sure to included guidance for how the content in these modules should reflow when viewed on mobile sized viewports. Since these modules could contain iconography we also created a small icon set for the site. This set could easily be expanded upon to meet future needs of MHP.
Overall, simplicity and clarity were champions. We kept our audiences in mind with every design decision. Typography is large and bold, text is brief, and we used common language wherever possible.
“Anything patient-related needs to be at a third-grade reading level. Seventh grade is way too high.” - Care Coordinator
Since the launch of the redesign, Metropolitan Health Plan has gone though some changes and is now known as Hennepin Health. But many elements of our design still remain and continue to function as intended to serve the needs of Hennepin Health and its members to this day.