Oakland City Council Site
Role
- User Research
- UX & Visual Design
A Code for America Brigade Project
In January 2019 I joined the OpenOakland Code for America brigade – a network of of people collaborating to support and improve public services at the local and national level. One of the first projects I contributed to, called “Councilmatic”, was an effort to increase civic engagement in the city of Oakland’s legislative process by making information about legislation and city council activity more accessible and actionable to the public.
The Council Shapes The City
The Oakland City Council functions as the legislative body of the city. The Council consists of 7 members, each representing a different district of the city, as well as an 8th “at large” member. The Council plays a decisive role in crafting the city’s laws, policies, and budget which have an impact on day-to-day life in the city.
Representation Through Participation
One of the essential interactive features of the City Council is the public comment period prior to major decisions made by the Council members. Community presence and public comments at Council meetings does affect the opinions and ultimate decisions of the Council members. The Councilmatic project aims to improve public participation in City Council meetings by improving access to meeting data and clarifying opportunities to engage.
User Research
Meeting Council Attendees
Paper Surveys
I created a quick and simple survey to be printed on paper and handed out to attendees of city council meetings. The goal of the survey was to establish a baseline of user feedback on their participation in the city council.
Small Sheet, More Inviting
I chose to use a quarter-sheet of paper in the hope that it would be less intimidating for someone to fill out. This constraint forced me to keep the questions brief and to the point. It also had the benefit of being easy to handle and cheap to produce.
Bright Color, Easier To Collect
I chose to print on bright-colored paper to make the survey easier to collect. In the event that attendees wanted to hold onto the survey and return it later the bright color would make it easier for me to spot as people headed for the door. And since I was holding these bright sheets as well, it made it easier for attendees to spot me as well.
Informal Interviews
Over the course of several visits to city council meetings I spoke with fellow attendees about their experience with the council. Many expressed personal difficulty in attending the meetings. A frequent comment was the lack of diverse representation in the meetings because of the numerous challenges to attendance.
“It’s important to remember that most people don’t make it to these meetings.”
– City Council attendee
Oakland City Council Website
What’s Working Well
Lots of Content
The Oakland City site does provide a lot of content related to City Council Meetings including meeting schedule, agenda, minutes (notes), video (sometimes), and voting record of council members (not always present and hard to find).
High Type Contrast
For the most part the type on the Council pages has a high degree of contrast with the immediate background. A high degree of contrast is important to keep type legible even for those with limited visual acuity.
Opportunities For Improvement
Schedule Data Legibility
The schedule data for Council and Committee meetings is not immediately available when arriving at the City Council site. Schedule information is several screens away and contained within a spreadsheet that can be challenging to read even with the benefit of a large desktop monitor.
Mobile Optimization
The current city site is not optimized for a mobile browsing experience. As evident at the starting screen for the City Council there is a visual conflict with the men
UX & Visual Design
Early Engineering Prototype (Before My Involvement)
The Councilmatic team already had a functional prototype when I joined the team. With the project goal in mind I identified a number of opportunities for improving the prototype.
Opportunities for Improvement
- Consolidate schedule data
- Optimize for mobile
- Link to other Council interactions
- Improve legibility and ease-of use of data filters
- Visually clarify information hierarchy
- Minimize visual clutter
Consolidate Schedule Data
Presenting two separate regions of schedule data side-by-side can be confusing for a user who must now decide which region to check first. As both regions contain overlapping data it will increase the cognitive burden of the user as they try to determine why the two sets of data exist and how best to navigate the options.
A single, consolidated region for schedule information will be generally easier to navigate and more intuitive as it relates to many other common forms of schedule information and associated behaviors.
Optimize for mobile
While the initial Councilmatic prototype did work on mobile, it did so through a completely separate site dedicated exclusively to a mobile viewing experience. Reconciling the two sites into a single, responsive site would make it easier to access as well as maintain and update.
Improving the legibility and clarity of information hierarchy would also help to optimize the experience of engaging with the site on a mobile device.
Mobile-First Redesign
I designed a new version of the Councilmatic prototype in Sketch using a mobile-first approach. Using Sketch allowed me to quickly generate concepts, share them with the team, and iterate based on feedback received.
Interaction Tests
Using the Craft plugin for Sketch I created an interactive version of the new prototype in InVision. We used this InVision prototype to demonstrate the functionality of the new site design and solicit feedback from project stakeholders.
Updated Prototype
Results
Positive Feedback
My redesign of the Councilmatic prototype has received high regard from most everyone who has seen it, including the leaders and membership of the OpenOakland Brigade.
Product Limitations
Several of my recommendations have been implemented in an updated version of the Councilmatic prototype. However there is a limit to how valuable these changes are for the target user-base of the site. Ultimately the most appropriate place for City Council information is within the context of an official City of Oakland website. This is where people are most likely to search for information related to city services and thus is the best place to devote resources to improving the efficacy and usability of these services.
Through my work on this project I developed a greater understanding and appreciation for the many considerations in designing a city service website. I look forward to applying this experience to further development for public services.