Cindy Brummer

UX Designer and Strategist | Design Leader

Central Health UX Redesign

User-focused redesign to help put the focus on patients

Design Summary

Central Health turned to Standard Beagle for a second time for help redesigning its main website to focus on patients. We worked with a Dallas-based marketing agency on this project, which would handle the visual branding. Our role was to bring user experience expertise. We started with a discovery and ideation session with the stakeholders to align everyone to the problem we needed to solve. Then I performed user testing, designed wireframes, and testing prototypes on users again.

Design Process

Problem definition

We were asked to join the project by Belmont Icehouse, a marketing agency based in Dallas that would be doing overall branding for the new site. Standard Beagle was the digital implementation team, and my role was lead UX designer.

Our approach to our phase of the project followed four main steps: discovery and background research, user research and testing, UX design, and UX verification through user testing. The stakeholders had expressed that the site needed a new look and feel and that it needed a new patient-focused lens. Findings uncovered in our initial review of the website brought up the following questions about user experience:

  • Do users understand where services and location information can be found on the website?
  • Are users confused by the multiple layouts used throughout the site?
  • Do users understand how affiliates comprise the Central Health Enterprise?
  • Do users understand how to access information about MAP and how to enroll?

To kick off the project, I knew it would be important to align everyone on the project and ensure the stakeholders’ goals were met. I requested a vision building meeting to assist in defining the problem.

Ideation

Vision meeting participants agreed on the target demographic for the redesign:

  • Potential patients
  • Current patients
  • Travis County residents

Further discussion determined that potential and current patients often have a mindset that is more crisis-oriented. These users need to know information “right now.” Often, they prefer to send electronic messages rather than calling. It was brought up that the current Central Health website was never designed to be a patient-centric tool.  It was intended to serve as  a clearinghouse for staff members and board members to put information.  This new direction is to focus on how to serve the patient, not the central heath staff.

User Stories

Additionally, participants went through an interactive exercise to create user stories based on their views about how users use the website. Each participant was provided with Post-It notes and a sharpie and asked to create as many user stories as they could think of in the following format:

As a [type of user], I want [some goal], so [some reason].

Each participant created at least two user stories and added them to a large white board in the meeting room. I then had three participants do a “silent sorting” exercise. The participants worked together to group the user stories together into buckets of needs. Finally, the entire group prioritized the user stories through “dot voting.” Each participant was provided with three dot stickers and voted on the user stories they felt were most important to the vision of the website.

 

Analytics analysis

I completed a full website review and inventory of the site. I reviewed key sections of the site, asked questions about the usability of the section, and recorded our findings and recommendations. Questions included:

  • Is the website mobile friendly?
  • Do pages load in under 2 seconds?
  • Is there an obvious relationship between the navigation and the page the user is currently viewing?

Key recommendations:

  1. Ensure site redesign templates include mobile phone and tablet wireframes that are specific to mobile devices. Focus should be given to mobile devices using Apple iPhone.
  2. Use bolder navigation design to provide additional clues to user.
  3. Add breadcrumb navigation to the site layout/templates.
  4. Use a layout framework that is consistent across page templates, grouped by content type.
  5. Consistently show toggle in the same manner and in the same location as appropriate.
  6. Clearly indicate the most important content on the page with a clear call to action item focused on the user stories developed by the stakeholder.
  7. Continue to provide multiple opportunities to explore deeper into the site.
  8. Remove or redesign content layout to add additional white space.
  9. Design a clear hierarchical content structure.

Inventory

Because the website review only touched on key pages and templates on the site, I conducted a full inventory to catalog all pages and note website elements and functionality. This inventory was used to inform the testing scenarios as well as capture an understanding of all pages on the site to ensure that the design takes them into account.

User Testing and analysis

We recommended an initial user experience research phase to look at how users currently flowed through the website and to identify major sticking points.

