Select Page

UX/UI Case Study – 2021

Grab – Redesign Concept

Project Overview

Thousands of riders use the Grab app on the daily basis to get to their destination quickly and easily by hailing a ride.

However, there are cases where the GPS failed to accurately pinpoint the pick-up location, and the outcomes were usually frustrating for both the rider and driver.

This case study attempts to resolve it.

My Process

USER RESEARCH
USER STORIES AND USER FLOW
UWIREFRAME & PROTOTYPE
VISUAL & UI DESIGN

Design Tools

Figma

Whimsical

User Interviews

Pencil & Paper

RESEARCH

Synthesizing the Key 🔑 Pain Points from the Surveys

My plan was to find out ways to improve the user experience on the Grab app, and I surveyed about 40 frequent users.

Many wished that the GPS could be more accurate in pinpointing their pick-up location. They expected the app to do so, but it weren’t so in some cases.

Some riders would add a directional note for the driver, but they usually got to read the note ONLY after reaching the wrong pick-up location; some could neither guide the driver to where they were, nor locate where the driver has stopped.

Time was wasted on driving to the right location, or looking for each other. Sometimes it ended up in a cancellation, with either party incurring the cancellation fee.

“Sometime the driver also get frustrated and asked me to cancel… but I refused because I have to pay for the cancellation fees.”

My Challenge: How Might we…

… allow the rider to better inform the driver of their pick-up location to supplement the GPS?

… allow the rider to do it with minimal effort?

… inform the driver of the actual pick-up location before they even get to there?

EXECUTION

Customer Journey Mapping

My proposed design solution: allowing the riders to attach a photo of the pick-up location along with the note, potentially reducing the miscommunication.

There were 2 points in the typical journey of booking a ride where I could fit in my design solution:

  1. when the rider confirms the pick-up location; or
  2. after a driver has matched.

My decision to insert the solution at point 2 came from understanding the “job to be done” in the ride booking journey:

While trying to book a ride, my primary “job” is to get a driver in the shortest time possible, adding a note and photo at this point would slow me down. And once a driver has been matched, I can afford more time to complete the note & photo adding task.

RESEARCH

Wireframes

While ideating for the wireframes, i checked out other apps like Twitter, Instagram to better understand the flow of attaching a photo: do they use an icon? Do they use a word link? What are the steps after snapping a shot?

I came across some input forms where ready-made templates of commonly used terms are available for the user to click and auto-populate the input field.

From this came the idea to display typical terms like “I’m in front of”, “I’m at the corner of”, “I’m wearing”, etc…, that a rider might use in the note to the driver.

We made a couple iterations on how I should display the section to choose the images after getting feedback from both testers and my mentor.

EXECUTION

UI Design

Lastly I applied the visuals to be as close to Grab app as possible, while infusing a little of my own personality into it.

The fact that the UI components of Grab app are very well thought out and executed made it super challenging for me to find ways to improve it

Retrospectively, the process of replicating the screens strengthened my understanding of visual hierarchy, typography and use of space.

STRETCH GOAL

How Might We Allow Riders to Split the Fare

I’d like to introduce a feature which I thought was good-to-have and would provide a better experience for riders who wished to split their ride with a friend.

Started off with just a 50/50 split between the 2 users, and my mentor thought that it would be cool if we could provide the option for them to select the percentage of the split via a slider.

I made it a playful element by changing the font size of the percentage value larger or smaller as the rider slides left or right.

Conclusion

This case study was really motivating for me to increase my awareness for small challenges that users may face day to day, even for a successful app like Grab, involving doing surveys and lots of research.

I really enjoyed the ideation process where I got to validate my proposed solutions with users, and refine on it after each round of feedback.

By understanding what was beyond our control, such as the GPS location, we got the chance to be more creative to work around those constraints.

My mentor, Daniel See, helped me to look at things at a broader and higher level by constantly starting off with “how-might-we” statements, and pushed me to work harder on my wireframes, UI designs and even the case study design.