E X P R E S S
C H E C K O U T
Contact
Case Study 2019

UrbanClap

Redesigning the Check-out

tl;dr: we collaborated with India’s biggest hyperlocal marketplace to make their check-out 50% faster 🚀

UrbanClap, newly re-branded as Urban Company, is a hyperlocal home-services marketplace in India. People from more than 17 cities across the world use it to book a wide range of services, from in-house massages to home maintenance, from a network of over 25,000 micro-entrepreneurs.

  • 10 million+ downloads on
    Google Play Store
  • 4th most popular app on
    Apple App Store

Safe to say, there’s quite a lot of people relying on Urban Company on a daily basis to fix their leaking toilets and broken ovens, blow dry their hair and paint their nails before special occasions, and have their butts kicked into shape by yoga and fitness instructors.

Interaction Design User Experience User Interface
Omnichannel - iOS, Android, Web
consumer app hyperlocal e-commerce conversion
Goal
Urban Company (UC) reached out to us with the specific brief of improving their check-out experience.

They hoped to increase conversion rates for both new and returning users by:

  • speeding up the check-out and
  • building greater trust in the brand during check-out.

Could we design a leaner flow and reassure users, step-by-step, that they could trust the product?

► 🎵 cue dramatic superhero theme


a. New users

The check-out flow for new users was straight-forward, with users required to provide necessary details for service booking and fulfilment.

Summary

This is the first step of the check-out flow which shows users their selected service.

Add address

They are then asked to enter the location where they would like to receive the service. The location is placed on a map, and users can verify its accuracy or re-enter the location.

Time and service-provider selection

Next, they select the date and time they would like the service and UC auto-assigns a service provider to them.

Onboarding

Users provide their mobile number and enter the OTP sent on that number.

Payment

UC provides options for both online and offline payment methods. They offer a ₹10,000 insurance on online payments and want to encourage users to make digital payments when booking services.


b. Repeat users

The returning user flow was where the UC team saw a lot of opportunities to optimise the “time to complete task”. This was the juicy and exciting stuff we couldn't wait to dig into. Apart from selecting location and payment, the major step here is booking a preferred service provider and selecting a time-slot.

Summary

This is the first step of the check-out flow which shows users their selected service. This is the same for both returning and new users.

Select location

Returning users select a previously used location or add a new one.

Preferred service provider

Customers who are re-booking a service can select a professional they have availed service from before.

In the service industry in which UC operates, a lot of business transactions are from repeat business. Customers have their preferred service providers - specially in sectors like salons and health - and providers love trusted repeat customers.

Time-slot

Users can select their preferred date and time-slot.

A major challenge was to match time-slots for both customers and service providers. In the existing flow, both the activities happened in two separate steps. The problem was that after the users selected a service provider, they would be informed on the next screen if the time-slot for their service provider was not available or had surge pricing. This was not an optimal experience.

Payment

Like mentioned before, UC wants to encourage users to make digital payments. To this end, they often run offers and campaigns for digital wallets and other online payment methods.

Most users have one or two preferred methods. With digital wallets, we observed that users shift their preference if they see financial benefits.

How did we utilise this information in the best context that aids the users’ decision-making?

Stay tuned! 👇🏾

Approach

The first thing we did was to deep dive into UC’s existing quantitative data conversion rates and the time it took for people to check out. We interviewed product team members to get a sense of the decisions that had shaped the existing flow.

The UC team had previously done qualitative interviews with users to learn about why people dropped off without completing transactions, which also proved to be useful for us to get a deeper understanding of the context.

We made sure to keep in mind people’s emotional states and the sense of urgency they would likely be feeling by the time they reached the check-out stage which is the final stage of a much longer user journey. While Kasturi was doing research, Tejas started on analyses of the existing information.

Armed with all this information, we jumped into wire-framing using pen and paper.


Number of interactions

Since we were working on a measurable goal, we started with simply counting the existing number of interactions necessary to re-book. In orange are the interactions - button taps, value selections - that the user had to carry out.

This number and the data we had formed the basis of next steps in design.

Orange steps indicate interaction required to re-book a service in the original flow.
Location

Five in six users had only one active locations on their profile.

Asking all users to select their address each time was redundant considering that data. It would be more efficient to make this decision for the users and let them change it if they needed to.

We pre-selected the user’s location during the re-booking flow, and omit the location-selection screen. If the user had only one address on their account, and they started their discovery with the same high-level geographical area, UC would pre-select their existing address for service.

Location is pre-selected for returning users which they can change, as well as add new address.
Service provider + time slot

