Mobile Design: Redesigning the Onboarding Process

Overview:

I redesigned the onboarding process of a pre-existing app, following the companies branding guidelines and assets.

The company Linq is a startup working to eliminate the need for disposable business cards. They have created a system where users can purchase items (watches, cards, lanyards) that connect to an online profile and tap them on other peoples phones to share their contact information.

Original onboarding screens:

My updated pages + some explanations:

Design justification:

Opening pages:
I find that using images of real people using the product can tell a better story and connect more with the user. I used stock images to visualize what I had in mind.

Welcome slide - image of woman holding phone

Account information:
I added a progress bar at the top of the page to show how much of the process is left for the user. I have found this is helpful because it clarifies how much more the user has to do.

Instead of having the user input their area code, I decided to have it auto populate. Phones track locations, so it would already know what country the user is in. If the area code is incorrect, the user is able to click on it to change it.

I also included an option for the user to go back if they are already a member. There is also a link at the bottom directing to the privacy policy.

The "Next" button is inactive because the required information is not filled out.

Account info page unfilled

Error message:
I found it important that the error message highlights where the error is, and what it is. This page has no scrolling, so the user would be able to see it without needing another error message at the bottom.

Account info error - email already in use

Non-required information:
For the information that isn't required, I added a "Skip" option below the "Next" button. I did this so it was clear to the users they had the option to skip, and that it was easy to find. The "Next" button becomes active when the content is added.

Image upload

Activation page:
The original page had too much writing on it. Users tend not to read blocks of text unless they need to - even when designing it, I glossed over the text. I decided to shorten the text so that only what was necessary was included.

Product activation page

Let's connect

emilybetts342@gmail.com