Santa Monica Park & Recreation
I conducted my research through AB testing, usability testing, and focus groups.
I have redesigned and reiterated multiple prototypes of Santa Monica Parks and Rec's activity and Venue reservations flow. They were built in Sketch, Figma, Invision, After Effects, depending on the design phase I was in.
Process & Initial Approach
Responsive Web Vs Mobile App
Based on our background research, it was apparent that an app would have a short shelf life with potential downloaders. Users would rather access a clear mobile site, a statement that would be bolstered by our team’s continued user research.
Usability Test on Existing Website
With a first, very topline pass of the site, the group formulated a plan to test the existing site’s ability to convey relevant information efficiently and enable users to complete activity registration and facility reservation tasks.
Research
To better familiarize ourselves with the site and its functionality, we conducted Heuristic Analysis as the first step of our research. We identified the existing site's common usability, efficiency, learnability and error management issues as problems and rated them as per severity. We also conducted Usability Tests on the existing website among users to identify common obstacles and problems users faced.
01 Problem Statements
- Clarity - Users do not have a clear communication of the Site’s services and values
- Visual Hierarchy - Users find it difficult to identify their next steps in the process
- Usability issue - Users are overwhelmed with categories & results and overall functionality of the website
- Efficiency Issues - Filters and categories are unintuitive and confusing
02 Strategy
Task Analysis
Further, in our research, we conducted some user interviews and task analysis. We wanted to better understand our users and what they valued and what motivated them. To synthesize this data we did 3 iterations of this affinity map with 6 different users and came up with 7 actionable I statements.
After serious brainstorming sessions and evaluations, Some of the important I statements we came up with are:
“I value simple and quick processes”
“I value searching and filtering easily”
“I want to view availability upfront”
In addition to these insights that we gathered, we learned that a mobile site is more beneficial than a mobile app because users want direct access rather than downloading or saving an app.
User Persona
After synthesizing this data from the affinity map we created a user persona that embodied our users, their values and motivations.
This is our persona Elizabeth, she is a software developer with two kids. She is on a strict time schedule so spending weekends with her family is extremely important. She values health and wealth so keeping her kids active is a must.
“There’s nothing more I love in this world than seeing my kids happy”
Needs
Mobile Accessibility
Keeping her kids active
Leaving her kids in trustworthy hands
Needs information quickly & upfront
Frustrations
Work/life balance
Wasting valuable time
Sense of community
Customer Journey Map
Through Customer Journey maps, we wanted to better understand the journey of users and their interactions using the current site. Now looking at Elizabeth’s Customer journey of Elizabeth registering for an activity, we can see that she has many pain points in her experience. Some of which include the functionality of the site with the clear all buttons and the search bar not working. There is also a lot of ambiguity in the labeling of the content. So this is Elizabeths second journey map, Unfortunately, Elizabeth was not able to reserve a venue through the mobile site since the mobile site did not offer that feature. So instead she tried to reserve an event space through the actual website.
Customer Journey Map for Elizabeth registering for an activity
Customer Journey Map for Elizabeth reserving a venue
Through our User interviews, we have come to see that Liz had a very difficult time with our reservation process having low points throughout the journey.
03 Feature Prioritization
Synthesizing from the user research and overall key insight findings, I came up with the Feature Prioritization. From Liz's first journey map we see that enhancing the filters was a must since it was a big point for Liz's frustrations. While conducting various interviews it had emerged, interviewees are not able to work with the calendar as well.
And Liz as a worried parent, who does not have time to helicoptering over each activity she is looking for user-generated confirmations that her children are in the right class with the right instructors. And from the Business perspective, the city was looking for a clear and transparent way to provide registration & reservation confirmations for their users. We needed to find a way to integrate this feature for Liz
How might we help Elizabeth register for activities and reserve venues with ease?
Low Fidelity Wireframes & User Tests
Whiteboarding Sketches - After synthesizing our research data from user interviews and task analyses, we began to sketch screen layouts. The user’s main goals are to be able to register for an activity and reserve a venue.
I led a design studio, where we each sketched our own ideas for the screens, compared and gave feedback, and then sketched a second round of screens. From there, we collaborated and combined our ideas to create the final designs that we used to create our medium-fidelity wireframes.
To test our design and its usability, we used a paper prototype usability test and after this, we learned that the users wanted more context for the site. The homepage was misleading to what the user could do and the intention for the site was.
Key Tasks Tested
Results
The Users were confused about the filtration process. They thought they were forced to apply all filters instead of choosing specific to their needs. Users also felt the need to check facility availability quickly and upfront. From this research, we changed our homage design to the one thats shown below.
Medium Fidelity Wireframes & User Tests
Paper Prototype
- Users wanted more context for the site
- Wanted more visuals and less lists
- Certain filtering options were not actionable enough
- User wanted to check the event availability upfront
Digital Prototype
- Users were confused about the early filtration process on the homepage
- Call to actions were confused with labeling
- Users did not understand what the services the website offered due to lack of site context.
Key Insights
After iterating and working on the new digital prototypes, the users were confused about the early filtration on the homepage and the Call to actions. Users were unable to understand the context of the site in terms of what services the site actually provided.
Based on these insights, we iterated and reverted back to our old designs and added branding and logo in order to give users a better context for the site. Also, we added visual graphics and icons to help users understand and solidify the browsing process.
04 Wireframes
Activity Registration Flow
The Activity Registration Flow is very simple, you click on the tab you are directed to the activities, on choosing sports tab you see the lists of all the sports activities, using the filters you can narrow down your search results, you can add to favorites and keep browsing or you can select an activity and head to reserve.
Venue Reservation Flow
Click on the Reserve a venue tab to go to venue lists, using filter options narrow down your search results to find the venue you are looking for. You can also add to favorite as you browse and then choose the one you want to reserve.
Calendar Availability
The calendar availability feature helps you check the availability of the venues quickly.
Payment & Confirmation
The payment process is very simple and seamless, you can choose a family member and head straight to checkout, make payments using credit cards or easy apple pay. On booking, you get a confirmation with details of your reservations.
High Fidelity Wireframes & User Tests
After creating our medium-fidelity wireframes, we designed our high fidelity screens. We began to conduct usability tests with users that ultimately validated our designs.
As we move into our proposal and prototype, we’re reminded of Elizabeth and her primary pain points as she struggles to navigate the Santa Monica mobile site and attempts to take care of her children’s needs between meetings.
Key Insights
Filter
Mobile
Availability
Efficiency
Pain Points
Currently, the filters are long-winded and non-specific.
Currently, mobile reservation access is not possible.
Liz isn’t able to check available dates to properly plan around her child’s graduation party.
Lastly, she’s not able to dedicate the time needed to learn how to navigate the extensive site currently.
Solutions
The new design breaks these down to the essentials.
The new design focuses on booking on the go.
The new design introduces an availability calendar for visibility.
Now, her flow is streamlined with clear CTA’s, descriptions, and buttons.
Home Page
- Logo and branding with a call to action cards provide a clear context of the site.
- The search bar allows us to quickly explore activities, venues or locations.
- The Map feature helps to locate parks near you.
- Upcoming Events and Featured activities are scrollable.
Activities Registration
- Activity card icons serve as a visual aid in graphical communication, easy browsing, and vast filtering.
- Activities list page include date, timings, customer ratings and prices which helps user make a decision faster.
- Filters are specific to narrow down options.
- The Activities page includes information such as class details, location with the map for directions, Instructor details, amenities and parking, other activity options and contact information.
Calendar Availability
- Calendar icon lets you check the availability of the venue.
- Green represents available dates whereas red represents not available.
- Option for flexible dates
- CTA Check availability directs to the venue page where the user can reserve the venue.
Venue Reservation
- Venue list page includes calendar, capacity and add to favorites.
- Filters are specific to narrow down options.
- In filters on selecting amenities, the park lists automatically pre-populates.
- The Venue page includes information such as venue details, capacity, timings, description, pricing, parking, and contact information.
Checkout Process
- Easy to select a registered family member
- Order confirmation summary with pricing details
- Seamless payment options and checkout process
Recommendations and Next Steps
- Accessibility Features: Language offerings, ADA compliant
- Availability Tool: Further build out availability function and test
- Responsive Site: We would like to make this experience available and fully responsive to be available on various platforms such as desktop as well and make sure it's adaptive to any screen. It will be a lower maintenance cost for the city as well.
© Kanchan Gaur 2020
+ 1 (323) 791 3330
kanchangaur1986@gmail.com
LinkedIn