SF Picnic Rental
#User Flow #Figma #Interaction Design #Mobile Design
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
Team
Jamie Reffell (Instructor)
Tools
Google Docs, Figma
My Contribution
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.
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
Research
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
Design
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.
Prototype
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: Optimize conversion rate
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
Redesigning Opportunity
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.