Initial steps and project goals

I led design on a major update to my team's onboarding process. The goal of this update was to:

• reduce onboarding time

• simplify enrollment by minimizing user effort

• eventually, increase user retention by improving users first impression of our product

Sending onboarding email invites

While working on updating the onboarding process, our team decided to change how the onboarding process starts. In the past, users were sent emails with their Member ID's that they would have to type into the portal website to get started with enrollment. However, having users type this ID is time consuming and I thought this may be a potential area of improvement.

After further research and meeting with other teams (including security and development), our team decided it would be more innovative and efficient to email users unique links for onboarding. Unique links would save time because the user would only have to click on the link in their email to get started with enrollment. They would no longer have to start the onboarding process by typing in a long ID number.

The need for a link expiration page

Our security team required us to put time limits on the unique links. The invite links would expire roughly 24 hours after being sent. It became clear that emailing a unique link meant that we would need a link expiration flow.

We wanted the expiration flow to let users send a new invite link. This flow had to be helpful for users and simple to do.

This Dribbble post represents work done for the link expired flow only. There are other screens and flows I've worked on for onboarding but they are not represented in this post.

The process

For this design, I was responsible for:

• Imagery/iconography

• Color scheme and use

• Overall organization and flow of screens

• Copy writing

• Desktop, tablet, and mobile screen sizes

In general, I typically don't work on copy as we have a copy writer on our team. However, our copy writer was on parental leave so I had to cover writing for this project. Overall, I wanted to evoke a helpful voice instead of a negative one as this is the first step of enrollment for users. I didn't want to discourage users from sending a new invite link. My process for copy writing started with using AI for suggestions, coming up a few copy ideas, presenting these ideas to my team, then narrowing down and editing the copy.

Regarding design, I wanted to match the helpful voice established in the copy. I decided on keeping to our company blues and avoiding startling colors like red as to avoid scaring off users in the first steps of enrollment. Images were chosen to be logical helpers to the user. This flow is about an email link expiring so that is why I chose the link and mail images. Lastly, we wanted a simple and helpful flow so that's why I decided on one primary button for resending a new link. The last page in this flow was included as I wanted to communicate to users that the new email was sent.

A note about this project

Unfortunately we did not have the funding and time to conduct user tests for this link expiration flow. Ideally, I would have done testing on designs before project completion.

Also, the screens in this post represent the final versions of the expired link flow. Desktop, tablet and mobile have the same content just at different sizes. Please note that there were multiple design and copy iterations beforehand that are not represented here. I've also had to remove logo and branding on these screens due to legal limitations.

Desktop flow

Tablet flow

Mobile flow