Checkout Flow
The main client for YouLi's new "Checkout Flow" is WHOA Travel. They are an enterprise client using YouLi as their backend to manage dozens of trips simultaneously. Previously, they used their website, developed on Square, to manage payments and transfer traveler's details into YouLi. Their main concern is that they require their travelers to pay a deposit upfront at the time of registration.
I designed a solution on YouLi to help them migrate their payment process into YouLi's platform and provide a smooth user experience for travelers on their website to register and book a trip straight away.
Challenge #1
Trips are expensive, the travel agency doesn’t want to waste time on customers who can’t afford the deposit. Our goal is to allow customers to choose their travel package and pay their first deposit while registering.
Travelers planning for trips usually require a lot of information to check out, including their trip package details, group members involved (if not traveling solo), payment options, payment methods, extra insurance on refunds, and more. Removing any friction in their decision-making process by laying out this information in an easy-to-digest manner is crucial to saving the traveler's time and allowing them to focus on checking out.
This was achieved by rearranging all payments-related sections to the right-hand side, closer to the "Continue to Payment" button. At the same time, it also created space for the package and traveler details to take up the left-hand side, creating a divide between these two sections of the decision-making process. First, choose your package. Next, decide how you would like to pay.
Challenge #2
Customers were having a disoriented booking process on their Square website and receiving information about their payment on YouLi. Our goal is to create a synchronous customer experience to checkout and view their information on a single page.
The entire Checkout Flow feature is aimed at decreasing the time to check out for travelers on WHOA's website. From the initial button that navigates the traveler into the white-label branded "Checkout Flow" page, to the smooth transition into WHOA's Trip Page on YouLi, the traveler is able to find the information they need at the tip of their fingertips.
Challenge #3
Checkout process needs to be consistent to their branded landing page, developed on Square. All designs should be built dynamically for custom branding.
As YouLi's design solutions span across custom-branded web pages for all white-label domain clients, the designs for Checkout Flow needed to follow a dynamic behaviour to allow it to be reusable and scalable. The areas of white-label domain branding on the Checkout Flow page is shown below, with clients often having their own brand color, logo and even font typeface.
Client logo: Use client's white-label domain logo. Link back to client website.
Section titles: Use brand color for each section title.
Checkbox and links: Use brand color as checkbox outline and "See details" link.
Payment button: Use brand color with white text.
Results
Time to checkout was reduced from days to minutes.
Implementation allowed a new approach to allow travelers to checkout on YouLi
Received positive reviews from client, who is launching their trip in 2023.