Surf School UX/UI Redesign resulted in +727% mobile engagement

I redesigned the site to reduce cognitive overload, simplify booking paths, and make it mobile-friendly — resulting in +727% mobile engagement and +361% desktop interaction. Start scrolling for the story.

Or jump to the solution here.

OVERVIEW

Lanzarote Surf, one of the most recognized surf schools in the Canary Islands, struggled with a cluttered, overwhelming website.

Users faced difficulties regarding:

– navigating the site,
– understanding available courses,
– and completing bookings.

The website contained excessive text, inconsistent branding, and lacked a streamlined user flow.

GOAL

  • Simplify content structure to make course options clearer and easier to navigate.
  • Enhance branding consistency to improve credibility and user trust.
  • Optimize for conversions by making CTAs more prominent and reducing friction.
  • Improve mobile experience, given that most visitors accessed via mobile.
  • Maintain SEO rankings by keeping original URLs intact.

ROLE

UX/UI designer & Web dev.

TOOLS

Figma, Miro, Google Analytics, Hotjar, WordPress

TIMELINE

Oct 2024 – Jan 2025 (14 weeks)

RESEARCH

Understanding the Problem

Despite the amount of information available on the original website, users were still struggling to find clarity. I conducted user interviews to uncover behavioral patterns, decision blockers, and unmet informational needs.

During interviews, we found that users still had very basic questions not addressed on the site — like how to identify their surf level in order to choose the right course. This lack of clarity often led to frustration or hesitation, causing potential customers to drop off before reaching the booking step.

FINDINGS

Users struggled with too many options, so...

Simplified offerings to highlight the most popular plans.

Worthless information repeated as a strategy to boost SEO but interrupted a smooth user experience, thus...

I moved that information to the footer via FAQs and optimised it for SEO.

There was so much text that it prevented the user from finding the information they were looking for, then...

I used dropdowns, carousels and iconography to facilitate reading.

Users didn’t know their surf level, until we...

Added a comparison table to help them self-assess before booking.

CTAs were not visible enough, but then...

Decided to made them bold, consistent, and action-driven.

Solo travelers hesitated to book, so I...

Adjusted messaging to encourage individual sign-ups.

Quantitative Research

To understand how the original website was performing and where users were engaging (or dropping off), I conducted a multi-source research process combining:

  • Google Analytics (GA4): to track traffic sources, device behavior, top-performing pages, and funnel drop-offs.
  • Hotjar: to analyze heatmaps and scroll depth, identifying where users lost interest or missed key actions.

  • Semrush: to audit search visibility, keyword positioning, and competitor presence across surf-related queries.

FINDINGS

Users engaged… but didn’t convert

People were interested — but something in the experience was blocking them from booking.

Mobile dominated traffic, yet underperformed in conversion

While most users came from mobile, only 8% reached product pages, compared to 13% on desktop.

Most bookings came from solo travelers choosing single classes

50% of all bookings were for 1 person, and for a half-day single session. I repositioned this option to reduce choice overload.

Landing pages mattered more than the homepage

I reorganized the menu based on real entry points and hid content that didn’t lead to conversion.

Only a few pages concentrated the majority of traffic

Pages like “Camps” and “Classes” had strong engagement. Others like “Gallery”, “About Us”, or “Blog” received less than 1% of visits.

Heatmaps showed users didn’t scroll far enough to reach booking CTAs

I placed a clear CTA at the top of each page, reduced page length, and minimized the number of clicks needed to make a decision.

THE PROCESS

Designing to reduce cognitive load & promote conversions

UX/UI design for Surf School, a platform optimized for booking and managing surf lessons.

To understand how users interacted with the website, I created a customer journey map that revealed key pain points:

  1. Consideration Stage Issues: Users had trouble finding relevant information due to cluttered pages.
  2. Decision Stage Friction: The lack of clear CTAs made it difficult for users to take the next step.
  3. Mobile Experience Challenges: Despite most traffic being mobile, the desktop experience was prioritized.

 

Key solutions implemented:

  • Reorganized the website’s structure to focus on high-interest content.
  • Consolidated pages and removed unnecessary distractions.
  • Simplified booking flows to guide users directly to reservations.
  • Optimized for mobile-first navigation.

BEFORE

Redesigned user interface – improved UX/UI design for better usability and accessibility.
Data-driven UX design – how surf students interact with Lanzarote Surf School's website.
Data-driven UX design – how surf students interact with Lanzarote Surf School's website.

AFTER

Redesigned user interface – improved UX/UI design for better usability and accessibility.
User-centered website design for Lanzarote Surf School – intuitive and engaging interface.
User-centered website design for Lanzarote Surf School – intuitive and engaging interface.
Seamless digital experience for Lanzarote Surf School – optimized for surf students.

Post-launch impact: Optimized for mobile-first growth.

  • €19K in revenue in the first 8 weeks — setting a solid foundation for 2025 growth
  • Mobile sessions and engagement time skyrocketed, showing improved UX.
    • Avg. interaction time: +727% (from 6s → 55s)
    • % of sessions with interaction: +95% (from 24% → 47%)
  • Bounce rate dropped by 35%, thanks to improved navigation
  • Customer support inquiries reduced, as FAQs covered common concerns
Improved conversion rate by optimizing UX – Lanzarote Surf School case study.

NEXT STEPS

The client has been recommended to continue to monitor the website in Google Analytics, with heat maps and user interviews. In addition, the number of customers accessing through direct CTAs to the booking is being measured.

With this information, advertising actions can be proposed in Google and Meta Ads to attract specific and interest-targeted customers to each of the pages.

It is also proposed to encourage the use and application of a Live Chat bot to resolve doubts within the platform and thus reduce the number of emails and WhatsApp messages received by the customer.

The design must remain alive. This design has been presented based on the results of the previous study, but I am convinced that it can be further optimised and A/B tests can be carried out to make new decisions and continue implementing improvements.

Looking for a designer?

Get in touch

Do you have a product idea, want to discuss a project, or need a designer? Drop me an email at

hi@designbysofi.com

Not sure? - Sneak peek the next case study

Portfolio of Sofi Mateo, UX/UI designer - tags apnea app

Onboarding redesign focused on increasing free to trial conversion, reducing drop-off, and enhancing perceived value. By incorporating personalisation, social proof, and interaction variety, the new flow aims to drive higher activation and subscription rates.

Check it here.