Context and Scope
We detected a increased number of fraud initiated by users constantly changing their phone number within my profile entry point to be able to get new discounts
As part of the adoption of a new design system. Our squad needed to redesign the profile section of the foodpanda application for iOS and Android.
Scope
- iOS and Android
- 15 countries (RO, BG, SG, PK, BG, HK, TW, MY, TH, PH, NO, FI, SE, CZ, HU)
- 4 different brands (foodpanda, foodora, damejidlo, netpincer)
Timeline
Q4 2020
Project goals
1. Decrease the risk of fraud by increasing User conversion goals on Phone verifications initiated in MyProfile
2. Adding tracking to screens to enable measuring of conversion goals
3. Unify experience for iOS and AND
Design Approaches
Status quo
How the experience was before we tackled it
Android
iOS
Problem Areas
- There was no tracking implemented (therefore we couldn't track conversion goals)
- Components were old custom components
- Increased number of fraud
- Research showed that most of the user flows ( ex. changing your phone number) were confusing users and triggering verification mistakes
Design Approach A - Single Page -
A single page approach with one submit interaction for all fields was intended to minimise the effort needed on the development side while at the same time meeting user goals.
Design A Concerns
Design A posted some concerns that the squad needed to evaluate before moving forward.
Having all information in one screen makes it look cluttered and increases user cognitive load. Making it harder for users to locate the setting they would like to modify. Other concerns we had.
- One submit interaction for all fields
- Usability
- Displaying error messages
Error handling
Design Approach B - Multiple Page -
The squad decided to create another variation tried to follow a more step by step approach on guiding the users through their profile modification.
.gif)
Some of the benefits we envisioned from a multi page approach:
Giving users right amount of feedback.
Giving the users more accurate and contextual information about their actions. Single action pages provide more space to give to have more contextual error handling.
Scalability
Single action pages are easier to scale, by splitting the actions into steps we could handle each step individually and have better information architecture.
Enable better tracking
By splitting the flow into multiple steps, we could make it easier to create the tracking events and dashboards.
Adding more value through UX writing
By separating the actions into stand along screens, we were able to propose new copy that could better guide the users in the implications and further steps needed after modifying their information.
User Research
Testable concerns
For both approaches we had usability concerns, mostly about users finding their way and being able to complete the action. For this we decided to test both approaches in a remote usability testing.
What we wanted to learn
1. Would users be able to find the correct setting in the page when trying to change
- name
- phone number
- password
- language
- notifications
2 .Would users be able to navigate towards the profile settings from homescreen when given a task
Some research limitations:
- We couldn’t test fully interactive prototypes
- We had no access to user videos
- We had a budget of 20 testers per each test
- We couldn’t asses some topics with current tooling likesome text
- Accessibility
- Error handling
- Scalability
Research Method
Navigation Test in Usability Hub
Research Findings
Profile A - Sample Example
.png)
.png)
.png)
.png)
Profile B - Sample Example
.png)
.png)
Research Conclusions
Research Conclusion Approach A -Single Page-
- Users were able to find the correct information most of the time within a one-pager screen.
- Phone Number- 80%
- Name 80%
- Password- 70%
- They took longer in average to locate the setting when the information was further down the screen
Research Conclusion Approach B - Multi Page-
- Users were able to find the correct information most of the time within a multi-page screensome text
- Password- 100%
- Name - 100%
- Phone - 60%
- They took in average shorter time per step when locating the setting
Benchmarking
Additionally to round up our understanding we conducted benchmarking to understand generally how competitors and apps were approaching profile settings.
Uber Eats
.jpg)
Benchmarking Conclusions
Brands following a single page approach (submit all fields in one go)
- Deliveroo
- Grubhub
- Grab
- Boltfood
Brands following a multi page approach (submit/edit information in separate screens)
- Ubereats
- Airbnb
Conclusions
We were able to introduce a level of friction on fraud. We could mark phone numbers as unverified and force them to go through the verification flow after editing.
- We increased Phone Verification Conversion on phone number edit by 12% on APAC after first 3 months post release
We introduced an Unverified state on BE that could be used to avoid fraud. (Discounts could only be offered to verified phone numbers)
My Profile Long term vision
