BACKGROUND

The Los Angeles Department of Parks and Recreation website offers a wide range of services and information. Users can learn about news and events, park projects and planning, park rangers, historical sites and activities . 

Users can also look up park venues and facilities to reserve like campgrounds, basketball courts, swimming lanes and tennis courts to name a few. However, regardless of what kind of activity a user wants to do, they have to travel to a separate website in order to look up an activity and complete the action of reserving.

This separate LA Parks and Rec reservation website is where this redesign focuses on, with an emphasis on reformatting the reservation process for reserving tennis courts.

APPROACH

I’ll be approaching this project using the design thinking methodology to help guide me to a solution that focuses on the people I am designing for and create the best value for them.

And this is what the design thinking process felt like

RESEARCH GOALS

First, it was important to think about research goals and create questions that would help me achieve those goals and detail the methodologies that I’d use to help me gather information.

Research goals are as follows:

• Identify the target audience of the tennis reservation website

• Learn how people currently approach using the reservation website

• What are users primary motivations, goals and frustrations when using the current website

• Learn more about current competition and what they’re doing successfully

METHODOLOGIES

Market Research

Competitor Analysis

Heuristic Evaluation and Markup

SME Interviews

1:1 User Interviews

LEARNING MORE ABOUT THE MARKET

Los Angeles is a large city with many different smaller cities within it. That being said, there are a lot of tennis courts to chose from. Each city has at least one tennis court complex that operates through that cities offices, i.e. Santa Monica City has their own courts and is separate from the bigger, LA parks and rec courts. Out of those courts, there are different way of reserving courts for a match. Some courts use a reservation process built into the cities website and some courts use apps to make reservations like Kourts.

It was important to understand LA parks and rec’s tennis court website’s direct competitors in order to get a good understanding of how other services have set up their sites for reserving courts.

Additionally, whether it be reserving a table at a restaurant, registering for an event or even making a doctors appointment, reserving things online has become a very common online practice and over the years, standards have been developed for that experience. Because of this, it was important to research indirect competitors in order to learn from their user experience, UI design and reservation flows.

COMPETITOR ANALYSIS

In order to better understand competitors both direct and indirect, I analyzed competitors to examine strengths and weaknesses of apps and services that allowed LA residents to play tennis.

Apps and services served different purposes from finding lessons, joining communities and reserving courts - it was important to examine indirect competitors that had strong reservation design patterns as signing up and reserving is now a common practice in todays virtual landscape

HEURISTIC MARKUP

How does a user experience the current product from beginning to end?

In order to understand the current user experience and how the site functions, I set a task for myself to complete using the existing site and documented my process throughout the experience.

Just from taking a brief at the interface, I knew I was going to have to sit down and really take some notes on interactions, design patterns and usability issues.

HEURISTIC EVALUATION

After putting myself through the task flow, I ran the existing site through a heuristic evaluation in order to measure the usability of the current user interface.

OBSERVATIONS

Doing a contextual inquiry was super helpful. I couldn’t believe I learned so much just from hanging out around the area and observing the environment

For the sake of space, I’ve decided to only name a couple observations here, but happy to talk about the rest of them if you’d like!

• Some people would come to play tennis only to be told that they’ve come at the wrong time and sometimes on the wrong day.

• Instructions for reserving online were also different between courts.

• When people checked in with the attendants and had to show there reservation for confirmation they told the attendant that they had reserved using their computer and didn’t know how to access their reservation through their phone to show them.

• Some people didn’t know they had to sign up online and wanted to try and reserve a court through their phone but they ended up not being able to figure it out.

SME INTERVIEWS

I wanted to get a better understanding about the problem space so I interviewed the tennis attendants that were responsible for checking in and managing reservations.

Findings from across all courts visited:

1. People call the attendants everyday because they can’t figure out the website and they have to walk them through each step.

2. Players ages are from young adults to middle age with some outliers being older players at around 65 - 75.

3. People say the terminology is misleading and causes a lot of confusion.

4. People often get stuck when they’re trying to find a court that’s close to them.

5. People often mix up their reservation and show up on the wrong day.

6. Attendants said that some of the hardest parts of reserving a court online was choosing a location because users have to scroll through a long list of facilities that don’t necessarily even lead you to one that has a tennis court.

7. Lastly, navigating through the terminology because, “it’s very robotic and doesn’t help them know where to go”

