Project Overview
Summary
-
In response to COVID-19, the City of San José moved to hold virtual City Council meetings that can last 8+ hours. Community members don’t have a way to know when agenda items they are interested in will be discussed, which leads to frustration, and disengagement.
-
To encourage and facilitate participation, we designed a web application that allows community members to subscribe to receive a notification when agenda items are up next for discussion.
-
Since city staff is overburdened with new tasks related to the pandemic, this project had a service design component. It was pivotal to consider front- and back-stage implementation procedures when designing this web application.
My Deliverables
-
Gather and synthesize requirements
-
Design two user and task flows
-
Design (and iterated on) lo-fi wireframes, hi-fi mocks, desktop, and mobile prototypes
-
Compile style tile
-
Design atomic components and develop a design system
-
Developer handoff
The Solution
Team
A collaborative, multidisciplinary team of Code for San José (Code for America Brigade) volunteers, including a project manager, front- and back-end developers, and two UX/UI designers, including me. Stakeholders included the community engagement think tank Only in San José and the City of San José. We worked 100% remotely on this project.
Methodology
Main findings from stakeholder interviews:
Discovery
As part of the discovery process, we interviewed the city and think thank stakeholders, invited 8 community members to attend a virtual City Council meeting, and asked the latter groups to complete a survey.
Main findings from community members surveys:
1.
Meetings have a set start time but not set times for discussion of each item.
2.
There is a brief window of opportunity to provide spoken public comment for each item.
3.
Existing systems and procedures do not offer a way to notify community members about changes in agenda item status.
4.
The capacity of city staff to complete additional tasks before or during the meeting is limited.
1.
Motivation to participate in City Council meeting is to be informed, share their opinion on specific items and policies, and represent certain groups, for example, the unhoused.
2.
Common adjectives to describe their experience participating in the meeting were frustrating, annoying, and terrible.
Data Synthesis
Through this discovery process, we realized that we had two distinct users that we needed to solve pain points for:
-
City staff overseeing the City Council meeting
-
Community members interested in participating
Problem Definition
How might we give community members a better meeting participation experience without overburdening the city meeting administrators?
Design Ideation
Ideation Guidelines
1.
Identify features that would be desired by community members and balance them off with how feasible it would be to implement those given the limited capacity of City staff.
2.
Focus on a minimum viable product (MVP) that would inform community members when agendized items changed their status.
3.
Give community members more control over how they want to engage and participate in the meeting, help them prepare to provide spoken public comment, and significantly reduce the frustration related to long waiting times.
Ideas sorted by MVP and non-MVP features
Architecture
As a next step, I created 2 user flows and 2 task flows, which helped our team to align on the project goals.
-
Community member flow
-
City meeting administrator flow
-
Search task flow
-
Subscribe task flow
Lo-Fi Wireframes
I used a mobile-first approach to help our team and stakeholders visualize our user flows. Presenting a lo-fi prototype, I encourage the team to provide feedback and gather additional requirements.
Stakeholder Review
I iterated and presented wireframes two more times to continue to refine the solution and create alignment on futures and overall architecture.
Main changes implemented based on feedback received:
-
Allow not only text but also email notifications
-
Search not only for agenda items but also for attachments
-
Include all ways to participate in a meeting
-
Prioritize desktop interface for city administrators
-
Allow participants to add the meeting to their calendars
-
Give Consent Agenda a different treatment based on its unique process
Hi-Fi Mocks
Once we reached alignment on features and flows, I created an interface and visual design that complied with the City branding guidelines.
I kept an open conversation with developers in the team, which led to a very positive collaboration as they were able to flag areas where technical requirements would require design changes.
Interface description:
Community Members:
1.
Mobile-first approach.
2.
Consistent use of icons and labels to make the interface easy to learn.
3.
Use of known mobile patterns.
City staff:
1.
Desktop first approach.
2.
A simple and consistent interface that lays out and supports tasks with minimum effort.
3.
Uses language and structure that city administrators are familiar with
High Fidelity Prototype
Community Member Mobile Interactive Prototype:
City Staff Desktop Interactive Prototype:
Handoff
Style Guide and Design System
Since the team used an Agile approach for this project, I made it a priority to create a style guide early on that developers could refer to as they worked on front-end development.
Likewise, given that design and development happened in parallel, I built a design system on XD using atomic design. This approach made it easy to create pages and make changes across the entire file. These tools also facilitated the onboarding of another UX/UI Designer.
My approach:
1.
Create atom elements:
-
Define color and character styles
-
Convert icons to components
2.
Create simple to more complex nested components.
3.
Consistently name components to exchange instances on the property panel efficiently.
Developer Handoff
To secure an accurate implementation of the design, I created a developer link on XD and trained developers on how to use it. Enabling developers to inspect every element of the design and extract code snippets, streamlining our handoff process.
Next Steps & KPI's
Next Steps
-
Perform usability testing of MVP with both community members and city staff.
-
Explore automation to keep city staff tasks at a minimum while implementing other desirable features for community members, such as accessing information about past meetings and meetings other than City Council.
-
Identify opportunities to scale implementation to other cities.
Key Performance Indicators
-
Increased community member participation in City Council meetings
-
Increased community member confidence in their ability to provide spoken comment
-
Reduction in community members' negative feelings after participating in City Council meetings
-
Rate of use/adoption of the web application by city staff
-
Rate of city staff satisfaction with web application and new procedures
-
Adoption of the web application by other cities
