"My coupons" redesign — UX Case Study
Company: PedidosYa • Year: 2020
PedidosYa is the Quick Commerce company with the largest presence in Latin America and one of the largest worldwide. The project took place in 2020 between one of the app’s user interface redesigns.
My role in the project
I carried out the entire design process for the project working together with a UX Writer and a UX researcher as well as with Product and Developers team.
How I did it
- Survey
- Industry benchmark
- Design
- User testing
Introduction
The problem
First, since we were on the middle of a redesign, changes needed to be made in the section and we couldn't avoid that, so we needed to know what were going to be the impact of those changes.
Second, the company wanted to add a new kind of coupon that would give them the possibility to give away coupons of specific restaurants and because of this, a new way to negociate with restaurants and partners. The problem here was that because of the visual structure of the coupons we had at that moment, this were not possible, so our actual solution wasn't scalable.
Goal
The main goal was to improve the coupons UI so it became a scalable solution and adapt it to the new look and feel but without compromise user experience.
Actual state of the solution
Because we had a redesign ahead, before start making changes to the design, I wanted to know if there were any problem with the actual design. So I needed to understand how the coupons were perceived by our users and what was the most important information they needed to know for using a coupon.
(Also at that moment the tracking implemented in the app wasn't the best, so we didn’t have any trusted metric we can rely on it)
Survey
We sent a survey to active users with, at least, 2 orders in the last month to get responses of engaged users, and we collected about 1.462 responses.
The first thing we wanted to learn was about the identifier of the coupon and how relevant it was. The icons used were the same icons for the categories used througout the app, but we didn't know if those icons were recognized well for the users.
Results were good and almost 75% of the users could say what was the coupon for with only seeing the icon because they already recognized the icons from the main categories of the app.
We also gave the users a blank coupon so they could fill in with the information they wanted to know about it, to get a better understanding of what was the most important information to show.
After we analyzed the answers the most important information for the users were the following (in order of importance)
- The value of the discount.
- Limit date for using it.
- For what type of commerce is valid.
- Minimun amount for using it.
- If it's valid in a particular city.
- Payment method condition.
Analyzing other players
Before jumping into the design phase, I run a benchmark to see how other companies in the field were designing their coupons.
The focus of the analysis were on these elements
- Information shown in the coupons.
- User interface elements
- Call to actions.
Conclussion
When I went through these apps I noticed that there weren’t any common structure or pattern to follow, and also in most cases the coupons section didn’t seem to have much care by these apps, probably because giving away discounts wasn’t their main goal.
What I do find out was that in 4 out of the 5 apps, there was one element that we didn’t have in our current solution and that it was one of the most important information mentioned by our users. The minimum amount for using the coupon.
Ideation
After the data collected through the survey and the references I had from the benchmark, I started ideating different versions that could solve the problem and at the same time be aligned with user needs and the new design styleguide.
Validation (User testing)
Once I felt confident with the new layout of the coupons section and the new design of the coupons, we started with validations for the new design. We ran 5 remote moderated user tests with active users of the app.
Even if we weren’t doing a huge redesign, we wanted to make sure that users could have a good understanding of the section and how to use the coupons. But because of the redesign was still kind of a secret we tested it using the current style guide at that moment.
Results were great and 100% of users we interviewed completed the tasks successfully and didn’t have problems with the new layout of the section.
Final design
Once we ended with validations I used the new styleguide to come up with final UI for the Coupons section.
Now the coupon shows upfront the most important information for the user such as the value of the discount, limit date for using it, what type of commerce is valid for and the minimun amount for using it.
Before and after
The main changes on the screen were
- First: Moved the "Add coupon" button to the top right corner of the screen, since this is not the main action. Adding a coupon manually should not be the most common case, instead the coupons should be given to the user (usually because of marketing campaigns) and these would appear already added to the user coupon wallet.
- Second: Coupon information re-structured to match design system new guidelines and user needs, adding all the most important information according to our previous research.
- Third: The "more info" access was moved to the bottom of the screen, below the listed coupons. Also using text instead of only an icon removes ambiguity and inform the user exactly what to expect when entering that section.