TALKING WITH USERS

After I had observed my surroundings at each court and interviewed the attendants, I reached out to 5 participants who play tennis on a regular basis.

Recruiting participants for an interview was harder than anticipated. People were always moving around. They were either quickly on their way to the attendant booth to make their reservation on time, playing tennis or walking back to their cars.

That being said, I had some incentive. I came prepared with Starbucks gift cards as a reward for those willing to be interviewed.

By asking them open ended questions and listening to their responses, it helped me gain a strong understanding of why they play tennis as well as their needs, wants, motivations and frustrations when it comes to playing tennis at these courts.

I also had some assumptions about my users validated! Some of those assumptions were:

1. Users play tennis because they enjoy being active and being outdoors

2. Users struggle with reserving a court and seeing what courts are available.

3. People are looking for a more simplified website that allows them to reach their goals quicker

4. User’s will book a tennis court from their desktops computers at home or at work because using their phones is “a trash experience”

5. Users would prefer to experience an easier booking process from their phones

6. Users prefer to play at a court close to where they live

MAKING SENSE OF INFORMATION

I recorded participants responses on sticky notes and then used an affinity map to help group similar insights and themes into categories in order to help me define the main problem I need to solve.

DEEPER UNDERSTANDING

From the affinity map I created an empathy map so that I could better understand and communicate the problems and mindset of our users in an easily digestible manner by looking at various attributes of the persona based on what they are thinking, feeling, seeing and doing.

USER PERSONA

By looking at similarities in data from my research, I was able to develop a user persona which represents the “archetype” user. This persona will be used throughout the entire design process to ensure that I’m designing for the users.

PROBLEM STATEMENT

After the research had been synthesized and I had an understanding of my user’s needs and goals, I needed to continue to define the problem that I would be solving through design.

After generating a couple of POV statements, I choose the one I thought would provide the most value to users based on what I’d learned through research.

HOW MIGHT WE?

After the problem statement was defined, I developed 4 HMW statements that would help me explore different perspectives of solving the problem

How might we make the current reservation process more effective?
How might we help Tomas find a court near him?
How might we decrease the amount of steps in the reservation process?
How might we create an easier way to search for courts?

CRAZY 8S

Let’s come up with some possible ways to solve this problem!

Crazy 8’s allowed me to quickly get ideas out on paper and generate potential solutions

I wrote each HMW statement on a sticky note and put it on a piece of paper that I had folded into 8 sections, set a timer for 8 minutes and went to work sketching 8 ideas in 8 minutes.

How did I decide on which idea(s) to explore further as a potential solution?

With all my prior research and persona in mind, I took a step back and looked at what I had just created. Looking at the sketches, I realized that there was really one statement that embodied all the others: HMW make the current reservation process more efficient?

Additionally, each crazy 8’s session had generated different elements that, based on my previous research - would help solve the problem and would be applicable to making the current reservation process more efficient.

USERS IN CONTEXT

To better understand and empathize with users in a quick way, I created a storyboard in order to show context and the environment my persona operates in as well as to show how my potential solution could help solve the problem.

How did I decide on which idea(s) to explore further as a potential solution?

With all my prior research and persona in mind, I took a step back and looked at what I had just created. Looking at the sketches, I realized that there was really one statement that embodied all the others: HMW make the current reservation process more efficient?

Additionally, each crazy 8’s session had generated different elements that, based on my previous research - would help solve the problem and would be applicable to making the current reservation process more efficient.

TASK FLOW

Ok, so how do I define what features I need to make for my prototype? The first step was to create a task flow to help define the features I would need to build out for the site overall and for the process of finding and reserving a tennis court.

With the “winning” HMW statement in mind, I only made one task flow:

CREATING THE SITE ARCHITECTURE

I created a sitemap in order to define the reservation website’s information architecture.

My approach to this was going through the current website and trying to map out the existing content.

Based on this I created my own site map where some irrelevant content from the original website was left out and more relevant information was added.

Originally, I didn't plan on performing a card sort activity because of the small amount of content - but, ultimately I decided on doing a closed card sort to validate my mental model with other peoples models. I used Optimalsort and was able to recruit 10 participants

PAPER WIREFRAMES

To start, I wanted to further develop some of the ideas I had come up with during the crazy 8’s exercise and apply my task flow with them in mind. I wanted this done quickly so I used pen and paper to sketch out some concepts

PROTOTYPE

