A consumer-based user experience design of ratings and reviews submission served as a new feature in the food delivery service from honestbee app. This feature allows the user to rate the order once the food is delivered.

Launched in 8 regions in Asia:
Singapore, Malaysia, Thailand, Indonesia, Japan, Philippines, Hong Kong, Taiwan.

ServicesUser Experience DesignGenresE-commerce (Online Food Ordering)Year2019ToolsSketch/Marvel


OBJECTIVES:

To help users make an informed decision faster before placing orders.

PROCESS:

01

Scope & Define


02

Competitive Research


03

Design Iteration


04

Usability Test


05

Finalized UI Design


06

Development + Design QA


07

Release


My Role


  • Competitive research
  • Conducted user testing
  • Built MVP Prototypes
  • Purposed design solutions to stakeholders
  • Delivered UI/UX design
  • Worked closely with developers during implementation
  • Finalized UI specification
  • Worked with QA engineer to fix UI bugs

CROSS-FUNCTIONAL TEAM


  • Business Owner
  • Product Manager
  • Content Designer
  • iOS/Android Developers
  • Frontend/backend engineers
  • QA Engineer

Requirements


Collect data from users’ feedback regarding each restaurant store and individual food item. This feature is supposed to cover comprehensively user flows based on all business models in food service.
In other words, customers who use the services including food delivery, takeaway, dine-In for membership and habitat by honestbee (tech-enabled retail) are all able to give feedback through the honestbee app.

Competitive Analysis

The summary of insights from analyzing competitors will help the team come to design decisions faster.
Identifying the design patterns and rating score mechanism from leading food delivery platforms or restaurant review sites.

ex. Ubereats, ele.me, yelp, meituan, hema

Ele.me

Ele me means “Hungry Now?” which is backed by Alibaba. It is the 2nd leading food delivery app in China and holds nearly 50% market share in 2018.

A user is able to rate the deliverer, restaurant, packaging, taste and individual food items once the order is completed.
Users ratings are anonymous.
— Variable tappable feedback for rating the driver according to thumb-down, neutral and thumb-up.
— Anonymous rating feature can be turned on or off via in-app checkbox.
If a user gives ratings under 3 stars for a restaurant, reviews are required. Otherwise, the user’s rating is not able to be submitted.
— Users would be given 16 coins as a reward as long as they leave ratings, reviews, and uploading photos.

Star Ele.me

Star ele.me is rebranded by Baidu(Waimei) food delivery operated as a sub-brand of Ele.me offering premium food.

The user is able to review history from two entry points.

(1) Tab → order → view reviews from this order (2) Profile page → review history

Hema

Fresh Hema is an alibaba new retail platform which combines online grocery delivery and offline services such as dine-in, fresh-food stores and groceries.

Food
Ratings: Thumbs up / thumbs down | Reviews: comments text box

Retail(Store) experience
Ratings: 1-5 Stars with tappable feedback | Reviews: comments text box

Meituan

Meituan leads in China’s food delivery market, controlling nearly 60% in the first half of 2018, followed by rivals Ele.me at 36%.

Deliverer
Ratings: 1-5 Stars—Variable tappable feedback in terms of positive or negative ratings.
Reviews: Not available
Restaurant
Ratings:
1-5 Star—Restaurant/Store | 1-5 Star—Packaging | 1-5 Star—Taste
Reviews: Photos uploading within comments
Food (SKU)
Ratings: Thumb up / thumb down | Reviews: Not available

Usability Test

Purposed A/B design options with prototypes to find out which is a better solution for ratings and reviews submission flow. 

Design option (A) — One-page scrolling 

With every question needed to be filled out in only one page. As a reviewer, I am able to rate the deliverer, store, individual dish only on the same screen.

Design option (B) — Progressive Disclosure 

Reviewers give ratings and reviews step by step, page by page. In this UI treatment user can only read one question in one page. Once a reviewer tap on ‘next’ call-to-action button she or he is able to reach the next page to see the following questions.

Objectives

We want to know which design pattern is more engaging for users to give ratings and reviews. We want to know the points of comparison between the two design options.

We want to validate which submission flow is faster and easier to get feedback from users that are in line with our early phase business goals to collect data.

Design Iterations

UX Design Specification

Finalized designs with deliverables on each platform across iOS, Android, web, mobile web.

Delivered UX feature documentation when handed over to engineers so they were able to ready to build and implement the purposed features. 

People are not allowed to leave reviews immediately after receiving their food orders. The rating request is a pop up push notification 30 minutes after the order is completed. 

In order to collect user reviews from people who miss the “Rate The Order” call to action button, a push notification requesting a review is pushed 30 minutes after the order is completed.

For the purpose of collecting valid data and avoiding misleading rating results, every “rate order” entry point only displays 7 days after the food order is delivered. Most food delivery services similarly lock editing reviews after a predetermined time.

UI & Interaction Design

Reviewer is allowed to submit (1) 1-5 stars to the deliverer (2) 1-5 stars to restaurant (3) Tap on like or dislike for individual food items (4) Leave the restaurant a review. 

Tappable feedback shows various combinations based on the negative(1-3 Star) and positive(4-5 Star) ratings.