Project Overview

For this case study, I was tasked to redesign the San Francisco Recreation & Parks picnic reservation website. The original system proved challenging for users, particularly when trying to book a reservation. The former design included lots of text and buttons that often confused users. Throughout this study, I'll cover the transformation of this reservation process, keeping the focus on user-centric design principles.

Role
UX Designer
Timeline
4 Weeks
Tools
Figma, Figjam, Pen & Paper

Exploring the problem

The San Francisco Recreation and Parks picnic reservation website lacked user-friendliness and the ability to cater to event planners' needs, resulting in reduced reservations. My goal was to redesign the platform to provide a seamless and user-centric experience for reserving picnic spots with specific amenities.

Preliminary research provided to us

For the context of this project, I was provided with user and business goals, along with basic user information.

Target User
  • Adult resident of San Francisco
    ‍
  • Needs access to public transportation
    ‍
  • reads and writes English
    ‍
  • Primarily uses mobile phone
User Needs
Business Goals
  • Wants to have a picnic for their birthday (weekend in late October)
    ‍
  • Picnic table in a nice location
    ‍
  • Can have alcohol
    ‍
  • Near a bathroom
  • More users successfully complete the flow (% completion)
    ‍
  • Fewer cancellations or problems

Persona

I first created a persona that I could use in order to gain a better understanding of who I was designing for and as a tool to help me make certain design decisions to solve this users goals

User flow

I created a new user flow that included a more efficient flow for the user. The existing flow included two different access points for users to explore: "Picnic Map" and "Picnic Directory". The former didn't allow the user to complete a booking process, only view available picnic spots on a map. With this updated user flow, I consolidated both of these pages into one page with a map view and a list view. Both views would allow to complete the booking process

Ideation

During this phase, my focus was on creating user-centric solutions to address the challenges of the existing website. I began by employing methods such as Crazy 8 sketches and lo-fi wireframes. My goal was to ensure that users, particularly event planners seeking picnic reservations with specific amenities, would experience a smoother and more intuitive booking process. In this section, I'll dive into the creative brainstorming process that involved Crazy 8 sketches, and the development of concepts using lo-fi wireframes, both of which paved the way for a more user-friendly and efficient reservation system.

Design Decisions

Existing Homepage

With the existing homepage, there was quite a bit of text. Lots of this text may be unnecessary to certain users. The first design decision I had to make was "how can I pick and choose which information to include and what to not include?" When told to book a reservation, one user was confused on which button to press between "picnic area directory" and "picnic area map"

Updated Homepage

I chose to consolidate this text into an accordion which gave the users the power to select which information is useful to them. Users can expand these sections if they want to learn more, but it doesn't overwhelm them initially.

I also joined the two former buttons into one CTA called "reserve". This made it easier for the user to understand which button to press to reserve

Existing Picnic Directory

The existing directory included a lot of unnecessary elements. The user had to click into each one to see which amenities were available as well as how many guests were allowed in each picnic spot. The expand plus button was also very hard for users to click.

Updated Directory

The updated directory included a way to move back and forth between list view and a map view. Users could also quickly see which amenities were offered before clicking into each option.

With another user test, users wanted to see what the picnic spot looked like at a glance. Further iterations included a photo of the picnic spot in the card.

Style guide

For the style guide, I wanted to incorporate a simple and open aesthetic. The colors resembled a natural analogous variations of greens. I kept the typeface consistent with the existing website as I wanted to keep brand recognition.

High Fidelity Prototype

Figma Prototype

Key Takeaways

Another round of user testing

Once I had a high-fidelity prototype, I conducted a brief user test. The results were positive, but in order to gain a better understanding of any new pain points with the updated design, I would want to do more rounds of user testing.

Consolidate List view cards

With the new design, users now have the ability to see more information about specific picnic spots such as amenities, maximum number of guests allowed, coyote warnings, and photos. However, future iterations would consider testing smaller cards to allow users to view more spots at once.

Gain insights and metrics

If I had more time, I would want to gain metrics from tests such as completion rates, completion time, usability scores, and so on.
Prev Project
Back To Project Page
Next Project