CONSULTANT ENROLLMENT

Designing a New Enrollment Flow from Signup to Checkout

THE CHALLENGE

How might we create an engaging, contextual and familiar enrollment flow for new consultants?

At Rodan + Fields, more than 12,000 new consultants enroll every month (2016), and that number increases every year. 

I led a complete overhaul of the enrollment flow for all markets from a UX and UI perspective, turning it into a comprehensive, seamless onboarding process with a redesigned shopping cart and checkout.

The Process

The Requirements and Constraints

Results Sneak Peek

The new enrollment flow launched on April 7, 2017. It consists of three onboarding steps, beginning with enrollment and checkout, leading into CRP (autoship program) management, and finally business training.

Since launch, feedback on the new flow has been extremely positive, and we are still monitoring the monetary impact. Below are some highlights- as well as a more detailed dive into my design process.

DIGGING DEEPER:

The Existing Flow

The original enrollment flow took an average of 18 minutes to complete, despite the 3–5 minutes advertised on our website. It was a behemoth of 11 steps and 9 pages, with a disjointed shopping experience sandwiched between archaic, difficult-to-fill forms.

The first-page of the enrollment process had the third-highest bounce rate of the entire E-Commerce site, behind the login page, 404 error page, and “not found” page. Sales support calls poured in daily from disgruntled users frustrated with the flow, hurting revenue and engagement.

Testing the Existing Flow

I had a gut feeling that this flow was terrible, but I also didn't want to just operate on my assumptions. I had to test the current flow to validate the pain points I suspected, and make sure I do my due diligence to address all usability issues.

I quickly put together a testing plan, recruited users based on our existing personas, and moderated 9 user tests across desktop and mobile, with the help of Usertesting.com. 

When the results came in, they confirmed many of the pain points we knew about, but also brought to light ones we didn’t:

"Overwhelming, lots of information, and expensive."

That quote pretty much summed up user sentiment surrounding the current flow. 

Business vs. User Goals

It was immediately clear out of testing that there was friction between our business and user needs. Our users struggled with the autoship shopping process- they didn’t understand its benefits (which were rooted in our extremely complicated consultant business model) and thought the flow was too long. They also lamented how expensive the opportunity was, especially as the flow did little to explain the benefits of required money-spending activities. 

But CRP sales was one of the businesses's top conversion drivers, and I knew they wouldn't let go easily.

Design Studio

How could we tackle this gnarly problem? I decided to harness the collective brain power of our talented UX team.

Quickly, I hustled together a mini design studio with the team based on the Google Ventures Design Sprint methodology. I had a pretty good idea how I could optimize the design of the rest of the flow by greatly shortening some of the steps, cleaning up copy surrounding our business model and offer benefits, and employing form design best practices, but the real challenge lay in the following question:

How Might We… reduce and simplify enrollment to the minimum steps needed for the customer, yet still ensure that they are encouraged to enroll in CRP?

Rounds of crazy-eights, mini-presentations, furious note-taking and silent voting followed. 

At the end of the day, the team did not disappoint, and collectively, we came up with a great solution.

The vision: Reimagine enrollment as the first step of a holistic user onboarding process. After the user enrolls with the minimum number of steps needed, they are then guided to our autoship shopping page as part of onboarding. However, they can choose to exit the page if they want to, upon which they will be served friendly reminders the next few times they log in to their account to complete the process.

Our Hypothesis: Presenting CRP as the optional second step of a greater onboarding flow (with clearly articulated business benefits) will greatly reduce the friction customers experience during enrollment and not hurt conversion.

Wireframes

From there, I began sketching out how this flow would look across all devices. These sketches later turned into low-fidelity wireframes in Sketch:

Apart from the key design decision we made regarding autoship shopping, I also made some other key changes:

• Provided clear, visual explanation of business benefits for money-spending activities like enrollment kit selection, premium business management suite subscription and autoship shopping, with explanation of how it works within our business model.
• Clear disclaimers + explanation for sensitive information like social security number.
• Best practices on form field design, including clear success and error validation feedback, help messaging, and auto-formatting.
• Optimized accordion-style checkout that is simple, streamlined, and visually elegant. This checkout flow replaced the previous one across the entire site.

and of course:

• Created a holistic onboarding experience (6 pages total) with consultant enrollment as the first step, followed by autoship product shopping and “Getting Started” guide.

After separating CRP shopping from enrollment, the new enrollment flow was now only 7 steps long, compared to a previous 11.

Second Round Testing

Armed with my first round of wireframes, I put together a quick and dirty prototype with InVision, and launched 9 more user tests on the prototype to see whether it resonated with potential users.

The test was successful, validating many of the design decisions we made. Users found the flow intuitive and easy-to-follow. Only 1 user complained about flow length, compared to 80% of testers on the original flow. 

Testers understood what our autoship program was, and managed to complete it with no friction.

Even better, the enrollment portion of the flow now only took 5–7 minutes to complete!

However, I still found many things I could improve on, which I addressed in our next iteration.

As I iterated, I also routed the design through stakeholder approvals. We worked with vendors and internal business partners to ensure that the product complied with business rules, legal requirements and internal goals.

Visual Design

After receiving all the buy-in I needed, I made final tweaks and applied visual style to my wireframes. To ensure consistently I referenced our team’s Clarity Experience Design System, which I was working on concurrently with the team. As I finalized component designs for the enrollment flow, I also fed any changes back into our design system.

We designed for four breakpoints, according to the most-used screen sizes of our customers. A standard 145px column with 30px gutter layout was leveraged across all designs. 

The result was a bright, clean yet classic visual style that communicated our brand essence and still provided visual delight.

Final Testing and Development

For our last round of testing, I plugged the high fidelity mockups into InVision and took the flow to our consultants for a final round of feedback.

Consultants were delighted with the new process, noting specifically the shortening of the flow, the placement of the autoship shopping process and the clear explanations of business benefits and the R+F business model. They shared that one of their current biggest pain points signing up new consultants was enrollment, and they hoped the new flow would alleviate some of their pain. 

The new flow launched on April 9, 2017. I plan to continue monitoring the numbers, see how it performs, and iterated based on ongoing findings.

For now, you can view the desktop flow prototype here and the mobile one here: