Skate Lesson Booking Feature

Client

Vibes on Vibes

My Role

Product Designer, UX Researcher

Team

Research, Product, Engineering, Data

Timeline

December 2023 - Now

Tools

Figma, Miro

The Background

Roller skating is growing in popularity.

Vibes on Vibes is a rollerskating company based in London that fosters a vibrant skate community and offers inclusive lessons for all ages and skill levels.

In the past three years, social media (TikTok, Instagram, YouTube) has seen a surge of people in London eager to learn rollerskating, while experienced skaters are dusting off their boots to pick up the hobby again. This has created a demand of skaters of all experience levels seeking tailored lessons to learn how to roller skate.

The Problem

Members are abandoning the lesson booking flow.

Vibes on Vibes have been accepting roller skate lesson bookings for their members through a form linked on their Instagram page.

However metric goals of lessons booked were not being met, and through analytic research I found out that 60% of users who open the booking form do not complete the process of booking and paying for lessons.

Business Goals

Discovering a better way for skaters to book lessons.

The primary business goal is to provide a better way for skaters to book lessons with VOV while improving VOV’s ability to manage their bookings efficiently.

This will be measured through:

Increasing conversion rates for lesson bookings (primary).
Improving user feedback on the booking experience (NPS).
Improved management of bookings and payments by VOV staff.

The Solution

Lesson Booking Feature on the Vibes on Vibes website and native app.

The new lesson booking feature on the VOV website and native app will walk users through a flow to efficiently learn about the types of lessons VOV offers and easily book and pay for these lessons. The design will also feature a new internal revenue management system for VOV staff to view and manage their bookings and payments.

Design Process

The Thoughtful Execution Tree.

Our team followed the Thoughtful Execution Framework by Annina Koskinen which helped us generate multiple ideas grounded on the business goal and user insights.This project was also strongly underpinned by Design Thinking principles to keep the design user-centric.

User Data & Insights

How did the people feel?

212 Vibes on Vibes members (ages 17 - 42) submitted responses to a survey I created that asked quantitative and qualitative questions about the skate lessons VOV offer, and how they access them. Of these responses, our research team followed up and interviewed 12 people for a deeper-dive. The biggest insight was that members were not aware of VOV’s online booking form - most users book lessons by running into VOV staff in person in the area they usually skate in.I created 2 personas to represent the users in our research.

User Data & Insights

Key customer insights.

Of the 212 responses in our survey:

74%

of responses

Shared that they have had trouble finding where to book lessons in the past. 60% of these looked elsewhere.

68%

of responses

Revealed that people were unsure of the catalogue of lessons and services VOV has to offer.

63%

of parents

Expressed that the current payment method for lessons is informal and unreliable.

User Data & Insights

Grouping insights from data to begin defining core problems.

I added data from our user research and existing consumer data about VOV’s current user base to the Thoughtful Execution tree, and categorised them into groups that were relevant to the goal.

Problem & Opportunity

How-might-we...?

When considering project direction, I pitched to stakeholders that improving the current booking flow first may produce more impact than focussing on reach and loyalty.How I justified this decision:
‍According to our research, there may be problems in the current booking process that’s dissuading users from placing bookings.

Also, VOV already have an existing customer base of users motivated to find and book lessons - they’re just failing to do so.

I generated a few How-Might-We statements to begin to think of opportunities for the identified user problems.

Design Hypotheses

Card sorting to understand users’ mental models.

I hosted an open card sorting exercise with 9 users to help our team understand users’ mental models of booking a lesson to inform our early concepts and hypotheses. I asked users to name groups and sort the cards into them, and add any additional cards they thought was missing.I also asked them to explain why they chose a certain card/group. This was helpful to understand how they would intend to book a lesson with VOV (booking flow), and which features they prioritised. I put each exercise with users into one aggregated map which also included the business’ needs.

Card Sorting Insights

A lot of users prefer a VOV experience on mobile.

7 out of the 9 users (ages 17 - 49) added ‘App’ to the card sorting exercise. They explained that they usually interact with VOV via mobile (i.e. Instagram, TikTok, WhatsApp), so it would “make sense” to continue to interact with the company via mobile.

The development of the native Vibes on Vibes app was already underway. So, I hypothesised that adding a lesson booking feature on the mobile app as a key feature (since lessons are a key offering) would also lead to more bookings upon launch.

Rationale for Implementing Both Web and App Solutions

Our product team and stakeholders came to the following decisions based on recent analytics:

Design Hypotheses

Brainstorming hypotheses within cross-functional teams.

