San Francisco
Picnic Reservation
Project Overview
San Francisco Recreation & Parks offers many recreational activities and spaces for the public to enjoy in San Francisco. Over the course of 4 weeks, I redesigned and enhanced the user flow of booking a picnic rental reservation to facilitate higher completion rates.
The Problem
Target User
Resident of San Francisco
Adult (>21 and <65)
No relevant disabilities
No car — needs to use public transportation
Reads and writes English
Primarily uses phone
My Solution
Client
San Francisco Recreation & Parks
Role
Solo UI/UX Designer
Timeline
4 weeks (September - October 2023)
Tools
Figma, Figjam, Google Docs, iPad
How might we redesign a picnic reservation flow to increase the reservation completion rate for users?
Booking a picnic reservation through SF Rec & Parks’s current flow is not user friendly and is difficult to navigate. I was given several constraints and details as project guidelines:
I conducted an initial usability test and user interview with three users to evaluate how intuitive and user-friendly the current reservation flow. The interviews were conducted on Zoom in order for me to see their screen and track their interaction flow. I asked the test users about specific features of the current flow that they liked or thought needed improvement. From my research, I identified three common pain points:
Confusing CTA button
Figma Prototype: Try the final design here!
My Design Process
Business Goals
Filter Popup
Design Decision Explanation
Filter popup allows users to edit previous information and choose amenities to find their most desired site.
Crazy 8’s & Sketches
What’s next?
More users successfully complete the flow (% completion)
Fewer cancellations or problems
Website Audit
Comparative Analysis
I went through Airbnb’s flow and noted its succinct and detailed information as well as overall aesthetics. I was especially inspired by its filter and login/signup placement in the flow. This comparative analysis helped me ideate possible features to facilitate a seamless reservation process.
Initial Usability Testing
The main insights from comparative analysis:
filters and other user inputted information must be editable in case they change their mind.
it makes more sense to allow users to log in/sign up after seeing the base booking price instead of making them go through an additional flow.
I created a persona that humanizes and aligns with the project context and user goals.
Low-fidelity Wireframe
Ideation
The Importance of Order
Reflections
This was my first redesign project that allowed me to go through the entire design process and I found that I enjoyed it very much! Here are the main takeaways I got after completing this project:
User Need is Key
User Goals
Wants to have a picnic for their birthday (weekend in late October)
Picnic table, nice location
Can have alcohol
Near a bathroom
With the chance to expand on the design, I would conduct final usability tests to understand whether my design has successfully addressed common pain points. Other than private picnic reservations, I would also love to simplify the reservation flow for both commercial use and/or larger groups.
Persona
I performed a Crazy 8’s exercise and decided to focus on a picnic table selection screen (which I removed later but still used a similar idea for selecting a picnic site). Branching off from these ideas, I roughly sketched a wireframe for the reservation process.
Information hierarchy should be taken into consideration when designing — think about what users first see when they open the design. If a user chooses a picnic site where coyotes were spotted but the coyote warning wasn’t immediately noticeable, their safety might be at risk and their trust in the website would suffer.
Every design decision should be based on whether it would satisfy general user goals and address user pain points. The better the product accommodates users, the higher its overall quality.
After the website audit, comparative analysis, initial usability tests/user interviews, and ideations, I created a low-fidelity wireframe that mapped out my idea of visuals, interaction flow, and screens.
I assessed the overall user experience of the Picnic Reservation site and took notes on what worked and what did not work as well. This website audit supported an iterative design process.
Filters were difficult to use and deemed unnecessary
Single CTA Button
Combined the “Picnic Area Directory” and the “Picnic Area Map” button into a singular sticky CTA button “Find Picnic” — eliminating difficulty in beginning the reservation flow.
Selected Site Page
Improved the information hierarchy, added included amenities, and base booking price before required sign in/sign up screen.
Takes too many clicks to complete an action
Combined Views
“Picnic Area Directory” consists of both a map and list view for convenience.