Book Free trial Page Redesign

Mukesh Kumar
4 min readJun 8, 2022

--

Overview

Crejo.fun is an online platform that provides live extra curricular courses for children aged between 4 –14 years. Apart from the regular courses crejo also gives option to book a free trial session of any course first so that the user get to experience the learning journey more efficiently before making a purchase.

What was the problem?

On website homepage we had a floating book free trial main CTA for mobile web and same CTA on website header on desktop screens. Although we were able to get a lot of users on our book free trial through that CTA and other sources but more than 50%. users were dropping off from that page.

User Events Data
Book Free Trial CTA on Website

My Role

Lead Designer, UX and Visual Design

Platform

Mobile & Desktop

What are the steps to book a free trial

  • User lands on book free trial page
  • Selects a category (yoga, arts etc)
  • Selects age
  • Clicks on proceed CTA
  • Lands on booking page
  • login
  • Add child
  • Choose slot for session
  • Confirm

What’s wrong with the current experience?

In the current flow user are landing on two different pages and they face problem on multiples steps through the journey, thats the reason we could see drop on every single step in the booking flow.

Book free trial page

Insights based on Hotjar user data

  1. Without selecting category users were trying to select age
  2. No error msg appeared in that case
  3. Logged in User were selecting wrong age from dropdown (coz there was no match for their child age)
  4. User were clicking on animated icons below that was not actionable
Recording Data from Hotjar

Design goals

  • Provide users better error communication throughout the journey
  • Make category selection more clear
  • Swap category and age selection
  • Replace animated with Static icons
  • Provide more details in accordion

Booking Page logged out

  1. Without selecting login to continue, users were clicking on choose slots
  2. On confirm CTA they see a signup popup (many of them were dropping off from here)

Design goals

  • More prominent error communication
  • Ask signup in later steps after adding child flow

Booking Page logged in

  1. Users were not able to see error msg (no eligible child)
  2. Proceeded after selecting slot and as they click on confirm they couldn’t see any feedback related to child’s eligibility error. Many users were rage clicking on main confirm CTA unaware of the error

Design goals

  • More prominent error communication

Prioritising design goals

We observed that we could divide this project in phases

Phase 1: Solve current user problems with minimal UI & flow changes

Phase 2: Design a better flow to achieve mentioned design goals in each page

We didn’t want to make our design goals heavy on effort side because that won’t give us the necessary learnings and it would take a lot of time from both design and tech front.

So we started working on phase one “Solve current user problems with minimal UI & flow changes”

New Design Solution for Book Free Trial Page

Old vs new page design
Before selecting age
After selecting age

New Design Solution for Better Error Communication

Category Booking Page

Conclusion

This project was not some major UI design or we didn’t change the entire flow, rather we tried to dive deep into the actual problems first and tried to solve them one by one with minimal effort and high gains.

After this project we could see that our users were now easily able to book free trial for their children. There’s a significant improvement in our book free trial users drop on each step of the entire journey. With phase to we’ll plan to make the entire journey more flawless with much improved flow.

--

--