SF Recreation & Parks: Picnic Rental
Redesigning the SF Recreation & Parks mobile web interface to streamline the picnic area booking process and improve the user experience for residents.
Roles
User Researcher, UI/UX Designer
Duration
4 weeks
Sector
Tourism
Introduction
Goal
Streamlining the picnic rental process for mobile web users.
Overview
The original Picnic Rentals page on the San Francisco Recreation and Parks website is used by residents to book picnic areas and access related information. However, the mobile experience is outdated and unintuitive, often making the booking process frustrating. This redesign aims to improve usability, streamline the reservation flow, and make it easier for users to find and reserve picnic areas on mobile device.
Context
Target Users
An SF resident who primarily accesses services through their phone. They need a simple, accessible way to book picnic areas on the go.
Business Goals
Increase the % of users who successfully complete the picnic rental booking flow, while reducing cancellations and user-reported issues.
My Role
As a UX researcher, I analyzed the current interface to identify usability issues through user feedback. As a UI/UX designer, I redesigned the experience to streamline the booking process and adapted the desktop site into a mobile-friendly version.
Problem
The current San Francisco Recreation & Parks picnic rental interface is not optimized for mobile users, making it difficult for adult residents, especially those who rely on mobile devices to easily navigate and complete bookings. The outdated layout and confusing flow lead to frustration and drop-offs.
Challenge
Redesign the mobile web interface to create a more intuitive and accessible booking experience.
Research
User Flow
To better understand the navigation on the website, I created a user flow with important points on each page. The original website has an unorganized flow with unclear navigation. Users must switch between multiple pages and PDFs to find information and book.
Current user flow of original website
Screenshots of booking process from original website
User Research Survey
Given time constraints, I surveyed 5 peers who explored the picnic rental site and attempted to go through the booking process (without submitting). Their experiences highlighted confusion around navigation, difficulty finding availability, and a lack of clear next steps.
""I want to browse available picnic locations on my phone, so I can find a spot for my event.""
"“I want to filter picnic rentals based tables and restrooms, so I can choose a location that meets my needs.”"
"I want a simple step-by-step booking process, so I can complete my reservation easily."
"I want the website to display well on my phone, so I can easily navigate and book my picnic spot."
User Stories Pain Points
Through user interviews and personal experience, several common pain points emerged:
Complex Navigation: Users may find it difficult to navigate through the current interface, leading to frustration.
Long Booking Process: The current booking process may involve multiple steps, causing users to abandon their reservations.
Limited Filtering Options: Users may struggle to find suitable locations if there are limited filtering options for accommodations.
Lack of Clear Information: Insufficient information about each picnic location, such as accommodations.
Mobile Compatibility Issues: The existing site may not be optimized for mobile use.
Competitive Analysis
I analyzed Airbnb and National Park Reservations to draw insights from platforms with relevant booking systems.
Insights from the user survey and competitive analysis revealed key usability gaps and opportunities for improvement. These findings led to the central design question:
How might we...
redesign the picnic rentals interface to create a seamless and intuitive booking experience for adult San Francisco residents who rely on public transportation and primarily use their phones?
Design
Crazy 8s
I began with a Crazy 8s exercise, sketching 8 ideas in 8 minutes for presenting the reservation flow using drop-downs, calendars, buttons, and text descriptions to explore different interaction approaches.
Sketch of Crazy 8s
Low-Fidelity Prototypes
I visualized how the mobile browser experience should look by referencing the current desktop version. To simplify the process, I broke down the user flow into clear, separate screens: Home, Book, Price, Log In, and Confirmation, which reflect the actual steps users take to book a picnic rental.
Sketches of user interfaces
Design System
I followed the original website's design system to build branding by using the same logo and colors, while incorporating more visuals and refined components to create a more intuitive and engaging mobile experience.
Hi-Fidelity Prototypes
I applied the design system to user interfaces, integrating the original logo and colors with enhanced visuals and refined components. The screens present a clear and mobile-friendly booking flow with improved usability, leading the users from search results to confirmation.
Final Prototype
Takeaways
User-Centric Redesign
Create a mobile web interface that addresses the needs of residents relying on public transportation, enhancing user experience
Streamlined Booking Process
Simplifying the booking process will reduce stress for users, leading to higher success rates for reservations
Increased Success Rates
Seeks to increase the completion rates of picnic rentals while minimizing cancellations
Error State Management
Error states will help anticipate user issues, providing clarity during the booking process
Mobile Optimization
Interface is optimized for phones and will enhance usability, making it easier for users to book picnic locations
Enhanced Navigation and Filtering
Improving navigation and offering more filtering options will help users find suitable picnic locations based on their specific needs
Clear Information Accessibility
Providing comprehensive information about each picnic location will help users make decisions in their bookings