Before July 2017 we had almost 15% of users dropping out at checkout on Austria’s leading food delivery app.
METRICS & GOALS
In mid July 2017 Mjam’s Product team decided to update the checkout on the existing app.
We faced the following user complanis: average time spent on checkout was too long, complicated payment methods, lack of transparency at this crucial stage.
The assumption was that the CVR will improve massively if we solve a number of issues and provide faster and more intuitive interaction. We also bet on how many users will complete the checkout after we apply the changes.
My bet was that 96,5 % of all sessions will successfully lead through the checkout.
Let’s see who won!
/ We faced the following user complains:
average time spent on checkout was too long, complicated payment methods, lack of transparency at this crucial stage.
Bad UX and confusing UI were two main reasons for the drop-off. For example:
We wanted at least 95% of users to succesfully finish their orders!
To prove our assumptions we did some user tests
We traveled to Vienna to set up user tests with our target audience. We focused on apps and learned a lot about the users struggles with the checkout.
Throughout the design process we continued to test our designs: using Invison hi-fi prototypes and later AB testing.
SKETCHING USER JURNEY & PROTOTYPING
While we were creating user journeys, iterating on low-fi wireframes, we solved a lot of usability issues. We made all of the important checkout components accessible without any extra interactions.
DESIGNING SOLUTIONS & TESTING THEM
After defining a clear idea of all interactions, we got deeper into UI design. We chose the Google Material Design because of its applicability to the platforms and its user intuitive and simplified features.
EASY CHECKOUT FLOW
Transparent user interface
We designed a cleaned up interface, stripped down of any noise and reduced to the essential components. The expandable panels reduce the apparent complexity of the checkout and place the whole section in to the viewport.
Easy adding or editing the address
Adding the address for new users or editing it for returning users is now a matter of one tap.
Selecting payments option and checking your order
Our customers now can see what was the last selected payment option and they can allways change their mind.