Central Health Responsive Redesign
Redesigning the website to focus on patients
Central Health needed to update its website.
The website had originally launched several years earlier and had grown immensely in scope. The Travis County healthcare district found that it was no longer serving their needs. The website was heavy with financial information and documentation for stakeholders, but patients had a hard time finding information about the Medical Access Program (MAP).
How might we design a website that helps connect patients with healthcare?
The initial scope of this project was for UX research and design. Later, we were brought in to develop the designs and move the site to a new host.
This project was delayed due to COVID-19. Our work paused in anticipation of a branding effort which was later tabled. That’s when we built the site using the existing branding. The site is expected to be updated once the new branding is approved.
During our process, we collaborated closely with both Belmont Icehouse and the client. We documented each step in our design process to show stakeholders our process for decision-making.
Central Health issued an RFP for a new website redesign, and it was awarded to one of the marketing agencies in its vendor pool, Belmont Icehouse.
Standard Beagle was brought into the project for our expertise in UX Research, UX Design and Iterative Development.
- Understand what’s working and what needs improvement with the current site
- Design layouts that best help patients find information they need, while taking stakeholder needs into account.
Standard Beagle worked closely with Belmont Icehouse, which provided project management and visual design, to collaborate on the project.
The new website is patient-centric and easy to navigate.
When the site launched it was well-received by patients as well as stakeholders. The Central Health team, which updates content on the site, has found it easy to adjust and edit. We are continuing to monitor and maintain the site.
We kicked off the project with a vision meeting with the stakeholders.
Our goal was to make sure we fully understood the stakeholders’ vision and align us all in the same direction.
Stakeholder Vision Session
We facilitated a brainstorming session for this meeting. Initially the group answered a number of questions we had from reviewing the site.
Then, 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. Three participants volunteered to 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. This session generated our design prompt.
The website’s primary purpose should help patients find services and understand the Central Health network.
We reviewed Central Health’s unfiltered Google analytics for the previous year.
Users of the site tend to be young, with the top age range falling between 25 and 34 years old. Site users tended to be female, with 59.7% female and 40.3% male.
By far, English is the language that most users have set in their browsers. A smaller percentage had their browsers set to variations of Spanish and other languages.
Most of the browsers accessing the site are on a desktop. Mobile devices are the next most popular.
The top visited pages on the site are in the MAP section, but also include the home page and careers.
We reviewed key sections of the site, asked questions about the usability of the section, and recorded our findings and recommendations.
- 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.
- Use bolder navigation design to provide additional clues to user.
- Add breadcrumb navigation to the site layout/templates.
- Use a layout framework that is consistent across page templates, grouped by content type.
- Consistently show toggle in the same manner and in the same location as appropriate.
- 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.
- Continue to provide multiple opportunities to explore deeper into the site.
- Remove or redesign content layout to add additional white space.
- Design a clear hierarchical content structure.
Initial User Testing
The purpose of this phase was to observe how users navigate the site, pinpoint problem areas, and make recommendations to inform the design phase.
We conducted an in-person usability study with six users from the patient population in order to gather insights into user performance and unmet needs. We recommend 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.
Findings and Recommendations
Based on the findings, we recommended the following design changes as part of the overall user experience.
- Focus on Search
Users by and large preferred to use search to find information they needed. The fact that search was not functioning not only impaired their progress, but also caused some users great frustration. Some even would have left the site to search on Google or given up entirely.We recommended redesigning with the user preference for search.
- Make calls-to-action and navigation terminology clear and concise
Users focused their attention on the keywords they felt were most relevant to what they were looking for. They had trouble seeing some navigation items if it wasn’t immediately clear how it would help them in their search. Additionally, they were confused by button language that was general and not specific.
- Include navigational clues
Users seemed to get lost in the site as they navigated deeper and deeper in their searches for information. In fact, because they weren’t sure where they were, they often clicked on the home page to re-orient themselves and start over.Additionally, we recommend implementing breadcrumbs on all interior pages to help users understand their way and give them clues as to how they arrived there.
- Arrange navigation to focus on user needs
Currently MAP page links are in body content and as a sub navigation dropdown. We recommend rearranging the main navigation to be patient-centric and include the items most sought after.Secondary and tertiary navigation should be included as a consistent part of the layout.
- Make Spanish language available on every page
Based on our knowledge of the primary patient audience, the analytics seems to show a disconnect. Far fewer Spanish-speaking users are visiting the site than English-speaking users, yet Spanish-speakers make up a greater percent of the patient population.This is due to the lack of Spanish content and inconsistent location of a Spanish-language toggle.We strongly recommended taking steps to add a Spanish site with a consistent language toggle that appears in the same location on every page – preferably the top right.
- Design templates to help users see and identify information by scanning
Users will search for information based on the keywords they feel matches their needs. The design can assist users in finding information by using the layouts, shapes, and colors to distinguish between types of content and HTML elements.
For example – the site could possibly use a combination of colors and icons to distinguish health information from business information on the site.
We ideated on how to accomplish the design recommendations we uncovered in the next phase.
Because the website review only touched on key pages and templates on the site, we 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. Then we could reorganize.
We designed a site map that put more emphasis on the site sections that patients would need or want to view. We recommended adding pages to fill out these sections.
What options are available for access to care?
Where can patients go for care?
What health care options are available based on my access program?
To start ideating needed features, we sketched out ideas on a whiteboard. We noted areas to add and sections to improve in the design phase.
Our next step was to design the wireframes for the site.
the existing site has been built using WordPress, and the client wanted to keep the CMS. We planned to design templates for the new theme.
We designed about 10 wireframes for templates on the site that would be used to build individual pages of content.
We sent the wireframes for feedback from the client.
Following internal revisions, we conducted a second set of user testing sessions.
In this round, we tested the new wireframes to verify whether or not we had solved the problems uncovered in our initial user testing and ensure new issues were not introduced into the layout.
User Testing - Validation
We performed in-person moderated user testing on six more participants from the patient population. They ranged in age from 18 – 75+. One participant’s primary language was Spanish and an interpreter served as facilitator.
We tested both a desktop and mobile clickable prototype in Invision.
Our overall impression was that the scenarios were easier to accomplish, and all participants felt confident they were able to complete each task successfully.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
We were brought in to develop the website more than six months after delivering the designs.
Central Health was working the Belmont Icehouse on a rebranding effort, and the decision was made to begin website development because the new site was needed as soon as possible.
We decided to start work on building templates using the wireframes in order to speed up the process. With the branding effort underway, we hoped to receive visual styling during development.
Unfortunately, COVID-19 hit, and Central Health needed to shift its focus. the rebranding effort paused, and we paused development. Several months later, Central Health asked us to restart development, using the current branding instead.
Belmont provided visual styling, and we applied the styling to the templates.
Applying the styling to the templates we had already built proved to be a challenge. We had to redo much of what we had already done, and we learned not to try to develop too much without knowing the styling we would be working with.
The site includes many enhancements that were called for in the design recommendations.
- Multi-language toggling (English to Spanish)
- Easy to access search
- Layouts fully editable by the client
- Patient-focused navigation
Near the end of development, the client requested another round of user testing to see how the new design resonated with patients.
The testing was highly focused on the most common tasks and tests to validate the design and content structure. Ten remote testing sessions were held via Zoom from September 21st to October 5th with both native English and Spanish speakers. Data was collected with a remote video recorder, notes were taken, and sessions were transcribed with Otter.ai. Findings were then synthesized to find common themes so recommendations could be made.
Overall, the participants were able to achieve the most common tasks though there was a bit of friction for new users. While individuals were able to find information, it took some users longer than others.
New users are confused about Central Health and how to use the website
We recommended adding text to explain what Central Health does which would be beneficial to promote clarity.
Information is hard to find
We recommended an infographic highlighting the key steps that a user needs to take to improve confidence, keep users on the right track, and eliminate frustration or confusion while trying to figure things out.
Users do not know what MAP means
We recommended using different nomenclature to describe the program.
We regrouped with the client to make many of the recommended improvements before launch. This included streamlining the MAP eligibility process.