Service provider and time slot was in our opinion the most unique challenge for UC. To be honest, location (and later payment) selection are problems solved by other e-commerce products. We could take inspiration from them and validate the solution against our data-set, but…

… figuring out a way to match a user’s requirements with multiple providers in the most efficient way was an exciting challenge.
Solution

We combined the preferred service provider screen with the date and time-slot screen, so customers could check the schedules of the last 5 service providers they had booked at a glance. In case one provider did not have open slots, or had high-demand pricing, it was very easy to check another service provider's schedule with a minimum of effort and no further interactions required.

Then, to make selection of the service provider even easier, we limited the number of visible preferred service providers to five - if customer had not repeated service from a particular provider in five recent occasions, or had rated them poorly, those providers would not show up here.

Combining service provider and time-slot selections into a single step
The selection of preferred service-provider combined with date and time-slot selection on the same screen.
Payment

With the information and goals set for the payment, the users see their payment option pre-selected if they are repeat users. For new users, there are sufficient nudges to direct them towards digital payment methods without being too pushy.

offers on summary screen
User can view offers on the very first step, the summary screens. This incentivised them to pay with digital options.
the authentication step was moved to the summary screen
The authentication step is also part of the summary screen, so repeat customers can be directed to a flow better suited for their use-case.
Recently used digital payment pre-selected
Returning customers see their most recently used digital payment instrument (cards, UPI, wallets) is pre-selected.
Iterations and progressive implementation

Between the first and the final set of flows and wireframes, we suggested multiple options which could be implemented in stages, serving as a gradual improvement to the existing flow. From the tech team's perspective, this allowed them to release new features step-by-step with the easiest to implement being rolled out first.

The first thing UC implemented was the newly designed and critical “service provider + time-slot” section of the flow. By some miracle, the big time-saving feature for the users (combining the professional + time slots on same page) - which was our top recommendation - was the easiest to implement.


The final flourish

Utilising UC’s design language, we put the wire-frames into hi-fidelity visuals. As you can see, the check-out has been sped up so that it can be completed entirely on one screen!

flows for rebooking experience
Re-book experience, down from four steps to only one! 🚀 🥳

Check-out flow for new users with visual design

While there was not much possibility of drastically reducing the number of user inputs required for new users, we took the opportunity to optimise some micro-interactions (drop-down alternatives and designing ratings) that would make it easier for them to provide the required information easily. Moving onboarding to an earlier step of the journey allowed us to unify the experience for new and returning users, while providing more scope for evaluation of drop-offs.

flows for new users
Optimising micro-interactions: replacing drop-downs with segmented controls, moving inputs to bottom-sheet for quick access, keeping suggested payment options open.

You gotta have faith, faith, faith…

Of course we did not forget about the trust factor!

Throughout the re-designed flow, we clearly display the options selected by the user to provide additional visual assurance.

The other major step we took is increasing transparency by showing updated prices prominently during the check-out. When any surge pricing or partial payments are applied, users are informed immediately. This way, they don’t get any unpleasant surprises at a late stage or feel like they are being tricked or scammed.

Information captured like address and services is reinforced in the product; any change to the cart amount is communicated immediately to the users.
The updated check-out flow reduces the number of interactions in half to four, compared to the previous eight.
In Conclusion:

With the updated flow, we have cut down the time to check-out by 50% by eliminating all redundant taps and interactions.

Even micro-interactions like focusing on an input field are taken care of, so the user only has to provide the data and move through the flow. The eight interactions that were required in the old flow have been reduced to four. While the previous flow needed users to go through three screens to re-book an experience, now the same process takes only one screen, increasing the perceived speed for the users.

Design
Kasturi Singh, Tejas Bhatt
Case Study
Manaal Oomerbhoy

The design of the banner in this case-study is inspired by Bethany Heck’s article and Jessica Svendsen’s work for The New York Times.


Looking Forward 🔭 …

Having used the app a lot since the updated flows became part of the product, here are a few further improvements we would suggest:

  • We could highlight the selected location and provide additional affordance on how to change it.
  • For users who have previously used a digital payment method, but used a cash payment for their most recent service - the pre-selected payment method should go back to the digital instrument. There could be a nudge to confirm this with the user, but the pre-selected method should not be cash.
  • UC team suggested that we pre-select the earliest available time-slot for users to initiate them in that goal. We had a different opinion because how surge-pricing and selection of professional also play into this. But we would love to test this hypotheses with users.
Pitch —

Are you solving interesting problems and improving human experiences and lives? Get in touch to get the ball rolling.