NATIVE ANDROID
Transforming the user experience at Checkout in Americanas
The previous checkout process was developed in React and Onepage, so we started the redesign by adopting the Multiple Steps format, initially only for IOS.
After testing and validating, we continued with the project to adapt the Android checkout to the native format, as the majority of our user base uses this operating system.
The entire process followed Material Design guidelines, considering the new standard that had already been successfully tested in the IOS flow.
Challenge
Create a native Android flow based on the existing iOS flow
Role
Product designer
Tool
Figma
Team
1 product designer/ 1 UX Writer / 3 Devs / 1 Product Owner
Year/duration
2021 /4 months
Flow mapping
In the previous project, after validating usability with users, with positive results, we continued with mapping the flow of the current scenario, IOS. The objective is to adjust the components according to the system standard, maintaining consistency of behavior between platforms.
Checkout followed the following steps:
Delivery
Payment
Revision
Thanks
1. Delivery
At this stage, the user chooses how to deliver or collect their purchase. We considered several options, such as online purchase with in-store pickup (O2O), home delivery (Ship to Shore), marketplace and locker both with and without an appointment.
Components and adjustments:
​
-
Header with timeline
-
Delivery/collection tab
-
Address list
-
New address
-
card with delivery option
-
summary
-
error messages
​
2. Payment
Here, we present the user with all payment options to facilitate the completion of the purchase, including Ame, credit card, bank slip, Pix, voucher, and the opportunity to use promotional coupons.
Components and adjustments:
​
-
Header with timeline
-
card with payment option
-
coupon card
-
OKg discount
-
extra information from Ame
-
credit card listing
-
new credit card
-
summary
-
error message
​
3. Review
At this stage, the user can review all items of their purchase before finalizing the process. This is the last opportunity to adjust the order or change the payment method.
Components and adjustments:
​
-
Header with timeline
-
card with product information
-
card with delivery information
-
card with payment information
-
summary
-
error message
​
4. Thank you
In this final post-purchase phase, the order is confirmed or not, with all the information presented on the review screen, including the delivery time and details about Ame's cashback.
Components and adjustments:
​
-
Header with order confirmation
-
card with user information
-
card with order summary
-
Ame promotional card
-
NPS card
-
Ebit card
​
Material design analysis
After understanding all the relevant points and necessary considerations, I started an analysis of Material Design. The aim was to implement the UI pattern of the components already present in the operating system, aiming to improve the application's performance, provide a consistent user experience and facilitate product maintenance.
1. app bar: top
Roboto family
5. lists
2. Progress indicator
4. cards
Solution
We maintained the behavior previously validated in tests, reused existing forms in other parts of the flow and guaranteed the consistency of the components present on the Home page and on the product page (PDP).
Test and results
We carried out A/B testing to validate the solution with Android users, obtaining a positive response.
Results included:
-
3.2% order conversion
-
22.3% increase in payments with Ame
-
20% growth in payments with Pix
-
13.5% increase in payments via bank slip.
Learnings
This was my first project at the company, providing a valuable understanding of the importance of collaboration with everyone involved. Adherence to the principles of Material Design andHuman Interface Guidelines was fundamental in the creation of native projects, serving as a guide. The experience highlighted the need to divide and prioritize features in extensive projects, optimizing delivery and avoiding overloading the development process.