I hosted a brainstorming session with VOV’s designers, researchers, engineers and the business owners to ideate early design hypotheses for our how-might-we statements. This was useful to gain unique perspectives from different team members, and a diversity of ideas for product direction.We decided to investigate a few hypotheses further based on feasibility, technical constraints (i.e. ease of building), and the anticipated cumulative impact of implementing a few of these ideas at once.

Solution Ideating

User Flow

User flows allowed me to see the complete website and app experience at a holistic level. Here, I explored how the website flow could be filtered by lesson needs i.e. group/solo bookings and lessons for adults/kids. I also periodically applied changes based on notes from stakeholders.

Solution Ideating

Crazy 8's

We entered the next (fun) stage of ideating different screens for both web and app. Below are some iterations I made for the skate lesson landing page for the native app.I explored how we might organise and categorise the page by user need, i.e. Adult/Kids lessons and Solo/Group lessons. Completing this exercise within a team of 5 designers allowed us to generate over 40 concepts to examine in more detail with stakeholders (green and red) and engineers (orange).

Testing & Learnings

Qualitative A/B tests to narrow down design ideas to take forward.

We started to narrow down on ideas to take forward since each solution would require more investments of time to build. To do this, I ran some qualitative tests to gather users’ opinion on some of the ideas we thought of implementing from our Thoughtful Execution Tree.For example, I learned that users like overlays to select booking details, as it allows them to easily exit and switch between viewing the slot availability of different lessons.

Desktop UI

Key screens.

The intention of the interface was to keep the website simple, easy to use and welcoming for all skaters. This was accomplished with a clean layout, clear CTAs with VOV's primary 'Roller Blue' colour, and vibrant card images showcasing diverse skaters in various environments, encouraging everyone to feel included and inspired.I also collaborated closely with our engineers, working hands-on with HTML and CSS. I gained a deeper understanding of the technical aspects of my designs and made tweaks where necessary to ensure that the final development was both visually appealing and functional.

Desktop UI - Testing & Learnings

Trying and testing out multiple solutions with multivariate testing.

I created multiple design solutions for each hypothesis to test if different variations of the same hypothesis produced a different impact than others. Multivariate testing with 6 users allowed me to quickly gain some qualitative feedback to discover which variation was most effective to take forward.

Desktop UI

Grids to maintain visual harmony.

Consistent use of the grid framework allowed me to quickly and easily align content and components, whilst maintaining a clear and structured flow of information on the page.

In this example, (for 1200px+ screen sizes), I used a 12-column grid with a 112px margin and 32px gutter.

Mobile UI

Considering thumb zones when designing for mobile.

When designing the lesson booking UI for the mobile app, I asked a few questions: “Where should I place specific CTAs for lessons?” “How can I encourage users to scroll down to explore more items?” Studying thumb zones helped me determine where to position primary actions and navigational triggers.

For example, I designed the default “Skate Lessons” page to be on “All” which includes information about instructors (parent need) and what to bring to skate lessons when you scroll. As I designed according to the flow of the thumb zone, all targeted primary actions are in comfortable reach for a human-friendly experience.

By my design, there’s slightly more ergonomic friction to reach the filter tabs at the top of the page (upper stretch zone) than to scroll down and view more information, encouraging users to explore the entire page before continuing the flow of booking a lesson.

Mobile UI

Designing for different platforms - iOS and Android.

When designing the app experience, it was important to design according iOS and Android guidelines when developing experiences for Apple or Android products. Due to the project scope, time, resource and budget constraints, our team only focussed on mobile devices.

I worked closely with engineers, and with their insights I carefully studied Google’s Material Design 3 updated guidelines for Android, and Apple’s Human Interface Guidance to design VOV’s app experience and the lesson booking flow (some examples below).

Following Jakob’s Law, I aimed to design each platform to meet users’ intuitive expectations for Android and iOS. This included platform-specific choices like filled and outlined buttons, sharper text field corner radiuses on Android, and familiar payment options across both systems (while keeping the UI similar on each platform for brand consistency).

Desktop UI

Progress bar UI.

I hypothesised, designed, tested and validated a progress bar UI element through qualitative user feedback.

There is an “Almost there” supporting text under “Step 3 of 4” that floats up and disappears after 2000ms to further encourage users to complete the task.

This design was also informed by:

My own psychological research I conducted in 2022 on the effects of progress bar UI on emotion (takeaway: people are happier when they are shown how long it takes to complete a task, accompanied with encouraging language).
The Goal-Gradient Effect (showing artificial progress towards a goal will help users be more motivated to complete the task).

Next Steps

So... what’s next?

Summary key design changes based on design research insights:

Book lessons to learn how to rollerskate today.

Skate Lesson Booking Feature