Uber VS. Grab: UX/UI Design

The battle between Uber and Grab is more and more fierce, with the announcement of new partnership and adjustment of riding fares. This projects is comprised of a Competitor Analysis between Uber and Grab, followed by a Proposed New Design of a ride-hailing app similar to Grab for a better user experience.

The high-fidelity prototype of my final design is built with inVision.


1. Product Positioning

Uber is Based in the US, providing global services in 410 cities worldwide. Aimed to provide comfortable and safe transportation services.

Grab is based in Singapore, services covered in 30 cities in Southeast Asia. Positioned as smart platform for transportation in Southeast Asia while improving lives, safety and accessibility.

2. Challenges

Both Uber and Grab are faced with common challenges:
- Local regulations: private car drivers operating under Uber and Grab are required to have a vocational licence.
- Safety: How to ensure both commuter and drivers’ safety, especially for females.

3. Mobile App: User Flow

Separated profiles and payment
in Uber app
In Uber, user needs to choose profile (among Personal, Family and Business where available) that links to the preset payment method respectively. In Grab, user needs to choose Tags between Business and Personal, and needs to change payment method manually. Grab users might take additional steps to configure the profile.

Advance booking in Grab
Uber only allows instant booking while Grab provides advanced booking.

Additional waiting time in Grab
There are no major differences in the ideal user flow between the two apps. Since Grab is based on driver’s decision to grab the booking, users may experience additional waiting time for driver to accept the booking, and an extra step for flash booking either taxi or private car occurs when no driver accept the booking. Uber is based on distributing the booking by backend system, thus users are guaranteed to get a car as long as there are cars nearby as shown in the system.

4. APP Features and Structures

Below are summaries of main features provided in Uber app and Grab app. Uber app enables lots of personalised settings, while Grab provides more variety of car types.

5. Visual Design and Interaction Design

Overall, Uber app’s interaction is simpler compared to Grab. Uber’s colour scheme is of black and blue, targeting at business users at the very start. By contrast, Grab started with taxi ride-hailing services, and its colour scheme is based on green, which represents a safe and easy access to transportation for all users.

Proposed New Design

1. Site Inventory

2. UI Design: Main Page

  • Minimised input boxes to help user to focus on the pick-up location and drop-off location.
  • High fare is alerted in an pink rocket when demand is high.
  • Current location is set to the default pick-up location, and user can drop pin or type in the input box to define the pick-up location.
  • Swipe to change transportation type.
  • Cars available for booking are shown on the map.

3. UI Design: Booking

Additional functions available in the booking confirmation stage for more flexibility:

  • After determining the drop-off location (and set-off time and pick-up location if applicable), user can add trip details if any, as per suggestion with the hints.
  • Fast booking between Taxi and CarEco for economy ride are available.
  • Click the “Learn More” link in hint to know more about fare estimation.

Responsive design to make a smooth experience while users are waiting for the booking:

  • Indeterminate progress indicator below the navigation bar, highlight the ongoing search.
  • Booking details can be reviewed and edited, except for pick-up and drop-off location.
  • Personal preferences are available. Choosing female driver only is enabled to enhance safety. Language preference for drivers is applicable to countries with multiple working languages in Southeast Asia, i.e. Singapore and Malaysia.
  • Apply promo code before being accepted by driver, and add tips as an incentive for driver to drop by uncommon locations.

4. UI Design: Waiting For The Driver

When driver is found:

  • Pop-up with alert ring tone (if alert tone not being muted) to notify user of the successful booking.
  • Booking details are summarised for booking confirmation.
  • Click the “Learn More” link in hint to know more about fare estimation.

When driver is on the way:

  • Estimation on time of arrival is shown in the map.
  • User can contact with driver via phone call or SMS.
  • Cancellation button is available, and a notice on potential cancellation fee is highlighted.
  • Encourage the user to invite friends while waiting for the driver to come.

5. UI Design: Trip Ends

Once arrived at the destination:

  • Trip ends successfully. A detailed receipt is sent to user’s email, including booking fee, basic fare, fee by distance and travel time. Any fee occured by ERP etc. should be presented clearly in the receipt.
  • Summary of payment and actual fare occurred is displayed.
  • Simple 5-star rating to encourage user to rate the ride.
  • Navigation to customer support is available for quick assistance.
  • AI robot is available for support for common questions, to improve user’s satisfaction.

Around the web

© 2016 All Rights Reserved.