SF Parks & Rec
Improving the user flow for SF's picnic reservations.
Timeline
2 months
Project Type
Course Project
Role
Product Designer
Tools
Figma
Skills
UX Design, Product Design, User Research, Visual Design, Wireframing, Prototyping,
Summary
For Berkeley's INFO 215 course (Product Design Studio), my first project was redesigning SF R&P's picnic reservation flow.
Althought this project was entirely left to us on how we wanted to design it, we were given a specific user to design for and keep in mind. My final solution consisted of a cleaner, modern user interface and filters that made it easier to find picnic areas of interest.
Jump to solution
Background
I was given a target user, their goals, and key business objectives.
Target User
Resident of San Francisco
Adult (>21 and <65)
No relevant disabilities
Uses public transportation
Reads and writes English
Primarily uses phone
User Goals
Wants to have a picnic for their birthday (weekend in late October)
Picnic table, nice location
Can have alcohol
Near a bathroom
Business Goals
More users successfully complete the flow (% completed)
Fewer cancellations or problems
Required Inclusions
Mobile web designs
Beginning (entry) to end (completion)
Example error states
Bonus Inclusions
Help pages
Email confirmation
Cancel / update flows
Current Design
Not only is the website's interface outdated and lacking cohesive branding, the user experience is dampened by questionable design choices.
Before conducting research, I first navigated the web page as if I were the target user. I set a personal challenge to explore the site without leaving or resorting to Google for assistance, ensuring I relied solely on its features.
After going through the website a second time, I noticed many pain points and questionable design choices, like:
Text either makes up a large portion of each page and/or is just confusing.
Components like the unsorted table don't work well, especially for a mobile screen.
Some buttons lead to pages I wasn't expecting, ie. leading straight to a reservation rather than its information page.
Current website
My user flow visiting the website for the first time
Research
I conducted 2 usability tests, followed up with secondary research across an online forum.
After familiarizing myself with the website’s functionality, I conducted usability tests with two peers who had never used it before. They acted as target users searching for a picnic area that suited their needs. While neither were SF natives, they met the other key criteria.
I also introduced two key challenges:
1. Not using external sources, ie. Google, to find additional park or picnic area information.
2. Sticking through the task as long as they could
These challenges helped maximize insights, as I anticipated limited opportunities for additional usability testing within the project timeline. By doing so, I aimed to find as many pain points as possible.
A sneak peek of 1 of 2 usability tests
Throughout the sessions, I encouraged participants to "think out loud" as they navigated the site. Afterward, I followed up with questions about their experience, such as whether they found all the necessary information and if they would rely on other resources instead.
To supplement my findings, I explored Reddit discussions about picnics and references to the website. While I didn’t find direct critiques of the site’s design, I gained confirmation that visitors do indeed search for amenities like our target users.
Activity from r/SanFrancisco
Pain Point #1
Lack of transparency and confusing booking process.
Both interviewed users were unaware that costs would be attached to reserving a picnic spot, and some online users also expressed the sentiment of uncertainty over the cost. For one tester, her testing actually revealed that it was possible to book unavailable booking times but the system would throw out an error without explaining why.
Pain Point #2
Inefficient search and overwhelming information.
Both testers noted that the table had no way to filter for the amenties they were interested in, with one tester immediately looking for a quicker way to view the results she was interested, with the other tester browsing multiple pages to find a picnic spot that met her standards, until she grew too impatient and tried to find a faster way to find the picnic park that meets her needs.
Pain Point #3
Disengagement with details they deemed unnecessary.
Both testers ignored features like the table of picnics and the photo gallery, as they didn’t find them useful. They skimmed past any text that didn’t seem immediately relevant to their needs, and both were confused by the term “resources,” showing that there was a lack of clarity in the language and navigation.
Ideation
I prioritized key pages that impact the booking process and excluded those that were external, non-essential, or beyond the project’s scope.
With limited time for this project, I knew that I wouldn't have time to redesign the whole process from the landing page to a booking confirmation. Instead, I prioritized core pages that directly impact the users' journey.
These were the landing page, directory page, at least 1 individual picnic page, and the first booking page. (I specifically focused on this page rather than the entire booking flow as the chosen booking time on this page decides whether a user can continue with their reservation.)
Landing Page
Directory Page
1+ picnic area pages
First booking page
I decided to not focus on the following pages:
Map page
Because this page is powered by an external contractor (Esri), it wasn’t necessarily tied to SF Rec&Parks’s website itself. Additionally, it’s a helpful tool to use but I didn't think was totally necessary to re-design at the time, given that a tester told me that she would still use other online maps after pointing it out to her.
The process of creating a SF Rec&Park account
I didn't find the need to focus on this aspect of reservation process, even though signing in can impede on the flow a bit. Given that the Picnic Directory is only one portion of the website, I also did question the probability of a SF native already having an account.
Booking pages —> Reservation confirmation / finalizing a booking
While these pages could affect the reservation experience for some visitors, I don’t think it’s significant to the goals of this project.
Menu and Footer
I recreated them as a placeholder, and they weren’t a core focus of the user experience. However, I do use the menu as a way to display the language of the site.
Map Page
Sign In Page
Confirming Cart
Menu/Footer
Using the crazy 8 design method, I ideated designs for key pages, such as the landing page and individual picnic pages. This approach pushed me to explore different layout possibilities and helped me decide which features I wanted to include in the design.
Progression from brainstorming —> high-fidelity
Final Solution
Overall, my final design emphasized a streamlined search for picnic areas of interest and cleaner, more user-friendly interface.
All Final Screens
Design Decision
Using cards to hold each picnic reservation.
The original directory page displays all picnic areas in a table, with each row containing their name and a link to their own page or their reservation page. To the left of each name, users have to click a small "+" button to expand additional information such as location, bathroom availability, and whether BBQ grilling is allowed. This current approach creates two major usability issues:
Users have to manually expand each entry to find relevant details, making the process inefficient with 110 areas to decide between.
The "+" button is small and can be difficult to tap, often leading users to accidentally click the picnic area name instead, redirecting them away from the directory.
Current design
My design
To improve the user experience, I introduce a card-based layout, which presents key details upfront while maintaining a clean and scannable design. Each card includes:
A photo of the picnic area, helping users visualize the location
Address, making it easier for SF residents to recognize its location
Starting price, adressing a pain point where users were unaware of reservation costs
Capacity, ensuring users know if the picnic area fits their group size
Number of reservable spots, helping users gauge how many options the park has available
Rather than forcing users to click through a list manually, this new design allows them to quickly compare picnic areas and make more informed decisions faster. Amenities like restrooms or BBQ permissions are still accessible through filters, but they are not cluttering each card, ensuring a more digestible browsing experience.
Outcomes of this Project
Improved search and discovery
By introducing filters and a card-based design, users can now quickly find picnic spots that meet their needs without clicking through an unstructured list.
Enhanced transparency in the booking process
The new design clarifies costs and availability upfront, addressing one of the biggest frustrations users had with the original system.
More intuitive navigation
Eliminating small, hard-to-click buttons and simplifying the information hierarchy resulted in a smoother and frustration-free reservation experience.
Wishes
Interviewing and testing on more users
Given the short timeline, I ran out of time to properly address my final solution. Although I was lucky to test my design a second time, I faced some technological issues that slowed down the process. If I revisited this project, I would aim to interview more target users and discover whether certain features need extra edits. For example, my decision to not highlight certain amenities, ie. bathroom availability on cards, is a detail I would want to interview a larger group about, in order to determine which information to make space for.
More features
This project primarily redesigned pages that already exist. If I revisited this project, I would like to consider extra features that could improve the user experience, if a need for it exists.
Learnings
Finding what works for me.
As someone who is relatively new to Product Design, I often associate low-fidelity screens being more commonly created digitally, so I initially followed the same approach. However, I often struggled to conceptualize designs, feeling constrained by a single screen and the time-consuming process of building even one layout. In this project, I applied the Crazy 8 Design Method, which I was introduced to in this course. This technique pushed me to explore multiple layout variations for a single screen—something I previously found challenging. Working with pen and paper allowed me to iterate much faster than in Figma, making the process more efficient. This method has become a valuable part of my workflow, and I continued using it in the course’s second project.
Prioritizing what's a core part of the experience.
As much as I would have liked working on other parts of the website, I am also a student with other classes! I needed to prioritize the core pages that had the most impact on the user's journey, ensuring a more streamlined and efficient reservation experience within the project's limited timeframe.
Final Mentions
Special thanks to everyone I spoke to + Jamie (my professor)!
Thank you to everyone I interviewed, my peers who provided feedback, and Jamie for her teaching! This was my first project for INFO 215, and one that I felt confirmed my interest in continuing Product Design as a career.
Next:
How are Berkeley's public school students performing each year?
See case study