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.


  • 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)


Q4 2020

How it was...



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.

Approach A - Name

Approach A - Email and Mobile

Approach A- Error Validation

Design A Concerns

Design A posted some concerns that the squad needed to evaluate before moving forward.


  • 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


  • 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.

Approach B - Contact Info

Approach B - Notifications

Approach B - Password

Multi Step approach

Some of the benefits we envisioned from a multi page approach:


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

  1. email
  2. name
  3. phone number
  4. password
  5. language
  6. 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

Profile B   Sample Example

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


Additionally to round up our understanding we conducted benchmarking to understand generally how competitors and apps were approaching profile settings

Uber Eats

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
  • Facebook
  • Whatsapp
  • Airbnb

Brands following a hibrid page approach (submit some fields in one page, and some in a second)

  • Rappi
  • Glovo
  • Twitter
  • Instagram

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.

My Profile C - Modify Name

My Profile C - Mobile Number

My Profile C - Settings

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


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

My profile live Version

Read another Case Study