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.
I worked on this project as a Product Design Intern at Delivery Hero. I worked on it for 3 months.
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.
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.
II reviewed research articles about Profile pages to identify their key elements.
Article from Interaction design foundation - https://www.interaction-design.org/literature/article/tell-me-about-me-user-profiles-for-mobile-applications
It became clear that these pages should present essential information while avoiding secondary content to ensure easy scanning
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.
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.
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.
I recruited 4 participants from different demographics for user testing to understand the usability of the screens
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.
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.
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.
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.