Jyaleen's Portfolio

City of San Francisco Recreation & Parks Department

Supporting staff efficiency and civic communication

TEAM

2 researchers, 2 designers, 1 developer

ROLE

Design lead + researcher

TIMELINE

8 months

TOOLS

OVERVIEW

The San Francisco Recreation and Parks Department (SFRPD) permits division fields thousands of repetitive inquiries each year about reservations via phone and email. We designed a suite of solutions to ease that burden.

Our most successful solution reduced response times by 67%.

context

SFRPD manages 70,000+ yearly reservations across 230 parks and 100 recreation centers with just 5 call staff members supporting all citywide bookings. A fragmented system has staff carrying the weight of thousands of support calls and emails each year.

13,000 phone calls and 5,000 emails were logged in the last year alone

Staff manage reservations across 3 separate, unintegrated platforms

Existing vendor contracts, government procurement rules, and a decreasing budget meant the system couldn't be overhauled in the near term

problem

With every feature missing from the public system, staff had to step in manually. The more they had to intervene like this, the less time they had to improve the service, creating a doom loop of inefficiency.

"It's not that we don't know the answers to the questions they ask, it's just that the volume is massive and we have to repeat them 50 times daily to different people."

SFRPD Permits Staff Member

research

We conducted a multi-method study across residents, staff, and data sources to locate the most actionable pain points in the system.

Method

Volume

Purpose

Email analysis

4,900+ messages

Identify repetitive workload patterns

Call log review

800+ calls

Categorize recurring questions

Call staff interviews

5 participants

Understand daily workflows and pain points

Facilitated staff workshop

12 participants

Co-map breakdowns and opportunities

Resident surveys

53 responses

Gauge satisfaction and usability

Park intercept interviews

62 residents

Observe and gather real-time feedback from San Francisco park-goers

We then affinity diagrammed our findings, and here are our key insights:

70%+ of back-and-forth between staff and customers were basic logistical questions

Residents lacked reliable online information

Staff did not have official templates for responding to emails, though many borrowed templates from other staff members

Vendor contracts prevented system-level changes

constraints

Rebuilding the entire system was out of reach. As we thought about how to support staff, we had to design within some key constraints:

SFRPD has no in-house developers to maintain a complex system

A closed vendor platform meant our solution had to be standalone

Limited budget meant the cost of hosting / data storage had to be zero

Guided by these constraints, we made deliberate choices:

Conceived a standalone browser extension to bypass vendor lock-in and ensure lightweight integration

Template-first approach, using editable templates to prioritize consistency and accuracy

Purposefully avoided 100% automation, instead giving staff full control of the process before sending to preserve tone, empathy, and the human touch

opportunity

Across every dataset, one theme dominated: repetition.

Thousands of nearly identical emails and calls were being made each year. By targeting the repetitive workload, we could create immediate, measurable relief, even without touching the underlying systems.

intervention strategy

We approached the redesign across two time horizons:

Horizon

Goal

Output

Short-term

Reduce repetitive workload

Email helper browser extension

Long-term

Prepare for future system replacement

Procurement-ready RFP documentation

case study focus

The Email Helper | Cutting staff email response times by 67%

concept

Staff were manually copy-pasting nearly identical messages every day: site-specific policies, permit edits, cancellations. We built a browser extension that automated the repetitive parts… without removing the human touch.

Our guiding choices were:

A standalone browser extension to bypass vendor lock-in entirely

A template-first approach to ensure tone consistency and accuracy

Human-in-the-loop design - empathy and personalization remain

exploration

What interaction best supports filling out a template?

Staff need a way to quickly personalize details (name, dates, locations, etc.) without breaking the formatting. The challenge was to make this process fast, accurate, and confidence-building. We tested three interaction models:

Iteration 1: Embedded input fields

Users typed directly into placeholder inputs embedded in the email. Editing one repeated value automatically updated all its occurrences.

Users had to visually scan the entire email to make sure they caught every placeholder

Easy to miss a field, especially in long or complex templates

Navigating between small inline fields made the workflow tedious

Clear 1-to-1 relationship between inputs and their location in the text

Consistency for repeated values

Iteration 2: Pop-up flow

Inputs were consolidated into a pop-up form. After submitting, users were taken to a separate page to view the completed template.

High friction: users have to switch contexts to see results

Iteration cycle was slow (edit -> preview -> cancel -> edit)

Didn't support exploration or quick trial-and-error

Clear separation between "input" and "output" steps

Simple, guided flow that minimizes distractions while filling out fields

Iteration 3: Split-view

A split-screen layout placed the form on one side and a live preview on the other. The template populated in real-time as users typed.

More complex interface to implement

Immediate feedback loop reduced trial-and-error fatigue

Encouraged exploration, as users saw how small changes affected output

Maintained 1-to-1 link between inputs and output

The split-view design reduced visual scanning and improved user confidence in automation accuracy.

dog food testing

Before piloting with SFRPD staff, I conducted dogfood testing with fellow MHCI peers to ensure value communication, even to first-time users. I ran cognitive walkthroughs, showing each variant to different peers for 15 seconds, and then asked:

What do you notice first? Are the key details immediately visible?

What sticks after 15 seconds? Is the value prop communicated?

What would you try next? Is the next step obvious?

The split-view interface performed best across all measures. Peers found it most confidence-building and easiest to map input to output in real time, a strong indicator it would succeed with staff later in field testing.

mvp designs

Upload or create curated email templates

Access templates and generate pre-populated draft replies

Customize replies before sending

outcomes

In pilot testing, our tool reduced staff email response time by 67%. This is equivalent to saving 11 staff hours a week.

After refining the prototype, we conducted a pilot with SFRPD permit staff to observe the tool in real workflows. This included observing live use during active working hours, logging task completion times, and conducting follow-up interviews for qualitative feedback.

Metric

Result

Email response time

67% faster workflows - a drop from 116s to 38.7s per email

Weekly time saved

~11 staff hours saved per week

Staff feedback

"The next best thing short of replacing the entire system"

Macro organizational value

Serves as a bridge solution while the department preps for a new vendor RFP

The pilot confirmed that the Email Helper achieved measurable impact even within a heavily constrained civic technology environment, validating our hypothesis that even small, standalone tools can meaningfully improve public operations.

future-proofing

Designing for the next five years

While the Email Helper provided immediate relief, it didn't address the systemic issues causing the staff problems in the first place. So, we transformed our findings into procurement-ready RFP (request-for-proposal) documentation, ensuring our design insights would guide the department's next vendor selection.