Panelist Account Creation

Introduction

UserZoom is an all in one SaaS solution for UX research. Last year, UserZoom acquired YouEye and rebranded the panel company as IntelliZoom. IntelliZoom serves as an internal panel for UserZoom customers that can be leveraged to provide quick and high quality usability study results. When the platform was transferred over, a new sign up experience had to be created for people to join the IntelliZoom panel. The sign up is currently live at https://www.intelli-zoom.com/panelist/register

The Problem

How do we create an easy way to sign up for IntelliZoom while still collecting all the panelist information we need? 

We collect a lot of information on our panelists. It is part of what makes our panel powerful and valuable to our clients. I was tasked with creating a sign up flow that collected all the information we need while still being easy and seamless for the panelist. 

Goals

Create an experience that makes it easy and seamless for panelists to sign up for IntelliZoom.

Use dual authentication to verify panelist identities.

My Role

This was my first project at UserZoom. This project was already a work in progress when it was handed over to me. Most of the visual work had already been explored by our head of design. I was tasked with solidifying the flow, creating pixel perfect mocks of every screen, and prototyping any micro interactions I came up with. 

My Team

I partnered with a product manager and a 2 front end developers on this project. I also reviewed my work with the head of design throughout my process. 


Process

I sat down with my product manager and went through the requirements for the flow.

What were all the steps in the account creation process? 

I ended up only focusing on steps 1 - 5 for this project. Steps 6 and 7 were to be handled through emails from our panel managers until the panelist dashboard is built. The criteria collection steps (3 and 4) also ended up being removed from my flow and were instead handled through a 3rd party service called LimeSurvey. I was responsible for editing the CSS on the LimeSurvey form so that it matched the aesthetic of the sign up process.  This would make the whole experience feel seamless to the panelist. 

A key requirement was dual authentication. To make sure a panelist was a real person we had to verify their email and phone number. 

Where I Started

I started with some explorations done by the head of design. The structure of these explorations had already been approved by engineering so I used them as a starting guide. 

Single vs. Double Password Entry

How should the user create their password? I had two directions to consider. 

1. The user could do the traditional two step password entry to make sure their password was correct. 

Advantage: Not very error prone.

Disadvantage: Causes extra effort for the user. 

2. Have the user enter their password just once. Include a view toggle so they can check that it is correct. This is the direction I went with.

Advantage: Reduces work for the user. This is also a popular direction that most sign up flows are going. The double password entry has become fairly dated. 

Disadvantage: Somewhat error prone. View password toggle allows a concerned user to double check their password entry. 

I later created a very simple reset password flow to accommodate the slightly more error prone option. If the user did happen to mistype their password when creating their account, I made it very easy for them to reset their password. 


 

Text Code Iterations

How should the user enter the text code? I considered 3 different directions. 

1. The text code box is already displayed when the user enters their phone number. 

Advantages: All the information was on one screen, keeping the number of screens in the flow minimal.

Disadvantages: No affordance to the user that the text code was sent. 

2. Take the user to a new screen once the text code is sent. 

Advantages: Gives the user affordance that the text code was sent. 

Disadvantages: Adds another screen to the flow. Can be confusing to the user to be automatically pushed to a new screen. Easy to lose context of where they were. 

3. Expand the modal to expose the text code entry after it is sent. This is the direction I went with.

Advantage: Keeps user on same screen, keeping flow simple and keeping them within same context. Also gives affordance that the code was sent. 

Disadvantage: Could engineering build this?

The answer was yes! I prototyped the interaction in Framer and handed off to the front end developers to use as a reference. 

 

Final Flow