Our Client
Santa Monica Parks and Recreation has 32 parks that are popular gathering spaces. They work with the community to create and operate beautiful, accessible public spaces and facilities for all to enjoy. In addition, they produce programs and events that enrich the lives of community members - culturally, socially, and physically, and also ensure that supportive services are available for those in need. I collaborated with a group of three to redesign the activities sign up flow and create a facility reservation flow for the mobile site.
The Challenge
Santa Monica Parks and Recreation wants to increase public engagement and enhance their current overall mobile experience.
Our Solution
Our team came to the decision that we needed to add a space reservation feature for the current mobile site since that was a big reason for user engagement. We then needed to enhance the mobile experience by creating a more seamless flow, visual hierarchy, a cleaner aesthetic, and better overall usability to make purchases for spaces and activities more convenient and efficient.
Heuristic Evaluation
The initial step of our process was researching the site to look for any fundamental issues that might impact functionality through a heuristic evaluation.
C&C Analysis
Once Conducting our heuristic evaluation we discovered issues that ranged from efficiency to learnability and it was now time to conduct a competitive and comparative analysis. It was important for us to see what the market/competition was like and what key features we felt might need implementing in the future. Not only did we look at other parks and recs, but as well as other consumer apps that allowed reservations and bookings. From this analysis, we determined that features like a reviews page, amenities page, calendar, and mobile app were something to keep in mind.
Sketches & Wireframes
It was time to get into our development phase so we could prepare to eventually build a high-fidelity prototype. We sketched low-fidelity wireframes to give ourselves an idea of how we would build the new activities flow and the new reservation flow. We used those wireframes to create paper prototypes to begin the start of our usability testing. We did six usability tests and iterated our designs throughout the process to ensure quality results
Key Takeaways:
Users wanted more context for the site
Wanted more visuals and fewer lists
Certain filtering options were not actionable enough
Activity Flow Sketch
Space Reservation Sketch
Mid-Fidelity Wireframes
After gathering data and doing iterations from the paper prototypes we conducted mid-fidelity usability tests with clickable prototypes using Figma
Key Takeaways:
Users were confused about the early filters on the homepage
Call to actions were confused with labeling
%20(1).png)
Branding
Once we felt comfortable about our mid-fidelity iterations it was time to figure out how we would develop a new branding and style guide so we could move into making our project high fidelity. We used pink as our main color in this salmon tone, this primary color conveys health and happiness. We then used our secondary blue teal tone to provide a dependable presence and help represent Santa Monicas Sunset. With these two being commanding colors, it is important to simplify the rest of the colors within the mobile site to easily identify different components. We then chose Proxima Nova as our type font choice because of its simplicity and popularity making it the most accessible option.
Original Site Mockups
Within the original site, you can see a lack of and filtration and a lack of representation from images. There are long-winded lists and a navigation which isn't suffice.
.png)
Home Page
Space Reservation Search
Activity Search
High Fidelity prototype
After creating our style guide and understanding our brand we were now in a position where we were ready to create our high fidelity prototype. We ensured good visual hierarchy, clearer call to action buttons, more visuals, and fewer lists, and a seamless filtration system.
.png)
Space Reservation Prototype
Activity Registration Flow