Karen Wei

SF Rec & Parks

Redesigning and Streamlining the End-to-End Picnic Reservation Flow

OVERVIEW

The San Francisco Recreation & Parks Department is the city agency responsible for governing and maintaining all city-owned parks and recreational facilities in SF. This was a full-cycle design project where I redesigned the end-to-end online picnic reservation flow for the SF Rec & Parks mobile web, streamlining an originally complicated 8-step process into a 4-step, simple and intuitive process that includes finding and selecting a picnic site through searching, filtering, and sorting, and booking and payment flows.

ROLE

Product Designer

TEAM

Solo project

TIMELINE

Sep 2023 – Oct 2023

TOOLS

Figma, Figjam

PROBLEM

The current process for booking a picnic reservation in San Francisco is complicated and difficult to navigate, resulting in frequent calls, cancellations, and a low booking completion rate. I was tasked to revamp and optimize this user flow to better align with the following user needs and business objectives.

USER & BUSINESS GOALS

CURRENT PAIN POINTS

I started by conducting a heuristic evaluation of the current reservation process to identify pain points to target. Three major pain points seen in the current flow, among several others (elaborated on later), are shown below.

Hidden and misleading call-to-action buttons – for example, the button to begin the reservation process requires scrolling to find, and is misleadingly labeled "Picnic Area Directory," making it unclear that this action initiates a booking.
The website's overall unorganized, text-heavy presentation of information creates cognitive overload, making it difficult for users to find and process information efficiently.
There is no way of filtering picnic sites based on user preferences and requires users to sift through hundreds of sites, making it time-consuming to find the perfect spot.

SOLUTION

HOME PAGE

Prioritized clear "Book Picnic" call-to-action and organized information into expandable sections.

Why? 1. Heuristic evaluation revealed that hidden CTAs were a major pain point. 2. Competitive analysis highlighted the critical role of clear, accessible CTAs in driving user engagement. 3. User research validated the frustration and inefficiency users experience when CTAs aren’t immediately visible.

Why? Organizing information into expandable sections allows users to easily navigate the information most relevant to them while reducing the cognitive load caused by the large, text-heavy sections observed on the current website.

CHOOSING A PICNIC SITE

Introduced filters for personalized searching and created site-specific info pages.

I created filters where users can input preferred date, time, location, # of attendees, amenities, and ratings.

Why? The current website lacks a filtering system based on user preferences, requiring users to manually browse through hundreds of options. Adding filters streamlines the discovery process, making it easier to find the ideal picnic spot.

I designed picnic site-specific pages that include all relevant details for that location in one spot - including a photo carousel, amenities, capacity, availability, and ratings.

Why? Users expressed enthusiasm for visualizing picnic locations and reading reviews, emphasizing the importance of detailed, location-specific information while making informed decisions.

RESERVATION FORM & CHECK-OUT

Streamlined inputs, minimized clicks, and integrated reservation details.

I replaced drop-down menus with yes/no radio buttons to minimize number of clicks, and eliminated the log-in step.

Why? Usability testing revealed a preference for quicker inputs, and design critiques emphasized the importance of reducing friction in the reservation process. User feedback also highlighted that account creation was unnecessary for one-time registrations. By integrating essential questions on reservation details directly into the reservation form, the process is made simpler and more user-friendly.

I added an event details review and option to edit.

Why? User research showed that providing checkpoints helps users feel confident that they’ve completed all steps correctly. It also allows them to quickly review their information before finalizing their payment, reducing error rates and calls.

DESIGN PROCESS

HEURISTIC EVALUATION

I began by conducting a heuristic evaluation on the current website to identify pain points and experience the flow myself to better understand the user's perspective. I then compiled lists of essential information that I wanted to include in my redesign, helping me determine which information to prioritize and which information was unnecessary or could be condensed. Here's a snapshot:

COMPETITIVE ANALYSIS

Next, I conducted a competitive analysis with three other picnic reservation platforms in California. Key takeaways included: 1. Prioritize keeping information organized and concise, 2. Implement a well-designed search filter, and 3. Make clear CTA buttons.

WIREFRAMING & LO-FI PROTOTYPING

Wireframing and rapid prototyping allowed me to quickly test out as many ideas as possible for content organization and user flow, pinpointing where gaps remained and omitting ideas that didn’t resonate with users. I tested my ideas with participants during usability testing and with colleagues during design critiques.

USABILITY TESTING

I conducted usability testing with four participants. I observed each participant go through the reservation flow while narrating their process and thoughts, then followed up with a series of more specific, open-ended questions to better understand their experiences.

FINAL HI-FI PROTOTYPES

IMPACT

WHAT I LEARNED

This was my first grad school design project and it helped me grow a lot as an early designer. I learned the significance of establishing a well-thought-out approach that respects both time constraints and user needs, while making sure to remain adaptable to changes as they inevitably arise. I also discovered the importance of designing with the appropriate level of fidelity to effectively convey a proof of concept – which was unexpectedly tricky at times! I also learned that it’s very helpful to talk to others about my designs, even on solo projects, where it might otherwise be easy to get lost working in isolation. Whether that’s colleagues/fellow designers or usability testing participants, their feedback and insights highlight perspectives I might’ve missed on my own.

IF I HAD MORE TIME…

Exploring additional features: A map feature showcasing picnic sites, where users can filter the locations based on preferences, allowing them to explore and view data dynamically based on their selected criteria could provide a more interactive and personalized experience.
At the beginning of the research phase, conduct user interviews to gather more insights into recurring frustrations and common preferences regarding online registration processes in general.