Over the process of a year, I lead the UX effort on the AltaMed.org site redesign from research to QA. The primary objective was to transition to a responsive design layout to address AltaMed’s growing mobile user base.
Release date
July 2017
Project Span
12 Mos.
Role
UX Lead
Site
Altamed.org

Project Scope

Project Scope

Project Scope

AltaMed was initially established as a free clinic in East Los Angeles in 1969, and are now a leading health care system providing care to more than 300,000 Southern California residents.

Comp of Altamed.org homepage prior to redesigncurved green arrow pointing down

Assignment

  • Make the site easy to navigate keeping in mind that the content should be patient-centric and relevant.
  • Direct users to the correct contact numbers for the services they are seeking.
  • Make the site responsive for the first time.
  • Create Create a rich, easy to use information hub for users.
  • Make sure the items mentioned above complied with ADA, Section 508, and WCAG 2 standards.
  • Redesign the site structure, layouts, and designs.
  • Optimize experience for Spanish preferred speakers (SPP).

Contributions & deliverables

  • Competitive Analysis (direct and indirect)
  • Stakeholder Interviews
  • User Journeys
  • Sitemapping
  • Wireframes
  • Collaborate with the senior art director
  • Worked together with overseas development team
Comp of Altamed.org homepage redesign

Stakeholder Interviews

Stakeholder Interviews

Stakeholder Interviews

A total of nine one-on-one stakeholder interviews were conducted. During these interviews, I identified challenges and improvements stakeholders would want to see on the new site to increase productivity and move users through content as it fit their needs.

Feedback

  • Be mobile first; patients’ primary or sole Internet access is their smartphones.
  • Content on the site is dated and too text heavy.
  • List services available at each location.
  • Use more patient friendly terminology; not everyone knows clinical language.
  • Make a Spanish version of the site more prominent for users.
  • Describe what AltaMed is/does and all of its services in a cohesive way
2 illustrations of iPhones with screenshots of Altamed.org

Sitemap

Sitemap

Sitemap

AltaMed.org aimed to provide users with a smooth and easy experience to find the information they need. This approach was informed by stakeholder interviews, existing website content, and an analysis of competitors.

The new AltaMed.org allowed users to:

  • Understand AltaMed services and enroll as a patient.
  • Allow users to access important information without having to shuffle through content (e.g., urgent care, nurse advice line, etc.)
  • Promote programs and preventative activities or services to avoid medical costs to them as a provider, and patients if their conditions became chronic.
  • Allow users, either members or caregivers, to easily find clinics, doctors and other facilities available to them.
  • Provide current, relevant content by funneling website visitors to their respective sections, based on audience segmentation
2016 AltaMed redesign sitemap with page content direction an functionality

Wireframes

Wireframes

Wireframes

Staring at a sea of similar healthcare websites, I knew AltaMed.org deserved better. Their patients needed an experience that felt fresh and user-friendly. That's why I ventured beyond typical medical website design, exploring patterns from other industries to break free from the homogenous landscape.

Mobile navigation

I wanted to use an easy to use structure in which users would be able to find their way back to where they came from once they had deep linked into the site.

  • Users are able to use the hamburger menu dropdown as a launch pad for global navigation items.
  • The navigation interaction for users that would work best for them to easily go back to previous sections was to stack each section in panels through tapping or dragging.
four annotated mobile wireframes depicting different states and functionality of the navigation

Homepage

I wanted to create a homepage which allowed users to view content in sections. Each section would move at once as the user scrolled down.

  • The hero and contact information to find a doctor and urgent care were on the first panel since they were high priority on the client’s list and most important to users.
  • The second panel housed evergreen health content through blog posts and a call out for health classes.
  • The following panel provided contact information for users if they wanted to start care with AltaMed.
  • Lastly, events in local communities to highlight AltaMed’s commitment to the communities they serve.
AltaMed 2016 annotated desktop homepage wireframe
Desktop wireframe displaying the new AltaMed location and hours page and dropdown filters.

Facility listings

It was important for stakeholders to have specific information on the locations (and physicians), specifically when it came to services offered.

This wireframe was part of the initial thinking on how locations would be displayed in their actual state today.

These evolved significantly later through different iterations during phase 2 of the redesign.

isometric view of AltaMed 2016 redesign wireframes

Find a Doctor

Finding Care

Finding Care

The Find a Doctor tool was a big portion of this redesign. The process is broken down into separate sections to reduce visual tension and progressively display only those elements or options pertaining to the user’s selections.

Flow chart displaying the different states a user will view when selecting different option from the Find a Doctor or a Clinic page

As users go through this multi-step form, it progressively displays the following set of filters. Each section of within the process had short copy describing why the user was being asked that question to mitigate confusion.

The results screen garnered results in the form of a map with location pins. Each location detail card included click-to-call options to encourage users to take action.

Altamed mobile designs

Takeaways

Be in constant conversations with the client during meetings and ask open ended questions.

I learned how to pose questions to the client to best organize the site for its diverse audience by building an intuitive site within 508 compliance restrictions. When business requirements changed; I was able to reimagine structures and interactions with the user in mind staying within those requirements.

Sometimes interactions have to be let go because they cause more harm to the UX.

The homepage panel interactions had to eventually be removed and it became one scrollable panel. Any small scroll motion would trigger the next content panel which became too erratic for users.

Choose the interactions that are a “should have” on your design wisely.

Towards the end of build there were a few interactions that I had to let go. Some, like the static display of buttons and form fields of the Find a Doctor tool had to be compromised due to time constraints. I was more concerned about interactions on the navigation.

Focus on creating features you know the client will use and be able to update on a regular basis.

If you propose something you know will create more work for the client, it is very likely to go unused by the owners of the site. This was the case with the events module on the homepage which remained empty for over a year, and a tool built to find relevant events. They went unused and were never updated.

Alberto Garcia • 2024