Snazzyclean
Reimagining the booking experience to increase conversions.
UX Design
Web Design & Development
Art Direction
Nerwaya Zongo-Naba, PM
Jo Jumalon, Backend Engineer
March 2024 - June 2024
01 - overview
Transforming a tedious booking form into an engaging experience.
Snazzyclean is a professional cleaning company that offers services to customers in office and residential spaces. In 2024, I collaborated with the company's co-founders to shape their brand and website.
By March, we had finalized their branding, and I was now tasked with reimagining their online booking experience from the ground up to address retention issues and enhance its ease of use.
Outcomes
02 - THE CHALLENGE
How can we make booking a cleaning with Snazzyclean easier than anywhere else?
Snazzyclean's current booking process was a long, single-page form that was difficult to navigate and not user-friendly.
This led to a poor booking experience, causing many customers to abandon the process midway, resulting in lost sales.
Despite having the intent to book, customers were discouraged by the cumbersome form.
User interviews told us even more...
After conducting interviews with 10 of Snazzyclean's customers, the clear sentiment among users was that the site's booking page lacked:
A single page with a long form made the process feel convoluted and lengthy, overwhelming users.
Users couldn't see how a selection would affect their quoted price until the very end of the form.
Many users felt the form was unclear about why certain data was necessary to generate a quote, making it feel unnecessary.
03 - THE SOLUTION
A streamlined multi-step form that guides users through their booking journey.
Bite-sized, focused steps that keep things simple
Instead of asking the user every question at once, we break the form into clear, logical steps that guide users through the process.
Nothing but essential questions
No more fluff or redundant steps. The form should only ask questions required to generate an accurate pricing quote for the particular user and nothing else.
Visible indicators of price and progress
Every step of the way, the user should see where they are in the process and be instantly able to see how a selection will affect the price they're quoted.
User Flows & Lo-Fi Designs
I began by mapping a users typical journey through the booking process, trying to group similar questions as I went.
Because Snazzyclean offered services to many different types of customer (renters, homeowners, office managers, etc.), I tried to create branching logic-based steps that only asked questions to specific users if it was necessary.
Design & Wireframes
After some initial sketches, I created mid-fi wireframes to build out interactions and flows to test with users. The following shows the desktop version of the form.
Usability Testing & Iterations
I conducted a usability test with the project team, then with 4 real customers. I was looking to test clarity, completion, and comprehension of the different steps I made.
On mobile, some testers were getting stuck after making a selection, not realizing they needed to scroll and hit the 'next' button to proceed.
To address this, I added an auto-scroll behavior to take users to the 'next' button after making their selection.
While square footage was necessary to generate an accurate quote, testers felt manually entering an exact number felt clunky and overly precise.
To address this, I created selectable buttons that group square footage by range. These ranges change depending on the type of space the user selected earlier.
It wasn't clear what would happen after submitting the form on the 'Cleaning Summary' page. Some testers thought they would have to pay despite the form only being for a quote.
To address this, I updated the button's wording and added more information about what would happen after submitting the form.
Challenges in Webflow
Successfully building the site involved overcoming several technical hurdles, as some of the functionality we needed wasn't natively supported in Webflow.
Custom code, 3rd party integrations, and extensive device testing played a crucial role in building the final experience.
Dynamic form logic
Webflow's native form capabilities are limited when it comes to dynamic logic. To address this, we utilized a 3rd party integration to create conditional steps based on user inputs. This required close collaboration with our backend developer to ensure seamless data handling and integration.
Real-time price calculation
Webflow doesn't natively support real-time calculations. We had to implement JavaScript to update the price dynamically as users made selections. This not only improved transparency but also enhanced user satisfaction by providing immediate feedback.
08 - final designs
Launching the Snazzyclean site
Effortlessly book your next cleaning
No more scrolling through lists of questions. Simple steps and real time price previews help users get their space cleaned faster.
Explore extras to learn even more
A downloadable checklist allows users to explore more info about each cleaning option.
Enjoy easy booking on the go
Every user can book a clean regardless of device with an equally enjoyable mobile experience.
Things I learned
Aligning business requirements with the best customer experience can be challenging. By considering constraints from multiple perspectives, we discovered innovative solutions to address these challenges effectively.
Documenting design specifications and auditing the final product for consistency is crucial. This practice ensures long-term coherence and saves time and effort in future iterations.
Implementing complex form interactions in Webflow highlighted its limitations. Custom code was necessary to achieve our goals, emphasizing the importance of understanding the capabilities and constraints of the tools at your disposal.
Certain solutions I implemented to enhance user experience on one device actually hindered the experience on another. I had to be creative with how to deliver high experience quality while also following the best practices for that modality.
