Buy in one tap.

Our journey to preparing the Evino iOS app and website for Apple Pay in Brazil and creating a new benchmark for a smooth checkout experience.

At the end of 2017 we were invited by Apple to participate as an official launch partner for Apple Pay in Brazil. At that time, the Evino app already had 4.7 star ratings on the App Store, which we are proud of and strive to make even greater.

Our team is constantly looking into ways of making the checkout flow simpler, so much that we have adopted an “one-click-buy” since the first version of the app.

Even so, there were still a lot of evolving points that were detected in our user tests and usability studies. A part of them linked to bugs and also to the information organisation of the cart.

Therefore, we envisioned the Apple Pay project not only being an implementation of a new means of payment, but also an opportunity to resolve some known pain points during our checkout.

UX Studies and Flows

During our first visit to the Apple Sao Paulo office, we had no previews references on how Apple Pay in Brazil would work, so we did our “homework” and emulated the user flow based on some references from apps in the US. Our goal was to stress test the flow and see how it would work on our existing payment flow, to resolve doubts as quickly as possible. Among them, it was clear that there are some specific information required in Brazil, for example:

Would there be a CPF (brazilian id) field in the Apple Pay sheet?

Would there be installments directly on the Apple Pay sheet?

How would the shipping area (zip code) and discount coupon be applied?

Design Process

The creation process at Evino consists of many review stages, which involves the whole design team, as well as the Product Owner and stakeholders from other areas. With each new progress, the team met for a review and this ritual helped us to evolve ideas quickly.

After evaluating the project, the first decision we made regarding the flow was to display the possibility of payment with Apple Pay only for users which had done the Apple Pay registration. This helped us to create an optimal flow for existing Apple Pay users and reduce the complexity for other users by avoiding to create an additional signup process within our checkout flow.

In the construction of the cart we reviewed several components. For instance, instead of just including the button in the current cart, we’ve reorganised some information.

Before the cart had the summary of the purchase at the top, and the calculator at the bottom, but soon we saw that it would be better to be at the bottom with a fixed buy button on the “footer”.

The goal was to allow users to switch between different payment types and still remain consistent.

We tested to have a buy button that was only showing when the user was not scrolling but learned quickly that having a fixed button was better for our users.

User tests

Testing our new cart and Apple Pay flow was very challenging since the project was strictly confidential where only the project participants knew of its existence. It was a big secret project even for Evino employees.

Thinking of how to test without revealing Apple Pay, we thought to maintain the flow but to change the button by another similar means of payment: so we decided to use PayPal. To facilitate the test, we curated users who had already paid at least once with PayPal. Among them, only one noticed that the payment flow was not consistent with the PayPal flow.

Also we tested the new cart with the standard credit card flow. We used Invision to prototype the tests. In total we performed 10 tests, 5 of the Apple Pay flow, 5 with the credit card flow.

Overall, users were able to choose the payment method and complete the purchase, but we found some critical areas to improve

  • The emphasis that the CPF is mandatory on the first purchase
  • There was also a button to highlight the need to add the CPF but we noticed that our test users missed that information
  • The field for selecting the number of installments was too far from the payment method, which lead to that some customers missed that important information as well.

Launch in steps

After a few more rounds of validation and pixel pushing on each screen together with our developers we finally got the cart/checkout redesign done. We decided to launched in February with the new version of the shopping cart, yet without the Apple Pay.

Launching this version early was very important to learn and gather new insights. We had the chance to observe the user behaviours and validate what we had learn from our usability tests, we found some implementation problems that ended up affecting the experience which we quickly corrected.

In the final sprint, we got a lot of support from the Apple Pay team, who gave us feedback about technical issues we were phasing and usability refinements. The collaboration was very fruitful and important to get to the final refined version.

While waiting for the Apple Pay launch we took the opportunity to give our App Store presence a facelift.

Final Results

After 3 months of dedicated work we were finally ready to launch with a best in class experience and as a cherry on the cake participating in the official launch of Apple Pay in Brazil.

Achievements:

Fix the usability issues of the old cart, improve the experience and facilitate a faster checkout.

Implementing Apple Pay and being a protagonist in building the future of checkout experiences.

In the middle of the project, we’ve also included Apple Pay in Safari, to help our web users to have a better shopping experience.

We got selected as the App of the Day on the App Store.

Part of the team that helped create the new Evino payment experience.

And we still left in the app cart an “easter-egg” for you to discover ;)

Cool?

( Evino ) is always looking for talented professionals who want to help the Evino Design team to demystify wine culture in Brazil. Take a look at https://www.evino.com.br/careers/ and follow our Dribbble https://dribbble.com/evino

Cheers!