Just Eat
Native Checkout
Native Checkout
As part of redesigning the account pages, we touched upon Payment Methods and Address Book - directly affecting the Checkout.
After the Account Pages roll-out we started working with the Payment team to improve the checkout funnel, looking to move from a 3 page checkout to a single one, in order to provide a seamless experience for our customers.
After the Account Pages roll-out we started working with the Payment team to improve the checkout funnel, looking to move from a 3 page checkout to a single one, in order to provide a seamless experience for our customers.
Goals: Increase conversion for new & returning customers
Rollout plan
The current checkout had 3 steps: delivery time, details & payment. While this makes sense for new customers, returning customers should be able to check-out in one tap. At the same time, the current Payment page is a web view, which means the look & feel is different than the previous pages in the flow. New users found this confusing and unsafe.
We agreed on an iterative roll-out plan, moving from 3 pages to 2, then to a single page checkout. This way we can easily measure the impact and define the next steps without ruining the experience for 25 mil. users.
We agreed on an iterative roll-out plan, moving from 3 pages to 2, then to a single page checkout. This way we can easily measure the impact and define the next steps without ruining the experience for 25 mil. users.
Benchmarking
We started the research process by looking at competitors and other relevant companies, looking to identify trends, patterns and have a pool of ideas to kick-off the ideation process. We looked at competitors such as Uber Eats, Deliveroo, Door Dash and other companies in the e-commerce space: Asos, Trainline, Farmdrop, Airbnb.
Things we liked:
People who ordered din item also ordered - Uber
Percentage Tipping - Doordash
Premier Delivery - Asos
Quick checkout with lots of variables - Farmdrop
Things we liked:
People who ordered din item also ordered - Uber
Percentage Tipping - Doordash
Premier Delivery - Asos
Quick checkout with lots of variables - Farmdrop
Confirm details
72% of JUST EAT users are ordering at the same address, using the same card, so surfacing those by default will remove friction between pages, and would make it easier to place an order.
Merging 3 pages into a single one is a risky job, so we're approaching the task with an iterative mindset. First, merge Address and Payment, then merge those with Delivery,
Merging 3 pages into a single one is a risky job, so we're approaching the task with an iterative mindset. First, merge Address and Payment, then merge those with Delivery,
Address
At that point, there was no easy way to choose your delivery address. We're adding the ability to change the address by choosing from your existing ones or adding a new one. To avoid an endless list of addresses, we're only surfacing those that are situated within the restaurant's delivery area.
While changing the APIs we started looking into ways we could create a more personalised experience, so we allowed customers to choose a name for each address they're adding, or add a custom one.
While changing the APIs we started looking into ways we could create a more personalised experience, so we allowed customers to choose a name for each address they're adding, or add a custom one.
Localisation:
Considering Just Eat's worldwide reach, we had to localise the Address page to work with multiple countries. Each country has its own fields, restrictions and even API parameters, meaning that the design had to be adapted based on each particular scenario.
This wasn't just a case of changing the language, but more about understanding the user behaviour in all those countries. For example, while in the UK most users add their address on a single row, in Italy the normal behaviour is to write each detail separately, and in Ireland most users expect auto-complete (due to a recent change with Irish postcodes).
Considering Just Eat's worldwide reach, we had to localise the Address page to work with multiple countries. Each country has its own fields, restrictions and even API parameters, meaning that the design had to be adapted based on each particular scenario.
This wasn't just a case of changing the language, but more about understanding the user behaviour in all those countries. For example, while in the UK most users add their address on a single row, in Italy the normal behaviour is to write each detail separately, and in Ireland most users expect auto-complete (due to a recent change with Irish postcodes).
Payment
The old payment page was implemented as a webview, so one of the goals for this redesign was to build this natively.
CVV Workshop:
The second big task was solving the CVV problem. In the old version users were asked for the CVV each time they were placing an order, making the process more difficult than it has to be. During the redesign process we worked with the Payment team to allow quick checkout, without needing the CVV input every time.
CVV Workshop:
The second big task was solving the CVV problem. In the old version users were asked for the CVV each time they were placing an order, making the process more difficult than it has to be. During the redesign process we worked with the Payment team to allow quick checkout, without needing the CVV input every time.
Issues:
For years and years, the checkout page was similar to Pandora's Box. No one wanted to make any changes, as there were lots of complications, and any small change could break the flow.
We soon realised that even with an iterative mindset, removing the payment webview wasn't going to happen overnight. Instead of giving up, we agreed to ship the new payment page to only 10% of users during weekdays, and keep the current flow to 90%.
For years and years, the checkout page was similar to Pandora's Box. No one wanted to make any changes, as there were lots of complications, and any small change could break the flow.
We soon realised that even with an iterative mindset, removing the payment webview wasn't going to happen overnight. Instead of giving up, we agreed to ship the new payment page to only 10% of users during weekdays, and keep the current flow to 90%.
Adding a new card
To remove the friction when typing lots of digits, we worked with a 3rd party to introduce scanning your card. This was a pretty straightforward task, but it brought a lot of value to the current experience.
To remove the friction when typing lots of digits, we worked with a 3rd party to introduce scanning your card. This was a pretty straightforward task, but it brought a lot of value to the current experience.
Order confirmation
While redesigning the checkout, we also looked at the order confirmation page and order history. These pages haven't been touched in a while, and we took some time to clean them up and bring them up to date with the rest of the platform.
Paying with cash - Push Notification
A pretty big percentage of users pay with cash at checkout. During the research phase we realised that lots of people forget to get cash before food is delivered, so it gets quite confusing when the driver knocks at the door.
To solve that, we're sending a push notification when the order is almost there, reminding users to have the cash ready.
A pretty big percentage of users pay with cash at checkout. During the research phase we realised that lots of people forget to get cash before food is delivered, so it gets quite confusing when the driver knocks at the door.
To solve that, we're sending a push notification when the order is almost there, reminding users to have the cash ready.
Test & learn
Throughout this project we went through lots of usability testing sessions to validate our assumptions & test early concepts. This was extremely helpful in finding out what works and what doesn't, before going into production.
Occasionally, small things like adjusting copy made a huge difference.
Occasionally, small things like adjusting copy made a huge difference.
Disclaimer ✊
Launching something this big for 25 million people at once is a risky job. It's been almost 2 years since we shipped the first iteration, and native checkout hasn't been rolled out to 100% of users yet. Parts of it are still being validated, reviewed and A/B tested.
Thanks to the Just Eat team ✨
Thanks to Roland Butler (Tech Manager) & Elise Morgan (PM) and the rest of the Payments team, Anthony Arnold & Emir Biscevic for design feedback and Nural Ali for future iterations.
Launching something this big for 25 million people at once is a risky job. It's been almost 2 years since we shipped the first iteration, and native checkout hasn't been rolled out to 100% of users yet. Parts of it are still being validated, reviewed and A/B tested.
Thanks to the Just Eat team ✨
Thanks to Roland Butler (Tech Manager) & Elise Morgan (PM) and the rest of the Payments team, Anthony Arnold & Emir Biscevic for design feedback and Nural Ali for future iterations.
If you'd like to hear more about this project, or to talk about how I can help your product convert better, reach out at tasedanmarian@gmail.com