Checkout for Foodpanda
CASE STUDY
Start here

Concept

Previously, the checkout on the Foodpanda mobile app was just one screen, with a lengthy, almost endless, and decidedly boring form. The idea was, therefore, to improve this critical part of the user flow to make it smoother, nicer, and faster for the user; we decided to split the whole process into shorter and more simple steps. Everything started on the whiteboard. At the beginning, we defined a general flow and drew the first concepts for the screens.

  • BASKET

    On the basket screen user taps "Proceed checkout" button and the jorney starts!

  • DELIVERY METHOD

    Screen appears only when more than one delivery method is available.

  • ADDRESS SELECTION

    First time user see only address form. For returning user list of previously used addressed is displayed.

  • PAYMENT METHOD

    For "cash on delivery" that's the last step. In case of online payments user is redirected to payment form which depends of choosen payment method.

  •  ORDER
    PLACED

Wireframes

When we achieved satisfactory results at this stage, we made a picture of the board and started converting simple, raw sketches to the wireframes.

STEP 1
Delivery method

STEP 2
Address selection

STEP 3
Payment method

Final designs

There wasn’t too much space for crazy design experiments on such a sensitive feature as “checkout”, so we decided to keep the screens as simple as possible. However, in order to enrich visual recognition of the possible choices, we added a few pictures and map illustrations.

STEP 1
Delivery method

STEP 2
Address selection

STEP 3
Payment method

The prototype

We always put our effort into building a working prototype from the final designs. In this case, we used inVision which helped us to properly test the flow. Usually, we build a few prototypes, to test different variations of the designs and perform internal tests.

Results

For this project, our KPI was a bounce rate on the checkout screen which is strictly connected with conversion rate. After shipping this feature, we achieved a relevant decrease of the bounce rate. However, during testing with users, we incidentally discovered one more interesting thing: users need more time to go through the new checkout than through the old one, however, these users have a different impression – to them, the new checkout seems to be faster.