OpenOakland City Council Site
- Client: OpenOakland
- Role: visual design, UX
As a volunteer for Code for America’s OpenOakland brigade I’ve worked with the Councilmatic team to improve civic participation in the Oakland City Council. The main objective of the project is to create a site that provides information related to attending and participating in Oakland City Council meetings. Using Sketch I created a visual redesign of the initial Councilmatic prototype with the primary goal of optimizing the site for mobile performance. Using InVision I created an interactive prototype of how the site would appear on a mobile screen (viewable here) and on a desktop (viewable here).
Current Oakland City Council Site (Desktop)
When I first decided to attend a City Council meeting a quick search led me to the Council page and a few screens later I arrived at a spreadsheet where I was eventually able to find the info for the meeting I wanted to attend. Aside from the information overload in the spreadsheet, the process wasn’t too painful on my laptop at home. Once I arrived in the Council Chambers, however, I found a laptop to be impractical. There were no available seats. Even wall space to lean on was in high demand (it was a budget hearing). A mobile device is far more practical in these moments, and this leads to one of the main issues with the current site: poor mobile performance.
Current Oakland City Council Site (Mobile)
The current Oakland City Council site is responsive, and is technically usable on mobile. However the experience can be frustrating as it involves a lot of scrolling and pinching and zooming to access meeting info (schedule, location, agenda, etc.). In my experience, there is enough friction in the process to discourage one from interacting with the site on a mobile device.
OpenOakland Councilmatic Site (v1.0)
The image of the “v1.0” Councilmatic Site above shows the state of the prototype when I joined the team in early 2019. The team had put in a lot of work on the technical back-end and most of the desired data was already accessible within the prototype. The legibility and ease-of-use of the site was another matter. To be sure there were some obvious (to me) aesthetic concerns like the excessive headspace above the right column’s content and the awkward color blocks of the left column. However, my main concern was the presence of two timelines, one in the left column and one in the right. This seemed likely to be an immediate, and persistent point of confusion for anyone trying to access meeting schedule info. Which column should they check? What’s the difference between the two? Why are there two???
Proposed Redesign of Councilmatic Site (v2.0)
Goals for v2.0 Site Design:
- Mobile-first layout
- Glanceable meeting schedule
- Immediate access to main forms of interacting with City Council
- Visual consistency with related Oakland sites