Hart Goes Surfing - Surfers Application
Client
Hartbeach Surfschool Scheveningen
Project type
UX/UI Design
Project duration
September - November 2022
My role and overview ✍
During this project, I embarked on a journey as a solo UX/UI designer, to explore the development of a new application for Hartbeach, a renowned surf school in Scheveningen. This application was tailored to enhance the surfing experience within the vibrant Hartbeach community. The project comprised both research and design phases, and I dedicated a total of 10 weeks to this endeavor.
Problem 🕵️
As Hartbeach grows, so does its surf community. During busy times, staff get tied up with basic queries, diverting their focus from core tasks. New surfers often face confusion about rentals, lessons, and facility layout. Without a solution, this could strain staff and hinder essential duties.
Project Goal 🚩: To address the challenges arising from Hartbeach's growth, this project aimed to develop a new application. This application's primary purpose was to provide comprehensive information to surfers, both new and experienced, about booking lessons, renting equipment, and all the essentials for a successful surfing experience.
Objective: Create a solution that would empower surfers to access essential information seamlessly, reducing the burden on the staff from answering basic questions.
Aim: Enhance the overall surfing experience for the Hartbeach community, ensuring that as it continues to grow, surfers can navigate the school efficiently, freeing up staff to focus on critical tasks such as planning, email correspondence, and payments.
The Process
Organization needs
During my research phase, I explored the needs of the target audience. However, the company itself had invaluable insights into the challenges faced by the audience who frequent Hartbeach daily. Therefore, I proactively engaged with Hartbeach to listen to their firsthand experiences regarding the existing problems and their ideas on potential solutions, particularly through elements within an app.
Together, we have reached the conclusion to categorize our target audience into three segments:
surfers who come to rent equipment
surfers who come for lessons (including those who book the lessons)
surfers who are regulars at Hartbeach (those who return frequently and may have their own equipment)
Benchmark
In the benchmark, I wanted to discover what current surf schools had implemented in their application to assist surfers. This could include the services offered by the surf school, as well as providing information related to surfing and similar topics. Thus, I aimed to investigate which elements were beneficial for surfers at Hartbeach.
I naturally incorporated several elements that already exist in current surf school applications into the next phase. These elements aligned with my objectives and include:
Personal Accounts: Allowing surfers at Hartbeach to have a comprehensive overview of their personal items, such as booked lessons or saved items.
Online Surfing Tips: Providing tips that facilitate progress among returning surfers at Hartbeach. These tips inform them about the next steps they can take to advance their surfing skills.
Information about Equipment: Informing surfers about the appropriate materials to use at different times, making it easier for them to engage in surfing with confidence.
Surfing Conditions Updates: Ensuring surfers always know whether it's a good day to go surfing. Even when there are no waves, surfers are informed about alternatives. Beginners can choose a calm moment, while more advanced surfers can opt for bigger waves (optional).
Surf Safety Information: In cases of dangerous conditions, surfers at Hartbeach are always aware of what to do in challenging situations. This information also highlights critical safety considerations, such as strong currents.
User interviews (user needs)
The purpose of conducting interviews, in this case, was to uncover the existing problems and identify the needs of the target audience. Each segment has its unique set of needs, which is why I came up with different questions for each segment.
Research
During the concept phase, I seamlessly integrated the research findings. Using a mind map, I organized all the essential elements. This allowed me to opt for a single concept and align it with the client. To gain an early understanding of how specific elements should be incorporated into the new application, I created a style guide at the outset of the process.
Hart Goes Surfing is a concept aiming at aiding surfers with lessons, equipment rentals, and all things surfing-related. The app offers:
Weekly surf conditions
Personal accounts
Current event info
Lesson booking details
Equipment rental info
Safety guidelines
Last-minute lesson bookings
A point-based reward system
FAQ section
Tips for improvement
Opening hours
The reward system involved a QR code for equipment rentals, allowing surfers to accumulate points and redeem them for free rental time. The implementation of this system was a direct response to user feedback, as they conveyed that it would enhance their surfing motivation and encourage them to return more frequently.
Concept
To establish a clear application structure, I designed a sitemap, linking all relevant pages to their respective menu items. This meticulous planning enabled me to have a precise roadmap, knowing exactly which screens to design and where to place each element. Thanks to the initial style guide I designed, I seamlessly transitioned to fleshing out the pages in the form of wireframes.
First wireframes that match Hartbeach’s identity and branding:
Design Details
Using carefully crafted scenarios based on user needs, I conducted wireframe testing with two individuals from the target audience. For each scenario, I tracked the total number of clicks and the number of clicks leading in the wrong direction. This analysis provided valuable insights into necessary adjustments for the final prototype. Additionally, I documented feedback received from the test participants for each scenario. I immediately implemented the improvements identified from the test into the hi-fi prototype.
A few key insights:
Testing
Following the wireframe testing and the valuable feedback gathered, I applied this input to the high-fidelity (hi-fi) prototype. I meticulously refined all screens to a high fidelity standard, incorporating images and colors to enhance the user experience.
To further enhance the overall prototype, I conducted a final test to refine any remaining details, if necessary. I selected two new test participants and provided them with the same scenarios, along with two additional new scenarios. The feedback that emerged from this, however, was positive.
Make and Realization
Throughout this project, I've acquired several valuable lessons. Firstly, the significance of taking in feedback at every project phase became abundantly clear. Engaging in ongoing meetings with the client ensured alignment and helped us avoid potential challenges. Additionally, I've realized the importance of having as many available users as possible during testing. Due to some logistical constraints, I could only involve two participants in each test, which did lead to substantial improvements, but having more test participants would likely have uncovered even more areas for enhancement. This underscores the importance of timely test planning and participant recruitment for achieving the most optimal results, and that is exactly what I will carry forward into future projects and assignments.
Ultimately, both the client and the stakeholders involved expressed a highly positive response to the outcome of the new application.