app icon

Grab

Passenger App Redesign Concept

holding device

Overview

Grab provides transportation booking service for taxis, private cars and motorbikes and food delivery service. The redesign concept tries to solve the issues about interaction and visual design of current version. The information architecture is reorganized and user flow is adjusted to make sure the app easy to use. The visual of the app is also redesigned to keep design language consistent and modern.

• • • • • •

After the redesign was done, I found it was not faultless. I redesigned it only from the perspective of UI design, but I forgot to keep user scenario in my mind when I designed it. For example, if a user just get off work and want to go home by book a ride, and meanwhile he also would like order something to eat at home. How can the app help him? So I should list some of scenerio at first and then review the design through those scenerio to check if the user flow make scense.

It's a practice for one week. That is also the reason why I did not think deeper enough.

Time

12-19 Jul 2017

My Role

Interaction Design
Visual Design
Prototyping

Review and Analysis

I tried to find the usability issues including aspects of information architecture and visual components and then proposed potential solutions.







Main Issues

  1. Overall: Too many stuff in a screen. And users have to think about which one they have to do first, select a service or enter a location name.
  2. The “flash” action button seems important but it is confused.
  3. Transport and food services are different but they are put together.

Address by

  1. Defining prioirty and guiding users step by step (Do not show all info at a time).
  2. Grouping the transport service with others. (“Flash” service is just another transport way)
  3. Reorganizing the different services. (Seperate transport and food services)

Minor Issues

  1. The Clear button is not so essential at this step.
  2. The font with too many styles confused users.
  3. The icon style is not consistent.
  4. Two location markers are too similar.
  5. The background color is too similar with the color of land on the map.
  6. The icons are not well-designed.

What can we do

  1. Show the clear button when the text field is focused only
  2. Make a clear rule for every status
  3. Redesign icons
  4. Use different shape of marker
  5. Change color
  6. Redesign icons

Minor Issues

  1. What is this for? Switch to list mode? but the screen is in the list mode.
  2. It doesn’t look like a tab bar as a filter. Is it used frequently by users?
  3. The icons can be more meaningful for users.

What can we do

  1. Show map icon in list mode; show list icon in map mode
  2. If tabs are not used frequently, remove it to leave more spaces for the list below.
  3. The icons can be replaced by cateogry icons, like restaurents, shops...

Minor Issues

  1. We usally see the color of the driver's car first to tell which car may be that one for us. And sometimes we can not tell the car types

What can we do

  1. It will be better if there is a photo or illustration of the car

Interaction Design

01

Layout and structure exploration


Trying to figure out how to optimize the structure to make users easily understand and also considering about the extensibility if there are more services in the future.

The third idea was selected to continue developing becasue the simplied layout encourages users to do one thing at one time. There is no other further elements to distract them. Select a main service first and we will guide users to the next steps.



Information is reorganized: 3 services and 4 types of riding.

Set the nearest spot as default pick-up spot.

Do people select a type of ride first? This visual flow seems not good.





Information is reorganized.

The layout based on flow of operation is better.

If the default pick up spot is not what a user want, he/she may need to think about he/she should correct it first or enter the destination first.





Information is reorganized and layout is simpfied.

Users just need to choose 3 services, ride, food or hotels at first.

Do one thing at a time. If users want riding service, other required info will show up after destination is filled.

Food and Hotels are hightlighted a little bit and able to attract people to use.





The wording is modified to be consistent.

Try to reveal more content for users, but it may distract people who want to use riding service.



02

Key Frames


Focused on transportation service main screen and its sub-screens and redesigned the main layouts and user flow

Home Screen



If the map is moved, show “Relocate to my current location” button. if not, hide it.

Users can long-press on the map to assign a drop-off location as a shortcut.

According time to show the different food (breakfast, launch, dinner…) in the bottom sheet.

Tap or swipe up to evoke Food screen.



Food



Buz idea: Stores can pay for advertisement and top ranking.



Enter Drop-Off



Put starred places on the top of list.

Other places are ranked according to frequency of selected drop-off places from this pick-up spot or this user’s data. (TBD)

Buz idea: Few positions for advertisement. Stores can pay for toppper position.



Enter Pick-Up (Optional)



Select all text automatically after the textfield is tapped.

The pick-up location list is ranked by distance.



Select Location from Map (Optional)



If the map is moved, show “Relocate to my current location” button. if not, hide it.

Some foregin tourists may be unable to type the text in that language, so selecting location from the map is another way to assign a pick-up / drop-down place.



Select Vichle and Enter Further Info



Show this screen after both pick-up and drop-off are filled or selected on the map and DONE is tapped.

If the map is moved, show “Relocate to two locations” button. if not, hide it.

Show the selected type of vehicles on the map only.



Section of Vehicle Types



If there are more ways, the section of vehicle types is scrollable.





Users may want to compare the fare and speed among those way



03

Low-Fidelity Prototype


The rapid prototype was created via Prott for communication. The flow mainly focused on vehicle reservation. Click to see online prototype

Visual Design

01

Main Screen


Users can enter their destination to book a ride or swipe up/ tap the bottom sheet of GrabEat to view the list of food they may be interested.

iOS screen

02

Grab Eat


List the resturants or cafe you may be interested or currently popular in your region according to different meal time. Resutrants are also classified into different categories that help users easily find what kind of food they want to eat

iOS screen
iOS screen

03

Grab Ride


We guide users to book a ride step by step. Users enter the destination first, and then the pick-up location, which user current location spot used as default but it can be modified. Users also can select a spot on the map if they can not type the place name.

After pick-up and drop-down locations are confirmed, the route, waiting time, ways of transportation and their fee are shown and users can book a ride according to their preference.

iOS screen
iOS screen
iOS screen

High-Fidelity Prototype

Using Principle as a prototyping tool to design the transitions and communicate the user flow.


Password:grabgrabgrab


Keep Thinking

Keep trying other possible solutions and design





01

Concept B


Pros:
1. Stay in the same page which users are familar with after two spots are assigned.
2. Able to know default pick-up spot.
3. More space for location list.
4. Hide the unnecessary text fields in default (expandable panel).
5. Easy for users to compare the fee without tapping.

Cons:
1. More steps to go back orginal status or go to GrabEat after two spots are assigned.

02

Concept C


Pros:
1. One tap to select my current location.
2. The expandable panel of riding types provides flexibiliy to add more ways and detailed info.
3. GrabEat has space for event promotion.

Cons:
1. Swipe guesture conflict: move map v.s. switch tab.
2. Unable to know what riding types can choose before taping the collasped panel.