Background
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
How it was...
Android
iOS
Problem Areas
- there was no tracking implemented (therefore we couldn't track conversion goals)
- Components were old components (outside of the design system)
- Different flows for iOS and Android
- Research showed that most of the user flows ( ex. changing your phone number) were confusing users and triggering verification mistakes
- No UX writing input on flows
- Using legacy code
Main Goals
- Adding tracking to screens to enable measuring on insights.
- Unify experience for iOS and AND
- Increase User conversion goals on Phone verifications initiated in MyProfile
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.
Function
- One submit interaction for (name, phone and email fields)
- Tracking being harder to implement/yield results
- Error messages were hard to solve since they would modify the layout of the screen
- Usability concerns: Users might find it hard to find the input field they would like to
- Accessibility and usability concerns around having many inputs in one screen
Form
- 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
Error handling
Design Approach B - Multiple Page -
The squad decided to create another variation that tried to follow a more step by step approach on guiding the users through their profile modification.
.gif)
Multi Step approach
Some of the benefits we envisioned from a multi page approach:
Scalability
Single action pages are easier to scale, by splitting the actions we could potentially add more features without the need of changing the overall layout in every iteration.
Error handling
Single action pages provide more space to create contextual error handling. Giving the users more accurate and contextual information about their actions
Enable better tracking
By splitting the flow into multiple steps, we could make it easier to create the trackin events and dashboards.
Adding more value through UX writing
By separating the actions into stand along screens, we were able to propose new text strings 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 the correct setting. For this we decided to test both approaches in a remote usability testing.
Research Goals
What we wanted to learn:
Would users be able to find the correct setting in the page when trying to change
- name
- phone number
- password
- language
- notifications
Would users be able to navigate towards the profile settings from homescreen when given a task
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.
- They took a bit longer in average to locate the setting when the information was further down the screen
- Users were generally confident they arrived in the correct screen when given the task in hand
Research Conclusion Approach B Multi Page
- Yes, users were able to find the correct information most of the time within a multi-page screen
- They took in average shorter time per step when locating the setting
- Users were generally confident they arrived in the correct screen when given the task in hand
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
Brands following a hibrid page approach (submit some fields in one page, and some in a second)
- Rappi
- Glovo
Selected Approach
My profile C
After completing the research and benchmarking phase, the squad decided to propose a middle ground between the two approaches. Mixing the best traits from both and minimising the risks of both.
The version C of my profile approach consisted in:
1. Simplifying the user journey by eliminating the first screen.
2. Making the contact information card screen of the multistep approach the main profile screen and adding the password interaction to it.
3. Reworking the information architecture in the sidebar navigation and moving the language and notification features to the settings entry point of the application.
My Profile C
Error handling
Android Development Spects Using Abstract
IOS Development Spects Using Abstract
Conclusions
My profile C brought different challenges to the table. Mostly around the alignment with stakeholders about the benefits of meeting the middle ground. We needed to further communicate and align with important key players to bring them on board with the benefits of this new approach.
Our squad was confident that having a multi step approach would give us some room to fit a more long term planning vision for profile in both design and code. The approach could scale easily in case we needed to add new features in the future without compromising the functionality or affecting the user experience.
My Profile Long term vision
