Background

Foodpanda application's profile screens were 6 years old and as most other screens have changed, these were overlooked. My project was to revamp the Profile screens.

‍

My Role & Duration

I worked on this project as a Product Design Intern at Delivery Hero. I worked on it for 3 months.

‍

Problem

These Profile screens were designed when FoodPanda was an early stage startup. Now, as the company grew and updated most screens to cater to the needs of its increasing user base, Profile screens were so far neglected. Today these screens don't look like part of the application. Hence, it was important to revamp the screens to make the app consistent to use across different screens.

‍

The Objective

To revamp the Profile screens to make it consistent with the rest of the application while exploring and bringing in new elements of novelty

To use Design system elements wherever possible for faster implementation and lesser cost.

‍

Research

Desk Research

II reviewed research articles about Profile pages to identify their key elements.

It became clear that these pages should present essential information while avoiding secondary content to ensure easy scanning

‍

‍

Understanding the current flow

Home > Hamburger menu > Profile screen > Edit screens Profile screens has personal information like name, e-mail, password, DOB and phone number. Each of these can be edited in edit screens. It also shows the connected accounts. So, if a user logged in through Gmail, it would be connected here.
‍

Competitor analysis

To understand the industry standards regarding profile screens, I selected other food delivery apps and Airbnb and I tried to see how they are placing the screen elements.

‍

‍

Findings

• Editable Profile section - Included important user data (Name, Phone number, Email ID, Password).
• Observed components in other platforms (Uber, Wolt, Zomato): Surfaced liked/favorite items, recent orders, and payment/settings options.
• Airbnb and Wolt: By employing Bottom sheets, they were able to guide the users through efficient actions.

‍

Wire-framing

Designing

In my initial wireframing, I explored two possibilities for the profile page

1.Allowing all components to be editable

2.Allowing each component to be editable separately

I also migrated Settings and Legal from hamburger menu to Profile.

‍

I adhered to the design system's components, such as buttons, field inputs, icons, colors, typography, and spacing guidelines. By doing so, I ensured consistency and aligned the profile page design with the overall user interface.

‍

User Testing

I recruited 4 participants from different demographics for user testing to understand the usability of the screens

Findings :

• Most users were able to make changes to their personal details in both the designs
• In both designs, the absence of labels beside the icons caused confusion
• In both the designs, users did not understand the activation of the Connected accounts.
• In first design, changing the profile image had no affordance in the initial screen and is a 2 step process.
• In the second design, editing the profile image was confusing.

At this point, with some improvements, the design could have been implementable. However, after speaking with my team, we collectively decided that we did not want to use the List view and also that we would get new illustrations to be made for the screens from the graphic design team. We also wanted to continue using the bottom sheets as they helped the users navigate step by step.

‍

Iterations

I started re-designing keeping in mind the observations of user testing. I pursued the 2nd version with bottom sheets. Also, I started alternative designs as we wanted to move away from List views. I designed in the lines of other menu items like Rewards pages and Panda pay pages for consistent designs.

‍

Design Exploration

‍

Final Prototype

Below is the final prototype that we wanted to test. Please play the prototype

‍

- The personal details in the Profile screens are arranged in a card form.
- The background is given ample space. This space is intended to amuse the user by personalisation. We wanted to take this idea ahead to the graphic design team and ask if they could provide us with relevant graphics here.

- The less used aspects of the screen are available after scrolling.

Further Scope

At this point of time, the menu and navigation squad decided to move from hamburger menu to bottom navigation. This is a 6 to 8 month project restructuring many aspects of the application. The scope of Profile screens is also extended and potentially made to account. This should contain more sections of the hamburger menu like vouchers, previous orders, rewards, panda pay etc. So, we decided to extend the scope of this project and impliment it along with the bottom navigation project.
However, at this point my internship at Delivery Hero ended and I submitted my work to the teams.
‍