Infrastructure

Pandemic-proof

As a U.S. Digital Response design consultant, I helped to optimize the Marin County Department of Behavioral Health Resources and Services's website.

Tools

↗   Figma

Skills

↗   Rapid Prototyping
↗   UX Analysis

Deliverable

An overhauled Fonts panel experience with new hover states & microinteractions to clarify how to successfully navigate and configure typographic settings.

The Ask

Understand how users work with the fonts panel, identify areas to optimize, and redesign the end-to-end experience of managing fonts on a site.

The Ask

Optimize the Marin county BHRS website for access, specifically keeping in mind the diverse needs of the county's  residents.

Deliverable

A complete home page redesign, site hierarchy overhaul, sign-up digitization, and a reusable page template that could be scaled across the site's content.

1

month turnaround

4

person team from USDR

3

BHRS representatives

I volunteer with U.S. Digital Response.

USDR was born out of the 2020 pandemic as a way to connect technologists with nonprofits and government organizations responding to crisis. USDR quickly delivers critical services and infrastructure that support public needs.

↗   N.Y. Times  The 2020 Good Tech Awards
↗   Gov Tech  Coronavirus Is Inspiring Wave of Gov Tech Volunteerism
↗   GCN  Civic tech volunteers help states with legacy systems

Marin County BHRS had a problem.

After the pandemic hit, it was clear to Marin County BHRS that their website wasn't doing its job. While BHRS's phone lines were being overloaded with residents in need of help, their website itself was not seeing high engagement numbers.

BHRS came to USDR requesting help in analyzing current UX issues with their website and identifying a design solution that would maximize access to county resources and lighten the burden on their phone lines.

How might we maximize access to county resources, while solving for pipeline density?

User research

Our User Researcher and PM partnered to conduct a series of internal interviews with members of BHRS. Their intent was to piece together an understanding of current processes and workstreams that the site would need to cover. Our researcher also began a heuristic analysis of the site, cataloguing UX issues on the home page.

↗   10 internal interviews with members of BHRS
↗   Survey sent out to community members
↗   UX analysis based on UI Design Heuristics

Problem hypotheses

We synthesized our user research into these primary insights that we needed to address with the redesign.

Access

How might we better connect residents and caretakers with the services they need, especially with an influx of residents on medi-Cal, low-income, or uninsured?

Communication

Pre-Covid, event attendance averaged around 20 attendees, but during Covid this dropped to 4-5 attendees. BHRS wanted a better way to advertise events.

Volume

BHRS was seeing a much higher influx of calls. This was coupled with greater anxiety about healthcare facilities during the pandemic.

Information overload

We were dealing with a classic case of information overload. The homepage was inundated with flat lists of text links.

Inaccessible jargon

Pages were also inaccessible to non-native English speakers and those with low literacy. Pages ranged from short, technical blurbs to long, dense paragraphs.

Unclear how to receive care

Website made it very unclear what the process of getting help looks like. The Access Team was the most important number on the site, but its page was hidden away and written in dense, confusing language.

Conflicting calls to action

Calls to action were confusing and unclear. There are more than half a dozen phone numbers on the site, even though the Access Team is the triage center and therefore the only relevant phone # to call.

Design process

The design process was quite different than my normal process at work. Because the turnaround time was so quick, less time was spent finessing the pixels and more time was spent ensuring that directionally we were driving this in a direction that could be presented to leadership. 

The design process was a combination of client-articulated requirements and design principles. We needed to deliver a clear set of functional requirements, while optimizing for access, clarity, and ease of use.

Design process

The design priorities included:

↗  Create a smarter resident communication funnel for the team
↗  Reduce text density and clear paths to important info
↗  Create a safe, inclusive digital space

For the homepage, I decided to prioritize:
1) Creating a happy path to the Access Team number
2) Clearly articulating what residents can expect when receiving care
3) Organizing resources into progressive disclosures

Design decisions

1. Homepage

A major decision that needed to be made was how to take advantage of the header section above the fold. We wanted to use this space for the most highly trafficked actions.

Decision: the BHRS team liked the collage approach as a way to represent the diverse backgrounds of their community. They also appreciated having two separate CTA's -- one for caregivers and one for people seeking help.

2. Survey flow

The BHRS Access team mentioned that a big chunk of their time spent on phone calls is spent asking basic screener questions from a script. I suggested converting this into a survey on their site and automating some of this data collection.

One great benefit of this survey flow is the ability to reroute users to alternative resources if they are ineligible for support.

3. Diversity statement

The BHRS Access team mentioned that a big chunk of their time spent on phone calls is spent asking basic screener questions from a script. I suggested converting this into a survey on their site and automating some of this data collection.

One great benefit of this survey flow is the ability to reroute users to alternative resources if they are ineligible for support.

4. Access infographic

The BHRS Access team requested an infographic that clearly demonstrates their process, which would be a clear improvement over what exists today: a long, dense paragraph that doesn't clearly communicate what to expect from a phone call.

5. Resource

The BHRS Access team mentioned that a big chunk of their time spent on phone calls is spent asking basic screener questions from a script. I suggested converting this into a survey on their site and automating some of this data collection.

One great benefit of this survey flow is the ability to reroute users to alternative resources if they are ineligible for support.

6. Emergency toolbar

The team wanted a quick and easy way to access important settings. They didn't like that the current crisis pop-up is obtrusive and alarming to look at. The ideal situation was noticeable, but approachable.

Decision: We went with the toolbar pinned to the bottom, which gives the option for immediate access, but collapses to take up less screen real estate.

Page hierarchy updates

Our amazing content strategist created detailed page taxonomy suggestions and we collaborated with the client to create a simplified resource funnel.

Info page template

It was important to the team to ensure that our design work could be scaled across their entire system despite our time constraints. I designed a general page template that could flex to accommodate a diverse range of content.

↗   Surfaces important CTA's
↗   Organizes important links
↗   Uses imagery and iconography to break up text

Conclusion

The team loved the direction that we took the redesign in! This was just Phase 1 of the project, after which another set of USDR volunteers carried our work into testing and revisions. The project remains ongoing, but I'm excited to see how this is ultimately implemented.