Based in Madrid, Spain
Loading amazing data...
Role
Sr. Product Designer
Date
May 18, 2021
Responsabilities
Design UX Research
Timeline
1 month
Overview
This is one of the projects I led to improve the user experience during the purchase process.
I focused on usability, analyzing key KPIs in a delivery experience to reduce friction and optimize the add-to-cart interaction.
By identifying usability issues and measuring their impact, I proposed a solution to make the process faster and more intuitive.
Old design
New design
UI Design.
Wrong button position
By having the button on top of the product itself, users experience a lot of missclicks during their purchases. The product card has 2 events:
1. Open the product detail
2. Screens / States
The issue arises when users try to add a product to the cart but accidentally tap the area that opens the product detail screen. This creates significant cognitive friction and becomes a serious usability problem when repeated multiple times during the purchase process, as it considerably increases the total time spent.
Old design
New design
Undersized
The size of the button is too small (32px) for the importance it has in the conversion. I always recommend following the best practices for this type of buttons, which should be finger-friendly (44px) to ensure that the user touches the button without problems and not elsewhere.
It may seem a simple detail, but designing according to Fitts' law improves the UX of this action, since we optimize its effectiveness and efficiency when carrying it out.
Old design
New design
Usability.
KPIs definition
To evaluate design usability, I first define the key KPIs for the experience. For online grocery purchases, three critical KPIs shape the user experience:
1. Taps / Clicks required to complete a task.
2. Screens / States that you have to go through.
3. Time required to complete a task
With these defined, I conduct a heuristic evaluation to compare the current design with the new solution, quantitatively proving which offers better usability.
Heuristic evaluation
In this heuristic evaluation, we identify tasks where the predefined KPIs can be measured. This allows us to create graphs and comparisons between the current design and the new solution.
To illustrate this, I present a comparison of the three KPIs using a common online shopping task: modifying product quantities.
Taps / Clicks
Screens / States
Time (seconds)
Data analysis.
Defining events
The next step is to analyze the entire experience where those indicators enter the playing field. At this point we must find the events with which we can measure the previously mentioned KPIs.
Massive analysis
At Rappi we have more than 50 million active users, so we have at our fingertips a huge amount of real and valuable data with which to validate our design decisions.
In this case with Amplitude and some mathematical calculations I got the following data:
Remove after opening the stepper
Add after opening the stepper
Taps / Clicks
Screens / States
Time (seconds)
Guerrilla testing.
Test plan
To qualitatively validate this project I decided to include some guerilla tests, because despite having a great general impact, it's a design change that affects a very specific task: Adding and removing products to the cart.
The scenarios and tasks were as follows:
Tasks
1. You are doing your weekly shopping and need to add different products to your cart. Add 3 units of Coca-Cola Zero and 2 units of Coca-Cola Original.
2. Then you remember that you're cutting down on sugar and decide to remove the 2 units of Coca-Cola Original from your cart.
3. To make sure you have enough Coca-Cola at home, you increase the quantity by adding 2 more units of Coca-Cola Zero.
Feedbacks
Ignacio, 29 years (Argentina)
“...the current design looks nice, but it’s hard to remove items due to the small button and the stepper's behavior, while the new design feels more comfortable with larger buttons that are always accessible....”
Manuela, 26 years (Argentina)
“...in the current design, I often opened the product screen by mistake because the button is too small and inconveniently placed, but the new design is simpler, clearer, and more visually organized...”
Paula, 26 years (Brasil)
“...the current design is tedious for modifying units directly from the product card due to the small button, whereas the new design is more intuitive and helpful for quick edits...”
Marina, 28 years (Argentina)
“...while I liked the visual aspect of the current design, the small button made it tedious, but the new design, with larger fixed buttons, feels much more functional and avoids accidental screen openings...”
Takeaway.
Sometimes it happens (especially in Agile environments) that we get into a dynamic in which we only focus on continuously releasing new projects and functionalities, but we forget to follow up on the designs that have already been implemented.
This is really important, because if we don't do this, we will be creating a product with a multitude of functionalities but increasingly difficult to use or even less useful for our users.
Another very important point is that no matter how small or basic a project may seem, it can have a huge impact on the product, as you have been able to see!