Watalook Workspace: Checkout Redesign
Overview
Watalook Workspace serves as a comprehensive SaaS system catering to all administrative functions within the beauty business domain. From efficient scheduling to seamless cash-out processes.
Reflecting on my year-long journey with Watalook, one of the most standout projects was the complete re-design of the checkout flow.
The original version of the checkout flow faced performance hurdles. Simultaneously, our company aimed to extend its reach, targeting clientele in Scandinavia, and transitioning to a new online payment service provider. This juncture provided a prime opportunity to reimagine and revamp the checkout experience from the ground up.
Challenge
Transforming the single-dimensional checkout experience into a Point of Sale (POS) system that caters to both user and business needs across all target regions.
Solution
A simple and intuitive way to use the Watalook Terminal (POS) as a payment method
Quick Sale: a method for beauticians to efficiently check out clients, especially for walk-in cases
A review screen that provides users with enhanced flexibility, editing, and adding options
A complete UI remake to evoke a sense of novelty and freshness
Role
Product Designer
Timeline
2 month
Team
Watalook Product Team
Tools
Figma
Identifying key features
Market research
The checkout flow before the redesign was fully functional and operational. However, it faced performance issues concerning response times and bugs that needed rectification. Furthermore, it lacked the implementation of new features necessary to support the Watalook Card Terminal and seamless integration with the app.
Collaborating closely with the product owner, we dedicated a substantial amount of time to conducting market research. Our objective was to pinpoint the essential features required for a cash register-style checkout system. This involved an analysis of various direct global competitors, such as Fresha, Booksy, and Appointments, along with a study of regional competitors like Timma, Pamp, and Book Salon. Additionally, we examined POS applications like Square POS and Shopify POS to ensure a holistic understanding of the landscape. These are our key findings condensed to features we began considering:
Option to add services and clients at checkout
Quick Sale (used primarily for walk-ins)
Split Amount (not developed due to user research findings)
Gratuity feature (not developed due to user research findings)
User research
Despite the tight schedule, I was determined to ensure that we listened to our users. Connecting with individuals to gather feedback in Lithuania, where Watalook has a significant user base, was a straightforward process. The challenge arose when attempting to locate beauticians in Scandinavia. Fortunately, platforms like Reddit and Facebook proved to be invaluable resources, allowing me to obtain insights from Watalook's target market in that region.
The interviews proved to be helpful in validating and debunking my hypotheses regarding feature considerations. Moreover, they shed light on aspects I hadn't previously considered:
The gratuity feature was found to be unnecessary in Scandinavia, where in certain instances, it's even deemed impolite to tip beauticians
Split amount feature appeared to seem as more a of nice-to-have as clients want to use more than one payment method for a single transaction very rarely
I found out that beauticians who have their clients pre-pay for bookings, shared instances where reliable clients didn't show up for one reason or another. In turn beauticians wanted to have an option to refund a client
Design
Flow design
I began crafting a series of flows in order to visualise how the checkout process would unfold. After finalising flows that met my satisfaction, I proceeded to verify them with the rest of the team.
I started off with the checkout happy path and with a little back-and-forth action with the team, I arrived at this version.
I then continued to delve deeper to uncover edge cases and define the rest of the checkout flows.
Here’s an example of the flow a user would go through in the case of a prepaid booking:
Once I had all my flows confirmed, I jumped to Figma to proceed with the visual design phase.
Visual design
In addition to establishing color palettes, typography, grid layouts, and spacing styles, we were without a design system that included a component library. With these designs I was trying to identify the new look and feel that Watalook would adopt. Therefore, I experimented with UI to achieve this goal.
‘Watalook Terminal payment method’ design:
‘Add service’ design:
Three cases of ‘prepaid booking’ flow:
The prepaid booking is prepared for checkout
The price of the prepaid booking has been raised (underpaid booking)
The price of the prepaid booking has been reduced (overpaid booking)
Before and After
Takeaways
Continue to work on leading by example. A big part of this re-design project was conducting both market and user research. Researching, communicating on how I did it, and sharing my findings are distinct matters that all need to be addressed.
Iteration is essential. Without continuous feedback from the CXO, product owner and chats with developers the process wouldn’t have worked as well as it did. All of the internal and user feedback I received helped me make better design decisions.
What I would do differently next time. I’d like my design decisions to be data-informed as much as possible in the future.
Watalook Workspace: Design System
Long story short
Another project I thoroughly enjoyed working on was the creation of the component library for the Watalook Workspace design system. I have experience working on design systems in my previous jobs, and I applied a lot of that knowledge to develop this design system, especially concerning component design and documentation. The concept of design tokens, however, was new to me. Initially, I utilized the Tokens Studio plugin to generate all the necessary tokens. I began by establishing three levels of tokens: Foundation, Alias, and Component Tokens. While having all three levels of tokens enhances design security by providing a precise, error-free framework for design-developer collaboration, it introduced more complexity than necessary within our company.
Consequently, after a significant Figma update, I completely phased out the Tokens Studio plugin and fully transitioned to using native Figma Variables. We collectively decided that having only two levels of tokens – Foundation and Alias – would suffice. As a small startup with four developers, Watalook didn't require the token system to be overly intricate.
An example of the input component:
An example of the documentation & tokens:
Takeaways
Continue to stay up to date with the latest updates and technologies to improve my workflows. It’s easy to get stuck in the comfort zone of familiar practices
Complexity for the sake of overall benefit can pay dividends. Complexity for the sake of following best practices doesn’t necessarily yield the same results.