2019
UrbanClap
Redesigning the Check-out
tl;dr: we collaborated with India’s biggest hyperlocal marketplace to make their check-out 50% faster 🚀
UrbanClap (now 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.
— 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.
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.
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.
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.
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!
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.
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.
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.