Emily Martins: Custom Booking Site

Boosting Conversion Through Customization

Summary

As the lead designer in this project, I played a pivotal role in shaping strategy and designing our new customizable Custom Booking Site - an effort to increase sign ups and conversions. The project encompassed two main initiatives: first, taking on more technical role supporting implementation of the client side and building out a new mini design system; second, designing a 0-1 feature that allows businesses to customize their site and build their brand. This feature is set to be released soon, with its impact to be assessed post-launch. Our users have already shown excitement for its release.

Business Objective

Reach feature parity with competitors regarding custom booking sites to increase sign ups, conversion, and client bookings. Secondarily, allow the marketing team to better sell our product.

THE PROBLEM

Booking Site Not Branded or "Professional"

This initiative was largely recommended by our marketing team due to the lack of feature parity with competitors. Many of our business users are fresh out of school and wanting to develop a brand. However, in reviewing our user cancellation reasons and customer experience ("CX") team conversations, many users had mentioned wanting more out of their booking site.

For example:

"The look is pretty basic. I want something to grasp attention and look more professional"
"I wanted to be able to design my website the way I want - more customization options needed"
"I switched to Wix and they have scheduling"

Defining Scope and Gathering Requirements

High Level Direction

Prior to my return from maternity leave, my team had discussed three high level directions for adding customization:

1. A separate custom site in addition to the marketplace listing

2. a total revamp of the existing client side

3. try to customize the existing design.

I encouraged option 2. Option 1 is not feasible for such a small company to maintain and has the potential to confuse users. Based on existing feedback, Option 3 would not satisfy user needs - leading to greater rework later on.

Level of Customization and User Guidance

Once we had decided to redesign the existing client side, we had to determine how much customization we would allow and how much guidance we would provide users. I stressed that, although our competitors offer multiple layouts to choose from, we should only offer one as it would allow us to dedicate more time and resources to maintaining quality of that layout.

We had three different personas to balance:

Businesses with established brands
New businesses excited to build a brand
Unbranded businesses uninterested in design.

Most of our users are also not designers. Therefore, my design goal would be to offer just enough customization to create a unique brand without offering so many options that it becomes overwhelming (the paradox of choice!) and hard to make good/accessible design decisions. I selected the following as options: adding a hero image, background theme, accent color, header font, and shape (corner radius of buttons and cards) We discussed the idea of a quiz to facilitate choosing options, but it was out of scope for V1 - we would start with offering templates to choose from.

A Dual Initiative

The nature of this initiative meant that it included 2 entirely separate large design projects:

A complete revamp of the client side
A 0-1 customization interface on the business side

1. Limit space taken away from the primary UI element, the calendar, without compromising clipboard usability or creating excessive development work.

2. Focus on the user flow rather than just the mechanism of the appointment clipboard. Find other quick wins where possible.

THE CLIENT SIDE

Getting Technical: Implementation and a New Design System

Iteration and Collaboration: Mobile Appointment Clipboard

Due to the size of the client side booking site, I focused my efforts on designing a new Home page and tidying up the Offerings page. I had to make sure that it felt "more like a professional website" without creating too much disruption for those who won't use the customization feature. For example, the logo needed to say in the same location.

Our developers chose to use Ionic components to build out the new customizable client side, so the rest of flows would mostly be converted to Ionic components and not need quite as much design effort (Product management decided major UX improvements were out of scope).

A large part of my work here was learning how to take on a much more technical role. I spent a lot of time reading Ionic documentation, figuring out which Ionic color variables needed to be defined/where they should be used, and directly supporting implementation. I also built out a Figma component library and style guide utilizing Figma variables from scratch (a slightly modified and reduced version of it can be viewed here).

THE BUSINESS SIDE

Leveraging Existing Insights and Balancing Business Needs

While we did not perform intensive research for this project, we had existing insights from past interviews, CX conversations, and, again, business cancellation reasons. Additionally, our Director of Sales and Business Development, a former business user and salon owner herself, helped provide additional insights for the business side of this initiative. The following are just some of the key considerations I had in mind.

A large majority of our users are mobile first or mobile only.
Businesses that want full control will just use Wix or Squarespace. We don't need to deliver a fully customizable website builder.
Businesses had previously complained about the lack of a "preview" option when updating the content on their site.
Most users will not want to spend hours creating a design, but a certain segment of our users will enjoy the process of choosing different options. Canva is a popular tool among that segment of users.
Speed of implementation was a significant decision making factor. Business leaders were anxious to get this feature out. I explored very simple concepts as well as more complex, but more user friendly solutions.

Initial Concepts

Bottom Sheet with Large Preview

Ultimately, a tabbed bottom sheet with an exact preview stood out as the best option. It certainly was not the fastest option, but I was able to create enough excitement about the concept that it was worth pursuing.

The bottom sheet allows users to see their changes in action. They can move the sheet up to see more options or they can move the sheet down to see more of the preview.
I chose tabs (vs a menu, hub and spoke, or long scroll navigation), despite the potential issues with horizontal scroll, as it provides the fastest access and visibility of all the customization options.
I tried to simplify development of the components by designing many of the customization options out of the same Figma components
I worked with our Marketing Designer to choose the specific color options and template designs. I edited them where necessary.

Prioritizing User Flow - Custom Templates

I wanted to balance the need of some users to just choose a template and be done with it while encouraging other users to dig deeper into the options and build a greater sense of ownership over their site. This led me to add a "Create a Custom Template" option (seen below). I had to make a lot of decisions regarding the complex behavior of this tile. For example: What happens when you choose Custom Template, then choose a predefined template, then choose a different font, then go back to Custom Template? Ultimately, we decided any time you make changes in the other tabs, you are editing the custom template.

Final Business Side Designs