Design of research and user questions
We wanted to gain a better understand of the current user flow so we could make sure we are solving the right issues with design. Our primary and secondary research questions gave us a direction for our testing and help us develop the appropriate questions to ask users about their experience. The research questions included:

  • Task completion – How well does the site support our users’ ability to accomplish key goals and tasks?
  • Navigation and information architecture – How well does the site structure support users’ ability to accomplish their tasks? Can they navigate to where they want to go and accomplish their tasks quickly and efficiently? What pathways do they take?
  • Content and terminology – Do our users understand the content and does it help them accomplish their tasks?
  • Layout and visual design – What are users’ impression of the visual design?
  • Communication and site impressions – What are our users’ overall impressions of the site? Does it adequately communicate what users can/are required to do with the site?

User testing
User testing does not need to be expensive or extremely time consuming. By designing the right scenarios, we expected to uncover 80% of the most pressing issues with just 3 to 6 users. This work included:

  • Finding participants (we worked with Central Health to identify 3-6 appropriate participants)
  • Designing testing scenarios
    We conducted an in-person usability study with six users at the Southeast Health & Wellness Center in mid-March 2019 in order to gather insights into user performance and unmet needs. We recommended testing with this group because it represents many of the typical users on the website. Users performed a series of tasks in a room with a facilitator and two observers. Each test was captured on video. According to usability experts, testing 6-12 users is enough to identify 80% of common usability issues. Participants volunteered their time for each 30-45 minute testing session. They were provided with Central Health branded items and food as incentive for their time.

Analyze findings
After testing completed, I synthesized the notes and video and conferred with the larger team to understand and analyze the issues encountered. The study provided us with actionable insights on how to optimize the user experience for users and concrete recommendations for improvements based on research findings.

Report recommendations
Our findings were presented with recommendations to the Central Health team for feedback and collaboration. Findings in this phase included:

  • Search is a key element that users will employ on the site.
  • Users expect search to function like Google, i.e. – using natural language keywords, rather than exact match keywords.
  • Users expect to find Spanish in the top right corner of the site on every page.
  • The majority of all traffic on the site is to information about the Medical Access Program (MAP) and finding information in this section is not immediately obvious or easy for users.

Design Recommendations

Based on these and additional findings, we made the following design recommendations:

  1. Ensure site redesign templates include mobile phone and tablet wireframes that are specific to mobile devices. Focus should be given to mobile devices using Apple iPhone.
  2. Use bolder navigation design to provide additional clues to user.
  3. Add breadcrumb navigation to the site layout/templates.
  4. Use a layout framework that is consistent across page templates, grouped by content type.
  5. Consistently show toggle in the same manner and in the same location as appropriate.
  6. Clearly indicate the most important content on the page with a clear call to action item focused on the user stories developed by the stakeholder.
  7. Continue to provide multiple opportunities to explore deeper into the site.
  8. Remove or redesign content layout to add additional white space.
  9. Design a clear hierarchical content structure.

UX Wireframes

Following user testing, I used the testing recommendations to design the site templates. I based my designs on my extensive knowledge of WordPress and its capabilities for its templates. Throughout, I referred back to the content inventory to make sure I wasn’t missing over overlooking content that needed to be considered in the design.

I designed more than 10 templates, and my wireframes showed mobile views as well as planned interactions.

User testing and UX verification

The purpose of this phase was to test the original design prompt for this project: The website’s primary purpose should help patients find services and understand the Central Health network.

The user testing attempted to answer the following questions:

  • Does the proposed solution help patients find services and information on the website?
  • Does the proposed solution help users clearly understand how to access Spanish-language resources?

User testing was conducted in-person using wireframes loaded into Invision so participants could click through like a real digital product.

Prototype Description

I tested two wireframe prototypes — desktop and mobile. These wireframes show site structure and content placement, but not visual design or branding. The wireframes were located in Invision.

Participants

