top of page

SF RECREATION & PARKS

Designing a mobile picnic reservation system

Finished List.png
Finished Park.png
Finished Confirmation.png
ROLE

Solo UI/UX Designer​

TIMELINE

Fall 2023, 5 weeks

DEFINE

HMW streamline the process of reserving a picnic site to be more usable & customizable?

For a Product Design class at UC Berkeley, I redesigned the procedure for finding and reserving a picnic site in San Francisco. For this project, I was provided with a description of the user needs and business goals.

 

My objectives were to:

​

  • Increase the task completion rate

  • Reduce problems and cancellations

Target User

  • English-speaking adult

  • San Francisco resident

  • Primarily uses mobile phone

User Needs

  • Can easily select and reserve an appropriate picnic site

  • Can filter options by amenities and restrictions

Business Goals

  • Increase booking completion rate & reduce cancellations

  • Convert users to online reservations to reduce costs

CURRENT WEBSITE

I evaluated the current website using three methods:

Task-based interviews

Participants

​

  • Three English-speaking adults

  • San Francisco residents

  • No prior experience with this process

 

Procedure

​

Interviewees were asked to find and book a picnic site given certain criteria (e.g. dates, amenities, restrictions). They were prompted to explain their thought process throughout the task.

Heuristic Evaluation

This helped me identify usability issues and prioritize potential changes.

user-flow-1.jpg
user-flow-1.jpg

Mapping the current user flow

Mapping the current user flow helped me define the start and end steps more concretely and determine how to consolidate steps.

FINDINGS

Users were experiencing three critical pain points.

01.  It was not possible to

      filter results easily.

"I'm not sure how to find a site that has a picnic table without opening each link, which will take forever."

02.  Blocks of text were

       overwhelming.

"When I first looked at it, it was hard to tell what I actually needed to read. I probably wouldn't read the whole thing."

03.  Picnic site availability

       was hard to find.

"I'm not sure why they put the availability on a different screen. Do I have to make an account to see it?"

Screenshots of the existing interface

old-screen-2.PNG
old-screen-1.PNG
old-screen-4.PNG
IDEATION

So how did I address these issues?

Sketching (Crazy 8's)

I picked the five most important aspects of the interface and sketched eight versions of each to explore design possibilities.

Low-Fi Wireframes

I created a paper prototype and conducted three usability tests. From these, I learned that users found certain features (such as the reservation timing options) restrictive and not customizable.

Screenshot 2024-01-14 at 2.14.22 AM.png
IMG_1542.jpg
IMG_1538.jpg
(RE)DESIGN DECISIONS - PART 1

Picnic site search

& selection process

My objective was to reduce the amount of text, clarify call-to-actions, and maximize customizability. To achieve this, I added:

​

  • An accordion menu to present fees and regulations - a concise way for users to navigate content without feeling overwhelmed

​

  • Filters to find parks with certain amenities and availability

​

  • A new card layout for the picnic site directory, eliminating the need to navigate to a new page to find information​

​

  • An availability calendar on the overview page for each site

Finished List.png
Finished Map.png
Finished Filter.png
Finished Park.png

Browse: List View

Browse: Map View

Filter Options

Park Details Page

(RE)DESIGN DECISIONS - PART 2

Reservation details questionnaire

The original reservation questionnaire was tedious. It required users to create accounts and answer hyper-specific questions irrelevant to many picnic hosts.

 

Here's what I changed:

​

  • Reduced required steps by 40% by simplifying and combining questions

​

  • Replaced account creation with email code verification, streamlining the reservation procedure while boosting security measures

​

  • Numbered each step to indicate progress and provide a sense of accomplishment

Finished questions.png

Required Questions

Finished Payment.png

Payment Information

Finished Verification 2.png

Email Verification

Finished Confirmation.png

Order Confirmation

OUTCOMES

Here's what I found when I conducted usability tests on my final designs:

50%

decrease in amount of time taken to complete a reservation.

40%

decrease in required number of steps.

"It's a lot easier to navigate now that there's less to read, and I love the icons - I can find what I'm looking for faster that way." - Usability test participant

REFLECTION

An exciting challenge and valuable experience as an emerging designer.

Being the sole UX designer for this project taught me a lot. Looking back, here's what I believe would strengthen this project:

More User Research

Since this was a class project, the problem space was defined for me. Conducting my own needfinding research would give me greater insight into typical use cases and constraints users experience.

Quantifying Impact

I'd like to explore ways to better quantify the impact of my design changes - perhaps through more in-depth usability testing or A/B testing.

bottom of page