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.
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
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.
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”
Keeping her kids active
Leaving her kids in trustworthy hands
Needs information quickly & upfront
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
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
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.
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.
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.
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.
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.
Recommendations and Next Steps
© Kanchan Gaur 2020
+ 1 (323) 791 3330