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.
I volunteer with U.S. Digital Response.
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
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.