SF Recreation & Parks: Mobile Redesign
Timeline
5 weeks
5 weeks
Discipline
UX Research, Mobile Product Design, Interaction Design
UX Research, Mobile Product Design, Interaction Design
For
SF Recreation & PArks
SF Recreation & PArks
Tools
Figma
Figma
What Was This Project All About?
I was tasked with defining the design process to achieve the following business goals for the picnic reservation flow within the SF Recreation & Parks mobile site.
Business Goals:
- Increase user completion percent of the flow
- Decrease user cancellations or problems for creating reservations
Framework
Start From Somewhere
I started this project following the Double Diamond framework. An outcomes-based approach that focuses on the core issues that users experience. During the research diamond, I identified the problem by discovering and defining user pain points through usability testing and interviewing. These defined pain points became the foundation for the solution as each of my design action items were developed to focus on user issues.
Research Methods
Moderated Usability Testing
3 Participants
A moderated usability test was conducted before interviewing each participant with the instruction to reserve one booking with parameters. I found that users naturally got lost flipping back and forth through out the reservation process, contributing to a large time sink in remembering what parameters to fulfill from the task's instructions.
Mixed-Methods Interviewing
3 Participants
I found that through mixed-methods interviewing, I was able to employ five quantitative Likert-style questions, and two qualitative questions to evaluate the most time consuming process (a pain point) and the best feature from the current SF picnics site. Users enjoyed and credited the built-in map feature which visually lays out available picnic tables and their location within the SF area.
User Interview Questions
1. On a scale of 1-5 (5 being the heights), rate the ease of finding the following parameters:
- Location
- Alcohol Needs
- Bathroom Needs
- Date
- Booking Process
2. What was the biggest pain point during the reservation process?
3. What was the best feature from the current SF Picnics site?
Data Visualization & Synthesis
Data tells a story, and here's the theme!
Keeping in mind that though my sample size is 3 participants, I wanted to try to visualize all of my data, both quantitative and qualitative answers. The quantitative questions, depict the highest scoring parameters when users where finding the perfect picnic spot. Location being the lowest among all participants helped me shape my design solution.
I conducted two thematic analyses to understand my 2 qualitative questions, location-related issues, feature availability, and navigational difficulties were common words utilized to describe major user pain points.
Map functionality, a clear-cut user flow, and simplifying the questionnaire process were commonly spoken about and indicated a priority amongst users.
I conducted two thematic analyses to understand my 2 qualitative questions, location-related issues, feature availability, and navigational difficulties were common words utilized to describe major user pain points.
Map functionality, a clear-cut user flow, and simplifying the questionnaire process were commonly spoken about and indicated a priority amongst users.
.png)
Mapping out the current user journey with observations of pain points from the usability testings.
.png)
Pain Point #1
Finding the right picnic spot is overwhelming - the current user flow to find the perfect picnic spot fulfilling all of a user's needs is overwhelming as they are bombarded by boxes of information. The mobile SF reservation site isn't properly optimized to display all of the information needed for a user to navigate the features they need for a spot.
Pain Point #2
Flipping between pages consume a lot of user navigational time - the current SF reservation site has a map visual but a separate page for reservation, contributing to a time sink in users going back and forth to remember specific details from the map visual. The directory, where users enter to reserve, forgets the map visual and leads to a gap in information as users must go back to remember what spot they wanted.
Pain Point #3
Unnecessary features gave rise to user confusion - users most reconfirm existing information in the confirmation page for reserving a picnic spot. This places further comprehension on users due to redundant information.
Ideation & Iteration
Deep Diving For Users.
Early ideation phases of this project included low-fidelity pages of what features could be address user issues. Rounds of feedback critiques along with these wireframes provided me with direction on whether my design solutions effectively addressed user needs.
These rounds of ideation prioritized user needs, as I entered the developmental phase of the design square in the double diamond framework.
These rounds of ideation prioritized user needs, as I entered the developmental phase of the design square in the double diamond framework.
Low-Fidelity Wireframes
My Solution!
The high-fidelity prototype features a full user flow of over 10 pages, completing reworking the current reservation process along with matching color schematics to align with this department's branding. There are three pages of error states and email confirmation pages included for bonus points, take a look!
Pain Points Revisited
Overwhelming Parameters -> Users Filter From the Get-Go
Redundant Information -> Merged Map and Directory Page
Unnecessary Information -> Concise Picnic Page
.png)
What's Next For SF Recreation & Parks?
There's room for more user testing!
A post-solutions usability test along with interviews would help reinforce a reduction in users completing the overall product flow. Furthermore, interviewing the same participants to see the pre and post pain points and favorite features would help indicate whether users' navigational frustrations are reduced.
If more time was allotted for the project, this form of pre and post user testing would provide optimal outcome-based design solution building for the product.
Explore further map integrations.
When interacting with the map feature, users found that it provided the clearest visual indicators for deciding where they wanted their picnic spot to be. Next steps for this map integration would open further functionalities for users to explore and help the overall ease of reserving a picnic spot.
Learnings
Questions. Questions. Questions.
From within my Product Design Studio course, I was fortunate to be surrounded by 40 other brilliant students keen on design methodologies and constructive critique.
Each week was an opportunity for me to bring forth my design progress and ask consistent questions about how best to focus my design action items, whether my choices fulfill my user and business goals, and should I continue down certain design pathways.
Questions became the norm and were my friend during ever feedback session.
Pivoting is key.
Throughout this five week project, many design decisions had to be changed, refocused, and pivoted into new action items. This meant flexibility, open-mindedness, and feedback intake were crucial to my growth throughout the entirety.
It's okay to change direction, so learning this throughout the project greatly developed my ability to be a product researcher and designer.
It's okay to change direction, so learning this throughout the project greatly developed my ability to be a product researcher and designer.