SF Rec & Parks
Redesigning and Streamlining the
End-to-End Picnic Reservation Flow
The San Francisco Recreation & Parks Department is the city agency responsible for governing and maintaining all city-owned parks and recreational facilities in San Francisco. 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 easy searching, filtering, and sorting, and booking and payment flows.
Product Designer
Solo Project
4 weeks
Sep - Oct 2023
Figma, FigJam
OVERVIEW —————————————————————————————————————————————–
MY ROLE
THE TEAM
TOOLS
TIMELINE
The current process for booking a picnic reservation in San Francisco is complex 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.
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.
THE PROBLEM ——————————————————————————————————————————–––––
USER AND BUSINESS GOALS
CURRENT PAIN POINTS
Prioritize clear call-to-action and organize information into expandable sections.
Introduce filters for personalized searching and create site-specific info pages.
Streamline inputs, minimize clicks, and integrate reservation details.
HOME PAGE
CHOOSING A PICNIC SITE
RESERVATION FORM & CHECK OUT
MY SOLUTION ——————————————————————————————————————————–––––
Solution: Prioritized a clear "Book a Picnic" CTA.
Why? 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.
Solution: Created a comprehensive filters panel 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.
Solution: Created 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.
Solution: Replaced drop-down menus with yes/no radio buttons to minimize number of clicks.
Why? User testing revealed a preference for quicker inputs, and design critiques emphasized the importance of reducing friction in the reservation process.
Solution: Eliminated log-in step from the original flow.
Why? User feedback 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.
Solution: 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.
Solution: Organized information into expandable sections.
Why? This 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.
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:
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 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.
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.
COMPETITIVE ANALYSIS
WIREFRAMING AND LO-FI PROTOTYPING
USABILITY TESTING
FINAL DESIGN: HIGH-FIDELITY PROTOTYPES
IMPACT —————————————————————————————————————–––––————––––––
WHAT I LEARNED —————————————————————————————————————–––––————––––––
This was my first grad school design project and it helped me grow a lot as an emerging 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! 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.
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.
IF I HAD MORE TIME…