ObJECtive
Design a template for clearly communicating contextual/actionable information to drivers. At the same time, it should be served as a reusable and scalable element in the Grab design system.
SOLUTION
Action card is a new element in the Grab driver app redesign project that provides relevant information and clear call-to-action to drivers.
Type:
Product Design / Design System
Duration:
6 weeks
Project Members:
Jeffrey Chou, Victoria Jung, Prashant Jain
My Role:
Visual design, interaction design
BACKGROUND
Driver App Redesign
The last major update of Grab driver app was 2016. Since then, so many new features and services have been added and turned the driver app into a gigantic application.
Drivers have been suffered from disorganized app structure and overwhelming communication. As a result, the driver app redesign project was kicked-off.
Project Roadmap
Milestone 01
Home Screen Restructure
The first milestone dealt with the disorganized app structure problem. By restructuring the home screen, we were able to build a new structure that fits the current applications and matches drivers’ mental model.
MILESTONE 02
Action CARDS
What are the current problems?
The current driver app is ineffective at surfacing relevant information that helps DAX find jobs, discover new features, or learn how to be better at driving.
What else should we consider?
While trying to solve driver communication problem, we are also considering the design system perspective. The action cards should be reusable and flexible.
DESIGN ITERATION
ACTION CARDS
Visual Anatomy &
Progressive disclosure
By providing the flexibility of collapse/expand view of the card, information can be presented consumed in bite-sizes while more information can be accessed by expanding the card. It reduces clutter and also improves the efficiency to glance through.
How-to-Use Guidelines
Since the design will be added into the design system and used by other designers. I also write a how-to-use guideline for others to reference.
Prototype
Milestone 3
Defining Interactions
Behaviors of the action cards
After the visual template is completed, we start to focus on the behaviors of the action cards and card list. Here are three interactions that we have defined in the projects.
PROTOTYPE
NEXT STEPS
Handle Edge Cases
During the discussion with the engineering team, several edges cases have been mentioned. For example, how to access card settings if the driver has no card. The interactions on these cases need to be further defined.
Conduct Usability Test
While iterating the design, glanceability of the card information is always our top priority. A further usability test will be required to make sure that drivers can scan through the card information easily
Update Guidelines
Since the action card was introduced in the design system, other designers start to use it to revamp developing features to fit the new driver app. However, they might not strictly follow the guideline and improvised to fulfill their use cases. I will need to update the guidelines to make suggestions about when to and when not to use this card element.