Summary

I joined Crew as a product design intern to assist the Senior Designer. During my time there, I was able to shorten onboarding time by nearly 15 minutes and reduce the number of steps, decreasing drop-off rates. Let me show you how I did it.

Problem

Sign-up and onboarding was long, tedious, and confusing. Customers dropped off during sign up.

Sign-up and onboarding was long, tedious, and confusing. Customers dropped off during sign up.

Goal

Reduce time spent on sign up to reduce drop off, improve conversion rates, and educate the users on app functionality

Reduce time spent on sign up to reduce drop off, improve conversion rates, and educate the users on app functionality

Tools

Figma, Zoom, Linear, SendGrid, Adobe Illustrator, Material Design, Human Interface Guidelines, WCAG standards

Figma, Zoom, Linear, SendGrid, Adobe Illustrator, Material Design, Human Interface Guidelines, WCAG standards

Discovery

To understand the problem, we spoke with 8 different families about their banking experiences, then analyzed them as a team. We identified sign-up as a high-friction part of the process. Noting the desires of our future users, I began to ideate solutions.

Ideation

I used a Bootcamp-style flowchart to ensure that we included the necessary steps but remove painful ones. This allowed for quick adjustments before we ever got to prototypes (there were lots of versions of this)

This is Morgan (senior designer) running through scenarios on the window.

Turns out, banking is highly regulated. Who knew?

This is Morgan (senior designer) running through scenarios on the window.

Turns out, banking is highly regulated. Who knew?

This is Morgan (senior designer) running through scenarios on the window.

"This is the customer's first experience. Getting these interactions right increases the odds that families use and love our app."


Gentry Davies, CEO

Prototyping

Wireframing for this project began in the high-fidelity stage because of the simplicity of the designs. I really wanted to avoid distracting from the usefulness of the flow. The design was very minimal and stayed that way until the final designs.

User tests & feedback

We asked a few users to go through the flow and give us feedback in real time while we took notes. The feedback was incredibly valuable, and allowed us to note where users were confused, misunderstood instructions, or felt friction.

I took the notes from these meetings to refine our prototypes to test again.

Iterations

Based on feedback from users, I researched best practices that could help avoid the friction they had felt. I minimized the steps taken to sign up, streamlined the application process, and iterated again and again on the copy. After many iterations, we found a version that reduced sign-up time by nearly 15 minutes, and was intuitively easy to use. Below is an example of a single page with 11 versions.

Iterations: First page of the sign-up flow

  • 1

    Original

  • 2

    Removed tagline

  • 3

    Removed button icon

  • 4

    Added sign-up to browser

  • 5

    Filled state

  • 6

    Created invalid input warning

  • 7

    Added context + legal name

  • 8

    Added preferred name field

  • 9

    Tested different "name" checkbox + simpler UI

  • 10

    Added card context to name

  • 11

    Re-added context, changed checkbox to reflect legal name

  • 1

    Original

  • 2

    Removed tagline

  • 3

    Removed button icon

  • 4

    Added sign-up to browser

  • 5

    Filled state

  • 6

    Created invalid input warning

  • 7

    Added context + legal name

  • 8

    Added preferred name field

  • 9

    Tested different "name" checkbox + simpler UI

  • 10

    Added card context to name

  • 11

    Re-added context, changed checkbox to reflect legal name

Final designs

After tests had achieved our desired results, I presented my findings and designs to the Senior Designer, CEO, and Lead Engineer to get final feedback and discuss implementation. Final designs were approved unanimously.

Documentation & handoff

Following final sign off, I documented each page and prepared them for developer handoff. The first pages defined typical padding and margins, and each page had notes defining components to be used, copy to be used, and other specifications.

I create exceptional digital experiences & highly usable products that increase value & revenue by engaging users.

© 2024 Wyatt Thacker. All rights reserved.

I create exceptional digital experiences & highly usable products that increase value & revenue by engaging users.

© 2024 Wyatt Thacker. All rights reserved.

I create exceptional digital experiences & highly usable products that increase value & revenue by engaging users.

© 2024 Wyatt Thacker. All rights reserved.