Product Design to Improve Sign-Up Form Creation

Product Design to Improve Sign-Up Form Creation

Product Design to Improve Sign-Up Form Creation

Redesign

Redesign

Product Design Lead

Product Design Lead

UX Research Support

UX Research Support

A classroom table with a laptop and phone displaying the redesigned assignment workflow

Overview

I led the design of a sign-up forms dashboard and editor to enable small business to grow their list of contacts.

The team had a goal to redesign the sign-up form creation experience to make it more intuitive and flexible, while reducing support calls and spam attacks.

Full case study available upon request

ROLE

Lead User Experience Designer

RESPONSIBILITIES

Led end-to-end design of sign-up forms dashboard and editor

Expanded my skill set to include my first usability study under the guidance of a UX Researcher

TEAM

1 UX Designer, 1 UX Researcher, 3 Product Managers, 7 Software Engineers, 2 QA Engineers

Key Results

-20%

support calls

-100%

spam attacks

Key Results

-20%

support calls

-100%

spam attacks

Approach

Known Pain Points

Customers often contacted Support confused by how the Sign-Up Forms dashboard was organized.

They didn't realize a form had already been created

CTAs made it feel mandatory to create a new form

Users didn't understand that one form was really a set of form fields and could serve multiple purposes

Rapid Ideation

I explored layouts and patterns with both the existing structure as well as a changed structure to determine a direction for high-fidelity prototype testing.

A paper sketch of the new design that has gradebok category on the left and on the right is the assignment details with a divider to show the interaction when a teacher selects in individual students and sees a list of all students in the class
A paper sketch of the new design that has gradebok category on the left and on the right is the assignment details with a divider to show the interaction when a teacher selects in individual students and sees a list of all students in the class
A paper sketch of the new design that has gradebok category on the left and on the right is the assignment details with a divider to show the interaction when a teacher selects in individual students and sees a list of all students in the class

Existing structure with all actions visible

A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block
A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block
A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block

Changed structure with all form types equal

A paper sketch of the new design that has gradebok category on the left and on the right is the assignment details with a divider to show the interaction when a teacher selects in individual students and sees a list of all students in the class
A paper sketch of the new design that has gradebok category on the left and on the right is the assignment details with a divider to show the interaction when a teacher selects in individual students and sees a list of all students in the class
A paper sketch of the new design that has gradebok category on the left and on the right is the assignment details with a divider to show the interaction when a teacher selects in individual students and sees a list of all students in the class

Changed structure with hierarchy of form types

Prototype, Test, Iterate

Round 1

I created an interactive prototype and led 5 moderated usability tests that did not resonate with users, quickly invalidating this concept.

A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block
A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block

“

This is where I shut down

“

This is where I shut down

“

I'm overwhelmed

“

I'm overwhelmed

Round 2

In an effort to test the two different structure ideas, I partnered with a UX Researcher who conducted moderated A/B test that revealed users had no pre-defined mental model.

A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block
A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block

Existing structure: Form fields serve multiple purposes

A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block
A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block

Changed structure: Each form type can have unique fields

“

These both make perfect sense

“

These both make perfect sense

“

I have no preference

“

I have no preference

“

I have no preference

Round 3

Since I had flexibility with the dashboard structure, I moved forward with the changed structure and then partnered with a UX Research who conducted moderated usability study focusing on the form editor which resonated with users, giving a sense of clarity and familiarity.

A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block
A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block

Dashboard with card layout

A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block
A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block

Form type selection

A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block
A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block

Editor with real-time preview

“

That was easy

“

That was easy

“

It's just like the email editor

“

It's just like the email editor

Launch

I partnered with Engineering and QA to ensure a smooth, high-quality launch.

A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block
A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block
A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block

Before

A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block
A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block
A paper sketch of the new design that has gradebook category on the left and on the right is a section with assignment details and an option to add another assignment detail block

After

Results

-20%

support calls

-100%

spam attacks

Optimized

form editor was resused throughout the platform

-20%

support calls

-100%

spam attacks

Optimized

form editor was resused throughout the platform

-20%

support calls

-100%

spam attacks

Optimized

form editor was resused throughout the platform

The new dashboard and form editor are proving to be a success, with twice as many forms being created.

Create a free website with Framer, the website builder loved by startups, designers and agencies.