Overview
Cityofberkeley.info is a hub of information for residents of Berkeley, CA. Within the site, there is an abundance of resource information for people dealing with homelessness. Berkeley also has it’s own Mobile Crisis Team, which is dedicated to street-level mental health and crisis intervention. While both of these resources are valuable, they are difficult to find. Additionally, the housing resources are stored in multiple places throughout the site.
My Role
UX Research/Design, Information Architecture
Timeline
3 weeks
The Challenge
Design a feature that would help streamline housing and mental health resources.
Research Plan
I first conducted a competitive analysis to learn more about the scope of my project, and gather insight and inspiration. I then interviewed users who have either had experience using the City of Berkeley site or any other site to track down the resources in focus.
Competitive Analysis
Interview Findings
I conducted interviews with participants ranging from ages 29-68, all of whom had had experience using Cityofberkeley.info or another site for tracking down housing resources and mental health support for someone in need. We started with interview questions, then conducted a task analysis with the current site. Click here to view the full interview summary.
User Persona
Ideation
After creating a (VERY DENSE) site map, I sketched out some potential solutions. During my competitive analysis, I was inspired by a pop-up window on a homepage that gave you phone numbers and immediate information in case of emergency. For the housing resources, I mostly brainstormed ways to restructure the information already present to make it more accessible.
Mid-fi Wireframes
Because I was designing within the UI patterns that already exist on CoB’s site, I used their website layout to create mid-fi wireframes, taking screenshots of their pages and turning them greyscale. I added the following features:
Homepage
- A CTA button and pop-up window that gives you the most immediate and necessary information for street-level crisis intervention.
- A quicklink on the side-panel that matches one in the drop-down menu and takes you to “Housing and Community Services”.
For housing resources, I focused on restructuring information.
BEFORE
after
BEFORE
AFTER
Usability Tests
I conducted usability tests with participants ranging from 32-72, all with varying backgrounds and degrees of experience using Cityofberkeley.info.
Based on the feedback, I implemented the highest priority changes, including adding a direct link to the Mobile Crisis Team main page to both the drop-down menu and side panel of quick links.
Challenges
I was most challenged with taking the dense amount of information under the housing resources page, and restructuring it in a way that was accessible. I had to fully learn the text myself first, so that I could then create a flow that shared all the information accurately, without overwhelming the user.
One night, I broke down in tears, just feeling so frustrated with how much there was to understand; it felt impossible to find a solution.
It was also challenging (in a good way!) to follow the design patterns that the website already has, since they are quite outdated and sometimes inconsistent.
Next Steps
I am considering taking out the pop-up all together, because it’s a bit awkward in the midst of a page dense with information. Instead, the CTA would take users directly to the Mobile Crisis Team main page. This would create three different ways for users to get to this important information from the homepage. I would also restructure this page and create clearer visual hierarchy.
