.png)
The Problem
Booking a picnic table through the SF Parks website is overwhelming due to excessive, unorganized information. Users with specific needs, like proximity to restrooms or public transportation, struggle to find relevant details. The lack of intuitive design and prioritization makes the process frustrating and inefficient.
The Goal
The user goal was to book a picnic table for a birthday celebration in late October, prioritizing a scenic location with alcohol permitted and proximity to restrooms.
Additionally, the business goal was to increase the percentage of users successfully completing the rental process while reducing cancellations and user issues.
The requirements included designing a mobile-friendly web interface, covering the entire rental process from entry to completion, and incorporating example error states.
Research methods
I interviewed three Bay Area residents and conducted a contextual inquiry to uncover key insights for improving the user experience. Participants shared their perspectives on the challenges of booking a picnic table, highlighting pain points and offering feedback on how the process could be streamlined. These insights helped shape recommendations for a more intuitive and user-centered design.
Users found the upfront information overwhelming and struggled to choose between the directory and map views. Most preferred the mobile-friendly directory view but wished for a combined option with cleaner filters to simplify navigation.
After selecting a picnic table, users had to sign in, which redirected them to reselect their table. At checkout, they faced over ten questions about accommodations and rentals, many of which felt unnecessary and irrelevant.
I also conducted a comparative analysis to examine how other city and park websites, as well as applications from outside the parks industry, prioritize information and manage rental processes. This helped identify best practices and informed the redesign strategy, ensuring that key user needs and rental preferences were effectively addressed.
Resy's recommendation system lets users explore restaurants via a map view for easy navigation.
NYC Tennis Court Rentals simplifies key information, making the booking process clear and user-friendly.
Rocky Mountain National Park allows users to easily hide or show important alerts for caution.
Prototyping
After conducting user interviews and a comparative analysis, I identified key features to improve the experience. I sketched initial concepts, then created an interactive prototype in Figma to bring my ideas to life.
I sketched a combination of the map and directory views, incorporating features like a filter option, and prioritized the most relevant information users need when selecting a park.
For the About Park page, I added a recommendation section where users can book other rentals offered by SF Parks and explore similar parks for picnic table rentals.
Another key feature was the addition of a "Checkout as Guest" option, giving users more autonomy when booking a picnic table. I also simplified the fee breakdown, ensuring greater price transparency for users by clearly showing what SF Parks is charging.
I also designed error states to guide users when there is no availability for a specific date and time, or if they miss a required field during checkout, ensuring a smoother and more intuitive experience.
The product
The new design includes an Alerts dropdown that users can dismiss, keeping them informed while freeing up space for rental details.
Combining the Directory and Map journeys helps users easily locate picnic rentals, view availability, and understand park regulations, improving clarity and convenience.
A key insight was the need to compare picnic tables based on preferences and regulations without navigating back. Adding a feature to view other parks alongside the selected option encourages exploration and comparison.
Users can checkout as a “Guest” to streamline the process, making it faster for those who don’t visit frequently, aligning with the business goal.
Retrospective
This project was my first-ever UX Design experience, and it was my first time using Figma, so there was a steep learning curve. Through the process, I gained valuable insights into design stages and models, learned how to ask the right questions to users, understood how to prioritize features, and discovered effective ways to find inspiration.
Key Challenges...
Based on insights from user interviews and inspiration from my comparative analysis, it was challenging to find the right balance when implementing features and deciding how to prioritize them. Additionally, time management proved to be difficult, as learning the various functions within Figma took longer than anticipated.
If I Had More Time...
I would have conducted usability testing to better prioritize features and ensure a user-friendly design. Additionally, I would have focused on refining the mobile site's styling, balancing important information with engaging design.