Participants were individuals visiting the CommUnity Care Southeast Health & Wellness Center. We tested 6 individuals. A video camera captured participant comments and the screen. Additional notes were be taken by hand.

Summary of Key Findings

Overall, testing verification took half the time of the initial testing. Our overall impression was that the scenarios were easier to accomplish, and all participants felt confident they were able to complete each task successfully.

I discovered several key insights during testing.

  1. Users did not distinguish MAP as an insurance. They consider it a Medical Service.
    In general, when users were asked to find MAP information, they did not consider searching under insurance. They looked under Medical Services. This behavior indicates that users do not distinguish the need for coverage from the need for care. To users, MAP is care, and the most logical place to find care is under navigation labeled Medical Services. This indicates that MAP should be relocated in the navigation.
  2. Users assumed all locations would be under locations.
    The users who were asked to find MAP locations typically did not think to look under MAP. Instead, the looked under locations. The current navigation map has 3 pages under locations (SEHWC, Downtown, and Eastern Travis County initiatives). The MAP locations page is under the MAP section. This indicates that MAP locations should be relocated in the navigation.
  3. Users did not rely on search.
    This was both surprising and validating. The users in this study did not use search. They commented that the site was easy to use and would not have needed it. This indicated that the site flow is improved and users feel confident in their navigation choices, without relying on search for basic and important tasks.
  4. Users rarely accomplished the tasks the same way.
    Each user navigated the site in a different way. Some used the top navigation. Some used the home page hero boxes, and others through the content. This indicates that having multiple pathways through the site to the same destination is an important element that should be retained.
  5. Users did not scroll.
    This may have been a function of working with a rough prototype, but interestingly, users focused on the top nav instead of scrolling. This is in stark contrast to the original user testing group, which focused on reading the content.
  6. Users primarily use mobile devices.
    Most participants shared that they frequently use mobile websites and apps. This indicates that the mobile-first approach in the design is an important element.

Revisions

Based on the testing outcomes, we recommended the following design revisions and recommendations:

  1. Spanish language access
    Based on the results, the location of the Spanish toggle is correct, but can be improved and supplemented. We recommend using a bright color, ample padding. and adding appropriate icon for the button so it is visible and accessible to all users. We also recommend adding a Spanish language link in the footer as a supplement.
  2. Navigation shuffle
    The titles of the links meant different things to participants than what we expected. They assumed MAP information would be included under Medical Services. They did not think to look under Insurance. They also assumed Locations would include MAP locations. In addition, For Providers was confusing.
    We recommend changing the navigation to bring MAP out to a top level section. It should replace Insurance in the main nav and Insurance should be moved to the secondary nav above, where it is still accessible above the fold.
  3. Move MAP to top level page
    As the most popular section on the website, MAP should take a higher position on the site and become a top level page. This will eliminate the confusion and allow users quicker access to a key element.
  4. Add MAP to home page hero boxes
    Because users have shown that they take multiple pathways to the same information, we recommend adding MAP to one of the 4 boxes on the hero – in place of Insurance or Medical Services.
  5. Add MAP locations to the dropdown navigation under Locations
    Structurally, the MAP locations page should remain in the MAP section, but it should ALSO be added under Locations. This allows users multiple pathways to an important resource and eliminates confusion.
  6. Move For Providers to footer
    Because this link confused some users and is not a primary draw for the target audience, we recommend moving it to the footer, below the fold.
  7. Add direct links to CommUnity Care and other partners
    In listening and observing the users, we discovered that they expected to be connected directly with clinics. We recommend reducing the friction and giving users direct links to key pages on the CommUnity Care website, Dell Medical, and others as appropriate. For example, the pages under Medical Services are currently landing pages for resources. Rather than adding friction, links under Medical Services should go directly to these sites. The navigation can be expanded to include the resource and partner information, and the off-site links can open in a new tab. This direct connection will help patients find what they need faster and more closely link the partner organizations to the parent brand: Central Health.

I made revisions to the wireframes and notated them for development.