Before moving forward, I developed the rest of the website in the form of mid-fidelity wireframes so that I can go fourth with a full usability test along with an a/b test to see which design was more accurately solving the problem and to test how well the over all decisions I was making were translating to users.

Testing at this point would allow me to choose one design for the reservation process and help me identify any points of friction so that I could iterate

USABILITY TESTING

The usability tests were remote moderated “think aloud” tests via Zoom alongside Maze’s rapid prototyping platform.

Measurable Successes

Going into usability testing, there were a couple specific design elements that I was hoping would prove useful to participants and help add delight to their experience with the redesigned reservation website.

FINDINGS

I discovered a lot of good information about my design that I was proud of and a lot of decisions I made based off the research were validated in testing. There were also some things I learned! Here are a couple examples of what I found:

1. 80% of users knew where they were within the reservation and checkout process

2. 100% of participants were able to find the tennis court closest to their location, reserve a court and add it to their calendars quickly and with ease.

3. 100% of participants - even after instruction that the page they were starting on - did not contain information that would help them complete their task - still scrolled down the page looking for additional information that would help them complete their task.

4. 100% of users clicked the “available time slot” pills that were attached to the court location card instead of selecting the entire court.

1. A/B Test - Design 1 or 2? Which did users prefer and why?

2. 100% of participants preferred design 1 over design 2

3. 60% of participants said, while design 2 was faster, it was more confusing, less intuitive and less informative than design 1.

4. 100% of users said they enjoyed the step by step approach of design 1 because it made them feel, “at ease”, “made more sense as to what they’re supposed to do” and “didn’t have to think too hard about it”

5. Users mentioned that because there are icons associated with other activities in design 1, it told them that there are other things they can do on the site and gives them more interest in coming back and finding out about other activities near them.

These insights were enough for me to use design 1 for the reservation flow. While I personally enjoyed design 1 more, I really thought design 2 was going to perform better in testing - to my surprise, design 1 did far better than anticipated.

AFFINITY MAP

While I was happy to see a lot of my design decisions validated in testing, there were some other issues that appeared during usability testing.

During the interviews, I recorded all of my notes on a word document, writing down what participants pressed, what worked and what didn’t, points of friction and successes.

After this, I transferred the answers to sticky notes and color coded them for each participant, also putting a number on each answer related to the corresponding task that the note came from.

Then, I recategorized them by grouping all their answers together by successes and pain points.

After those categories were created I recategorized them detailing specific features that were or were not working along with take aways and solutions to these problems.

Priority Revisions

I prioritized these findings based on the level of impact and effort. There were a lot of little UI issues that I hadn’t expected to be a problem but were easy enough to fix. There were also somethings that I hadn’t considered that a number of users had brought up. During testing one task had users starting on the “courts near you” page, where I asked them, “from this page, how would you find information about tennis tournaments happening this season?”.

All 5 participants scrolled down to the bottom of the page to look for more content. For the most part, their facial expressions came off as confused and after they couldn’t find what they were looking for, stressed.

After scrolling, users went to the top navigation and clicked “events” which completed the task.

Even though participants were able to complete the task the way I hoped they would (given a little bit of a struggle), the extra time it took for them to use the top nav and the fact that all of them scrolled down looking to find answers was enough of an insight for me to add a new block of content titled “Related Activities” that would change respective of the type of content that the user is viewing.

Pay Pal and Apple Pay were added after 3/5 users mentioned that they were “use to” having the option to use other forms of payment instead of only having the option to put in their credit or debit card.

2/5 users also stated that not having alternative payment options decreased their perception of the trustworthiness of the site and they would normally bounce.

Taking these notes into consideration and then taking a look back at my original user interviews and additional research, I decided that adding additional payment methods would also help my persona and support one of my original HMW statements and further, my design goal - to create the most efficient and convenient reservation experience for users.

UI KIT

LA’s Department of Parks and Recreation had existing branding, but weren’t using it to their fullest potential.

In some instances the branding was unnecessary and distracting and definitely not accessible. I wanted to create a system that was more inclusive, simplified and more informative while still maintaining brand elements.

A UI kit was developed throughout the design process in order to establish a language for the design system and to act as a document that could be passed over to the development team in order to ensure design elements remain consistent throughout the site and through any future developments or iterations.

Here are some examples:

IMPROVEMENTS TO THE MOBILE DESIGN