SF Picnic Rental
Redesigning an outdated picnic booking website for SF residents
The San Francisco Recreation and Park Department offers picnic rental services on their official website to the general picnic. However, the website isn't very intuitive to use. In my Product Design class, we were instructed to redesign the website in mobile format.
Timeline
Sep - Oct 2023 (4 weeks)
Project Type
Individual Class Project
Tools
Google Docs, Figma
Team
Jamie Reffell (Instructor)
My Role
UX Analysis, UX/UI Design
UX Analysis: Conducted a comprehensive analysis of the product, focusing on its features, functionality, user experience, and performance.
UX/UI Design: Informed by research findings, prototyped new design concepts aimed at achieving the established design goals.
Introduction
Redesigning an Outdated Booking Site
This is a class project from my Product Design course at CCA, where I redesigned the San Francisco Recreation and Park Department's picnic rental website. The existing site is outdated, visually overwhelming, and difficult to navigate — making it hard for users to find, evaluate, and book picnic spots. My goal was to redesign the experience in mobile format, focusing on clarity, usability, and conversion.
Problem
Unintuitive Design
The existing SF picnic rental website's design is outdated and overloaded with information, lacking a clear information architecture. This makes it difficult for users to locate call-to-action buttons or access detailed information about each picnic spot, significantly burdening those looking to make reservations.
Mobile Design Interface
Website Design Interface
Analysis
User Flow Walkthrough
To assess the current user flow, I established specific redesign objectives, taking into account several key aspects of SF picnic rental services:
- Target Users: Focus on San Francisco residents who rely on public transportation.
- User Goals: Enable users to select spots based on location and various filters.
- Business Goals: Increase the number of users completing reservations.
User Flow Evaluation & Analysis
Ideation
Brainstorm & Competitor Analysis
After identifying frictions and challenges in the current design, I initiated the brainstorming process with quick sketches and drew inspiration from other apps with similar functionalities.
Solution
User-friendly Redesign
Based on research and analysis aimed at enhancing the user experience, I developed Figma prototypes focused on several key design concepts:
- Simplicity: Eliminating unnecessary steps and tabs to streamline the process.
- Interactivity: Introducing interactive pins on the map for more engaging navigation.
- Aesthetics: Enhancing visibility through cleaner visual design.
- Usability: Incorporating smart filters to simplify the search process.
#1: Interactive Map
Location plays a crucial role in users' selection of picnic rental spots. To address this, I designed an interactive map component, enabling users to access detailed information by clicking on map pins.
#2: Smart Filters
In addition to location, numerous factors influence users' decision-making. To accommodate this, I developed a filtering panel, allowing users to refine their options by applying specific filters.
#3: Streamlined Booking
When ready to make a reservation, users will find all necessary details on the reservation page. Additionally, a pop-up window will prompt them to create an account, enhancing their chances of securing their booking successfully.
Reflection
Opportunities in Public Design
Even though this was a class project, I realized that there are many opportunities to practice redesigning products, like this official website of San Francisco picnic rental services. There are many official websites that are outdated and neglected by people as well. They can be good opportunities for UX designers like us to practice more.