Fixing the Heat: A UX Journey through Urban Company’s AC Service Booking Experience to Impact Conversion Metric

Md. Zaid Khan
UXM Community
Published in
11 min readApr 6, 2023

When the air conditioner breaks down on a hot summer day, it can be a frustrating and stressful experience. You need quick and reliable help to fix the problem, but finding the right service provider can be a challenge.

This was the problem that Urban Company, a leading home services app, set out to solve with its AC Repair and Service.

However, despite offering a range of services, Urban Company faced several challenges in providing a seamless user experience for AC repair and services.

Hi, I am Zaid. I am a UX Designer and in this case study I evaluated the AC Repair and Service Booking Flow of Urban company (formerly UrbanClap) and redesigned it to increase conversions. Under the mentorship of Anudeep Ayyagari, this project was successfully completed in just 23 days.

Index

[ 💡You can move directly to that section by clicking on the heading ]

Problem Statement

Existing Flow

Solution

The Process:

Primary Research

Secondary Research

Heuristic Evaluation, Intuition, and Peer Review

Competitor Research

Ideation

Replicating Existing UI and Wireframing

Building UI and Prototyping

Testing

Final Solution

Project File

Future Scope

Learnings from the Project

Problem Statement

To evaluate the Booking AC Repair and Service Flow Of Urban Company App which includes:

  1. Go to Appliance Repair and Service Section on the Home page.
  2. Go to AC Repair and Service
  3. Adding the AC Repair Service to Cart
  4. Select the Slot and Date
  5. Checkout

Business metric to impact: Conversion Metric

Existing Flow

Existing flow to book an AC Service-

User Flow to book an ac repair service
Flow to Book AC Service
Flow Prototype

Solution

  1. I added a cart on the home page of Urban Company to enable the users to complete their previous booking when they leave the app and come back again.
Comparison between the Original and Revamped Screen after adding Cart Feature
Cart Feature

The Cart feature helps the user to continue their booking from the homepage instead of going and searching for their service in a specific category.

2. Introduced Add to Cart and Book Now feature.

Comparison between the Original and Revamped Screen after adding Book Now and Add to Cart Feature

Book Now Feature

This feature enables the user to quickly book a service.

User Flow to book a service using Book Now Feature
Book Now Flow
Book Now Flow Prototype

If the user leaves the app at the Final Summary page the service is already added for the user to continue booking when the user returns to the app.

Service is added to the cart if the user leaves the app at the summary page

Book Now Feature for the services which have multiple options

Book Now Feature for the services which have multiple options
Book Now feature for multiple services Prototype

Add to Cart Feature

This feature enables the user to combine multiple services and book later also.

User Flow to book services using Add to Cart Feature
Add to Cart Flow
Add to Cart Flow Prototype

Add to Cart Feature for the services which have multiple options

Add to Cart Feature for the Services which have multiple options
Add to Cart flow for services that have multiple options GIF

The Process

Primary Research

I interviewed 4 users to understand their experience and pain points while booking AC Repair Services.

Target Users:
Age:
18–44 years
Location: The user should be a resident of the city which has urban company services.

I identified these problems after interviewing the users:

Insights from First User Interview
Insights from Second User Interview
Insights from Third User Interview
Insights from Fourth User Interview

Problems Identified from Primary Research:

The users don’t want the already added plus subscription plan and it might lead to more payment done by the user if they don’t observe it.

Breakdown of taxes and fee is not mentioned in the final checkout.

The purpose of menu button is not clear and the outcome of menu button is repetitive in the first fold.

The comparison between the two services on the view details is not tappable and it is also confusing for the user.

There is no option to sort and filter in the air conditioner page to view the lowest priced services and no option to cusomise the search results.

Unnecesary display of services to add which are already provided in a service.

Details page not consistent with the previous page and more details don’t show up in the bulleted form.

Ac Safety guidelines increasing the steps in the booking flow.

Secondary Research

For secondary Research, I referred to some articles and google play store reviews.

Google Play Store reviews

Problems identified from Secondary Research:

The cartoption is not available on the home page to enable the user to continue booking.

Services from different categories can’t be combined.

Customers cannot call the customer service team, only chat option is there.

During checkout, the logged-in number is saved as a payment number and there is no option to change the number.

Heuristic Evaluation, Intuition, and Peer Review

Problem Identification with Heuristics, Intuition and Peer Review

Problems identified from Heuristics, Intuition, and Peer Review:

A lot of scrolling on the air conditioner page and no shortcut to go to the top.

The purpose of the menu button is not clear and also the outcome of the menu button is repetitive.

No option to repeat the previous booking in the home page/ no display of last booked services.

No option to search through voice in search bar.

Last booked service is not mentioned in the appliance repair and service overlay.

Coupons don’t look life real world coupons.

Chat option not available prior booking.

No side menu on the home page.

Competitor Research

I chose Joboy and Nakoda Urban Services to do competitor analysis. I identified flows for the AC Service Booking in these apps.

Competitor Research

