Update and streamline Checkout to increase conversions

Delivery.com connects local restaurants, grocery stores, liquor shops, and laundry services to its users. Being around for more than 10 years, its iOS and Android platforms needed an update. The interface was clunky and outdated. The technical build of it also required an overhaul to support newer, upcoming features. We approached redesign of the bag and checkout screens with the goal of increasing conversions and to provide a more intuitive experience.

Research and Brainstorm

Research started by collecting user feedback and existing data points to set benchmarks. It also consisted of analyzing numerous indirect and direct competitors to see how they approached checkout. 

In early sessions we spilled out current flows and analyzed over how we could improve it. We also kept in mind different types of users and scenarios we had to design. This included but was not limited to corporate users who are given company credits to use, multi-merchant transactions, and group orders.

Before: Clunky, outdated interface

Prototyping and Iterating

The design process went through repeated cycles of iterating, prototyping, and testing the flow with others. Checkout was a cross-platform intiative with some features releasing on responsive (mobile web) earlier so we could test and apply learnings to iOS and Android. Invision was used to share prototypes and collect feedback. 

In checkout, we moved some components earlier in the flow to alleviate frustrations and prevent drop-off on the checkout screen. For example, we separated gift cards and promos so they weren't sharing the same input. We shifted promos to the bag screen. Users were encouraged to confirm new delivery addresses, phone number, and payment methods earlier in the flow. So by the time a user was ready to checkout, all that was needed was a final confirmation of details.

Another one of the goals was to provide clarity to the order type, payment method, and delivery address right before placing an order. Therefore copywriting was a focus in improving the checkout experience. The result was building dynamic, sticky checkout buttons were built to give that context and reassurance.

Dynamic checkout buttons provide clarity and reassurance

Accounting for multiple user types: Corporate

One entirely new feature was designing checkout for our corporate users. I noticed a number of corporate users use mobile web to place breakfast or lunch orders in the morning, and therefore, this was an opportunity to shift this behavior to our iOS and Android apps. We provided a way for corporate users to use company credits to order breakfast and/or lunch together.

A mix of Principle, and AfterEffects were used to include transitions across screens and review flows.

Rollout

Since it was a big overhaul and had a direct impact to conversions, we rolled out these new features piecemeal. For example, allowing multiple payment methods was a big change both visually and technically, so it was released earlier to test validity and successful transactions.

The rest of bag and checkout was also rolled out incrementally and conversions were monitored day by day. Fortunately, the new look was met with increased conversions and resulted in a full release in no time.