New Profile Tap

What I did

Since we moved some onboarding tasks to the profile section in the Account page, I redesigned the entire Account page. I created new features for the profile, bonus rewards & events, inbox, partner code, and account deletion sections.

This project doubled the onboarding rate. Completion increased from 40% to 85% after moving the onboarding task to the profile.
‍

Duration

3 Months, 2023

team

1 Project Designer, 1 PM,
3 Engineers

role

Product Designer,

tool

Figma, Miro, Adobe After Effects, LottieFiles

Before & After

I redesigned the entire Account page. Here are the before and after versions of the Account page. This case study focuses more on the profile section, which renewed the onboarding process and used gamification visuals to complete the profile.

Before

After

Problem

When users sign up for the Premise app, we require onboarding tasks to create a profile. However, due to too many detailed questions, 60% of users felt overwhelmed and gave up. Despite a 'Not Now' button, the onboarding completion is required to access tasks.

PROBLEM STATEMENT

How might we prevent users from feeling overwhelmed during the onboarding process and encourage them to finish the process?

solution

During onboarding, we ask only a few questions to create user profile. After completing the onboarding process, users are encouraged to answer additional questions in their profile to receive more relevant tasks.

Profile progress

It displays the user's profile completion percentage to encourage them to finish their account settings.

Profile Categories

Once the user taps 'Profile', it shows categories to complete for the account settings. Each category displays a progress bar.

Category detail pages

Each category has detail pages where users can complete the survey to access more relevant tasks. It also includes a progress bar with a page count to visualize progress.

Information Update

6 months later, Premise app will send a bottom sheet notification prompting users to update their information.

Users can only update the category and response by selecting the pencil icon.

Concepts & Feedbacks

I separated four different concepts: redesigning the account page, progress gamification, the profile page, and category pages. I received some feedback from the design critique.

Concept 1: Account layout

Feedback

It is visually very organized and easy to navigate. It also looks playful and user-friendly. Showing the level with a crown icon, lifetime earnings, and the number of completed tasks enhances user engagement.
Reducing onboarding tasks and moving other extra questionnaires into the Profile section is great! The progress bar motivates me to complete them!
Adding a Task Preferences section is a good idea, allowing users to set permanent filters for store types, task types, and distance. Even though some stores might not be located in their area, the app still shows them. However, most users want tasks near them and they want to be able to set the distance.
Reducing onboarding tasks and moving other extra questionnaires into the Profile section is great! The progress bar motivates me to complete them!

Concept 2: Profile progress bar

The profile progress bar motivates users to want to complete their profiles. The progress bar indicates how many tasks are completed out of the total number. If Premise adds more categories to the profile, the total number and completion will change.

Completing or updating the profile gets users more relevant tasks. It encourages them to complete their profile progress.

Feedback

Building 8 sections of a progress bar is not easy for engineers. Additionally, showing percentages would be easier to maintain than numbers.
Using gamification by showing a progress bar to encourage users to complete their profile is a great concept. Furthermore, it allows us to offer more relevant tasks to users.

Concept 3: Profile page

At the top, the progress bar indicates the total number of categories and how many have been completed.

Each category has different stages of progress completion: before starting, in progress, and after completion.

Feedback

Progress on the detail page is beneficial because it allows users to keep track of their progress.
Showing different statuses by categories is great because some users may not finish certain categories. In this case, we can save their progress and remind them to finish.

Concept 4: Category page

Each category's detail page shows how many questions it has and it counts whenever a user submits an answer. If a user updates a specific question answer after 6 months, the progress changes to Editing Mode, displaying a different progress bar at the top.

Feedback

It is useful to provide information to users about how many questions are left to complete in a category.
Additionally, showing the Editing Mode helps distinguish new questions.

Wireframes

Iteration

Removed crown icon
This icon represented different levels; however, it was out of scope for now.
Changed to percentage bar
It was originally a number with sections on the bar, but to manage numerous categories, a percentage bar was the better choice.
Removed the 'Task Preferences'
It supported a permanent filter that allowed users to select and store task types. However, store types were only targeted for the United States. Due to engineering time constraints, this feature was removed.
Changed the box layout size
Due to text overflow in different languages, we decided to use a vertical layout for the box.
Removed the Badge section
It was out of scope.
Space around 'Delete my account'
Added space around 'Delete my account' to keep it separate from the settings

Progress bar
Instead of displaying the number of completed categories, it shows a percentage progress bar to accommodate the uncertain number of categories.
Completion indicated by 100%
It used to be represented with a check mark, but to maintain consistency, it was changed to a percentage.
Changed it to red notification badge
When the app adds a new category or asks for updated user information, it has a dedicated mark. It used to be 'New,' but we changed it to a red notification badge(red dot) to maintain consistency with the navigation bar updating indicator.

Single column layout
Changed from a two column category layout to a single column layout due to text overflow.
Added 'Up to date' title
Once a user completes each category, it moves under the 'Up to Date' section.
Added 'Last updated date'
It shows the last updated date so users can check and change in the future if they think the information is outdated.

Prototype

1. Profile

New users are engaged to complete their profile to get more relevant tasks.

The percentage bar in the profile section encourages users to complete it to 100%.

The profile page has categories and a progress bar for each category.

Each category's detail page has a page progress indicator showing how many pages still need to be completed.

To update the profile categories, the app send a bottom sheet notification that connects to the profile editing.

2. Other sections

I completed the Raffle and Bonus rewards in the Bonuses & Events section as well as the Inbox and Account deletion in the Support and Settings sections.

Raffle in the Bonuses & events section.

Barcode $20 bonus in the Bonuses & events section.

Inbox in the Support section

My account deletion in the Support section.

refLEction

What I learned

Redesigning the entire Account page was an exciting opportunity because it allowed us to add delightful visual designs and new features. I introduced new features to the Account page, including Profile, Raffle Event, Barcode $20 Bonus, Inbox, Partner Code, and Account Deletion. This large organizing project, especially the Profile feature, resulted in doubling the onboarding submission rate by making the onboarding process faster and more engaging.

I'm glad I not only redesigned but also solved the onboarding problem, which significantly improved the user experience and efficiency.

I'm looking forward to discussing this project in more detail. Please contact me if you want to know more about this project or have any questions.