Insights from Joboy:

It has a simple 3-page booking flow.

Offer is mentioned on the AC Service clearly to increase the conversion of the users.

Chat option is available on the home page as a Floating action button and the users can chat with support even before booking any service.

Separate section for services and shopping in the bottom nav.

Clear separation of Cash on Delivery and Pay Online options on the booking page.

Insights from Nakoda Urban Services:

Side menu option is provided on the home page for quick navigation within the app.

Scroll up to the top option provided on the home page for quick navigation to the top.

Chips provided to customize the search results on the AC Repair Results.

While doing online payment only some amount of the total fee is charged before so it will encourage the user to pay online and thus increase the conversion rate.

I also analyzed the Yes Madam app while building wireframes to take inspiration.

Ideation

After identifying problems from the research I framed how-might-we statements to generate ideas to solve the problem.

How might we enable the users to continue their previous booking on the home page for the AC Service and Repair?

Add a cart option on the home page.

Display the last booked service on the home page.

In the appliance repair and service overlay last booked service should be highlighted.

In the cart, there will be an option to combine services from different categories. ( this is not required for my flow got this feedback from peer review).

How might we reduce the steps in the booking flow?

Remove the plus membership page instead provide an option to add plus membership on the final checkout page.

Remove the ac guidelines page.

Combine the slot and date booking page with the payment popup. ( not required because after the overlay is closed the user can recheck the details.)

Also, remove the already added plus subscription plan if we keep this page.
Give an option of book now and add to cart.

Replicating Existing UI and Wireframing

I started with replicating existing UI Screens to get comfortable with Align Design System (which is the open-source design system of Urban Company) during Research.

Replicating existing UI
Moodboard for wireframing
Wireframes

Building UI and Prototyping

Added a cart option on the home page so that the users can continue their previous booking.

Cart option on Home page

Added a Book Now feature in the app and reduced the flow for booking a service.
The Book Now feature is to quickly book one service.

Book Now Flow
Book Now Flow Prototype

If the user leaves the app at the final summary page, the service is added to the cart so that user can continue booking the service.

Service added to cart if user leaves the app

Existing Flow in the app to book a service-

Existing Flow in the app to book a service

Reduced the number of steps with the book now feature-

Added an Add to Cart feature so that the user can continue their booking after some time and can combine multiple services.

Add to Cart Prototype

Comparison between the AC Services Listing Page

Comparison between the before and after versions of the AC Services Listing Page

Iteration in the Cart and Summary Page

Inspiration and iteration of Cart and Summary Page
Iteration in the Services Card
Comparison of the cart and summary pages before and after the iteration.

Book Now Flow After Iteration

Book Now Flow After Iteration in the Card, image of the service is added in the final summary page
Book Now Flow Prototype After Iteration

Add to Cart Flow After Iteration

Add to Cart Flow after Iteration
Add to Cart Flow Prototype after Iteration

Added Plus Promotion Page and an Overlay to change the slot of the service in the cart

Plus Promotion Page and Overlay to change slot of services
Plus Promotion Page and overlay to change slot of the services protoype

Testing

To gather feedback on the prototype, I conducted usability testing with two users and sought peer review from my teammates.

Feedback

  • Cart Icon is big.
  • There is no option to have different addresses for different service bookings.
  • Work on the Services which have multiple options inside them.
  • The user wanted to see the details first before booking a service.
  • There is no description in the services added to the cart, ie. the user found it difficult to understand the use of those services when coming to the cart.

Final Solution

Changed the cart size to 24X24 dp.

Reduced the Cart Size

Final Book Now Flow

Book Now Flow
Book Now flow Prototype

Final Add to Cart Flow

Add to Cart Flow
Add to Cart Flow Prototype

Creating Add to Cart Flow for the Services which have multiple options

Add to Cart flow for the Services with multiple Options

Iteration

Final Add to Cart Flow for the Services with multiple Options
Add to Cart Flow for Services with Multiple Options Prototype

Book Now flow for the Services with Multiple Options

Book Now Flow for the Services with Multiple Options
Book Now Flow for the Services with multiple options prototype

View Details Page for the Services with Multiple Options

View Details Page Flow for the Services with Multiple Options
View Details Page for the Services with multiple options

Project File

Figma Project File
Prototype

Future Scope

  • Combine Add to Cart and Book Now Flow for the services which have multiple options.
  • Add the option to have a different address in different services in the cart.
  • Add a description of the services in the cart so that the user is able to recall what the service offers.

Learnings from the Project

  • I learned how to use an existing design system of a company and how to add and modify components.
  • I learned how to conduct interviews and take feedback from the users.
  • I learned how to evaluate flows in a product and identify problems in them.
  • I learned how design decisions impact business metrics.
  • I learned how to take decisions within time constraints.

After working hard for 23 days and facing many challenges along the way, I finally completed the project.

Thanks a lot for reading my case study. Please feel free to share your feedback :)

Let’s connect:
Linkedin , Twitter, and Instagram.

--

--