Surf Stay proves a unique experience tailored to surf adventure seekers. With accurate weather forecasts only being predictable within a short time period, it’s essential that surfers have the ability to check the forecast and book last-minute trips all in one application. With the use of a detailed onboarding process and machine learning to ensure that every user has a tailored experience.
.png)
How might we personalize the surf booking process in one place?
How might we book last minute trips, so users can surf during the optimal forecast?
How might we alert users on when their preferred destinations are firing?
Surf Stay is a combination of a forecasting application and booking site that provides its users with the highest chance of scoring the best waves. The users can customize the feeds to allow for the best experience of adventure trips. Through these lists of customizations: skill levels, board preferences, breaks, and location, Surf Stay gives the user a personalized experience that will ensure their trip is what they dreamed of.
I led the design for version 1.0 of the Surf Stay application, including everything from user research to delivery of the finished product.
.png)
Based on the double diamond design thinking method of Discover, Define, Develop, and Deliver. I was able to deliver a user-centered design for surf seekers everywhere.
When beginning the discovery phase of user research, the goal was to understand what users currently use for traveling (competitive research), user pain points (user surveys), and accessibility issues. The overall goals was to find anything that would be worth noting that would cause the user either joy or pain (user personas).
%201.png)
SUMMARY - During the collection of data through user surveys, the key findings that stood out more than the rest were as follows:
.png)
Bio
Goals
Frustrations
Bio
Goals
Frustrations
.png)
.png)
.png)
I decided to go with the retro surf colors of the 70s to bring the nostalgia of surf culture to get you stoked on your next surf trip. Surf culture is unique and has a strong, diehard following that enables surfers to quickly notice the meaning of this specific color palette.
Orange as the call-to-action was necessary in my eyes due to its bright and inviting feel. It stands out the most out of the 70s color palette.
After trying out multiple typefaces, Nunito Sans is the type I decided to go with, due to its ease of readability and modern look. It also is appealing to the eye when adjusting the size from 10pt font to 50pt font.
I explored many avenues for the logo for Surf Stay. I knew I wanted it to feel balanced due to the importance of balance within the sport. I started to symmetrical shapes and waves and things started to get complicated. So, I spent time simplifying the logo. I ended up going with a square due to the importance for favicons and other assets. Then added the symmetrical lines with waves peeling right. The minimal look was what I was going for and I feel it represents the surf culture as a whole.
.png)
.png)
The onboarding illustrations - I struggled with displaying a way to better signify one's ‘surf ability’. This was due to my room-for-improvement illustration skills. The UI on the left was my first go at displaying skill levels and it didn't match the same look and feel of the other illustrations in the onboarding process. The UI on the right, showed a more practical difference in skill level, because the larger the wave, the more skilled you are. It also matched the illustrations on the upcoming onboarding pages much more closely. Overall, the process took me countless sketches to figure out a way to show abilities without getting too detailed.
The filters - My initial wireframes and high fidelity prototypes had only four filters to choose from. Due to rapidly creating the prototypes I didn't think too much about the most useful filters that are necessary in this space. After realizing that there are so many filters that are applicable, it was important that this area had room for expansion. Planning for growth and future features, it was important to allow for easy changes in the future.
.png)
The search - Having a human-centered approach to the search functionality. I found it incredibly important to make it function in a way that would help them discover new places, while also finding what they needed if they had a specific goal during the search. I wanted the search results to not only give the user a location, but to give them sub-categories such as hotels, recent, and forecasts.
As a user, I would like to explore customized last minute trips, so I can surf during the optimal forecast.
- 90% Success Rate
- 7.4 Seconds Average Duration
- 9.6% Average Misclick Rate
As a user, I would like to know where the best trip would be for me based on filter preferences, so that I can enjoy the surf during this spontaneous trip.
- 66.7% Success Rate
- 7.5 Seconds Average Duration
- 9.8% Average Misclick Rate
As a user, I would like to receive alerts of favorite spots, so I can enjoy the surf at the optimal times.
- 80% Success Rate
- 9.7 Second Average Duration
- 32.7% Average Misclick Rate
.jpg)
After completion of the first usability tests, it was necessary to enhance the experience of the set alert functionality. The act of setting an alert was not as clear as I first thought it to be, and adding some content to clear that up increased the success of that specific user flow immensely.
Another enhancement was to provide fixed buttons for showing the filtered results. Giving the user a clear call to action always available no matter how far down you scroll.
.png)
.png)
.png)
Achieved a working product that enhances the experience of spontaneous surf travelers through a human-centered design process.
Obtained valuable data that will improve future iterations of SurfStay, specifically the alerts functionality
With time constraints for this product, there were more areas where we wanted to do more usability testing
.png)
.png)