SF Recreation & Parks

Refreshing a widely used city website
to be more user-friendly

Refreshing a widely used city website to be more user-friendly

Role

Product Designer

Team

Individual

Skills

UX Research UX/UI Design Prototyping

Timeline

8 weeks

Overview

The San Francisco Recreation & Parks website services a broad and diverse audience

People who use the website include those who are seeking park information, recreational activities, event schedules, and reservation services. Despite its importance as a public service platform, users have difficulty navigating the site and finding relevant information efficiently.

This project aims to redesign part of the mobile and desktop website to better support users’ needs through improved usability, accessibility, and information architecture.

BACKGROUND

The website is overwhelming & not user-friendly

When I was first interested in playing tennis, I learned I had to make a reservation on the SF Rec & Parks website for the courts nearby. Figuring out how to make that initial reservation was more difficult and took longer than anticipated. Did other people also have a similar experience using this site?

RESEARCH

Users had a hard time navigating the site

I conducted user interviews and asked users to provide a live reaction to the website. The interviews revealed the following pain points:

Fragmented Information

Information is spread across
multiple pages

Information is spread across multiple pages

Low scannability

Content is often displayed in blocks of text and long lists

Cognitive overload

A lot of information is usually displayed all at once

Through affinity mapping, I found the following insights:

  • Users want to see important information upfront such as location, hours, maps, directions

  • Navigating pages is difficult due to content density, terminology, and lack of visual hierarchy

  • Users want the steps to complete a task to be minimal

  • Users use their mobile phones to look up information

View the affinity map here

User Persona

I created multiple user personas but decided to focus on Joyce “The Spontaneous Explorer” for this project. Joyce represents a large number of users who want to quickly get information on a park or facility using their phone.

How might we make the mobile experience fast and navigable?

Task flows

Reduced the steps need in task flows

For this project, I decided to focus on two user journeys: finding a dog-friendly park and finding a tennis court to reserve. Users during user interviews mentioned wanting to find places based on locality and with less effort. In both of the proposed flows, I reduce a page needed to complete the tasks.

Explorations

Ideated the best path forward

I brainstormed possible layouts for the pages needed for the task flows and weighed the pros and cons of each. After selecting a layout for each page, I moved on to mid-fidelity and high fidelity wireframing.

Usability Tests

Users needed more noticeable guidance and consistent experiences

I conducted two rounds of high-fidelity usability tests and uncovered the following pain points:

3/4

of users had trouble verifying if the park was dog-friendly on mobile

3/4

of users expected to sort locations by proximity on the search results page

2/4

of users noted visual and informational inconsistencies across the site

Revisions

Updating the designs based on feedback

Easier identification of dog-friendly parks

Message to redirect users to the map

Fixed inconsistent visuals and component behaviors

UI Kit

A more modern feel

Many users stated the website looked outdated, so I refreshed it to make it look a bit more modern. I updated the color palette to reflect more of a parks feel to the website.

Solution

Giving users a more efficient way to get what they need

Homepage

The redesigned homepage uses the limited mobile screen space more efficiently, requiring less scrolling to view all content.

All Locations

This page combines two pages in one, letting users see featured locations and explore all locations on the map.

Park Page

The park page has been redesigned to allow users to see more relevant information such as park name, hours, and location above the fold.

Tennis & Pickleball Page

The court search functionality lets users find tennis and pickleball courts near them without having to search up courts in separate directory pages.

Prototype

Explore the prototype

See the mobile prototype for finding a dog-friendly park below.

WHAT I LEARNED

Reflection

  1. Responsive websites are challenging
    Designers need to plan and design for the different devices their users are using and how to best present information based on their device. 

  2. Visual hierarchy and information architecture play big roles
    Even if a website has all the necessary information on it, users can have a hard time finding and understanding that information without the right mix of visual hierarchy and information architecture.

  3. If I had more time, I would conduct a third usability test
    An additional test would help me validate whether the new solutions increase task ease and user confidence.