Form Design for a Women’s Clothing Box Service: A Case Study
Summary: Drawing upon research-based UX guidelines, I redesigned Front Door Fashion’s customer intake web form to improve both the appearance and completion rate.
About The Product
Front Door Fashion is a clothing box style service for women. Based on the information a customer provides in their style profile (web form), Front Door Fashion's clothing stylist will create 3-5 personalized looks specifically for that customer.
The Problem with the Existing Web Form
Difficult to Use and Poor Visual Design
The original style profile web form was not user friendly, and the visual design failed to adequately convey respect in the brand or build trust with customers.
Not Mobile Friendly
The web form application didn’t accommodate users on their phones.
Before & After
My Role
I was the UX designer for this project. I communicated with the company’s co-founder and web developer. My responsibilities were to:
- Improve the user experience of the customer intake form, also called the “Style Profile.”
- Redesign the form so that it looks professional, attractive, and is easy to use. The form should build trust with users and motivate them to answer all the questions.
- Design a mobile friendly version of the form.
The Solution
I chose the following solutions based on the project’s requirements, research-based UX guidelines, design principles, and best practices of web form design1.
Provide a Clear Path to Completion
The goal of a web form is to complete it. That's why it is important to design the form in a way that clearly shows the user how the form can be filled out and what their progress is at each point in the process.
I accomplished this three ways: by including progress indicators, scan lines, and a start page.
Progress Indicators
Because the questions on the form were spread out over several pages, it was important that users be able to know their progress at any given time while filling out the form. Therefore, I added 3 types of progress indicators:
- SCOPE - the total number of steps on the form is displayed to give the user a sense of scope.
- POSITION - the link decoration varies to indicate whether the status of that step is completed, current, or incomplete. This allows the user to know how many steps they've completed and how many remain.
- STATUS - the message “Your progress is automatically saved” was added to reassure the user that their efforts are not lost.
Progress indicators on the navigation bar allow users to know where they currently are in the process.
Scan Lines
I left-aligned and spaced out each question in a consistent way so as to provide a clear visual pathway (scan line) from one question to the next, enabling users to quickly process all of the questions on the page. Scan lines help users stay focused and make completion of the form feel effortless, thus increasing form completion rates.
Left-aligned content creates a visual scan line that gives clear direction from one question to the next.
Start Page
I designed a start page to let users know up front what they can expect to encounter on the form. The start page answers frequently asked questions such as how many questions there are on the form, how much time the form takes to complete, whether users can save and finish the form later, and what happens after the form is completed.
After
The new start page let's users know what to expect and answers frequently asked questions.
Distinguish Primary from Secondary Actions
Buttons that initiate secondary actions can be frustrating if accidentally clicked by the user. For this reason, they should be clearly distinguished from those that initiate primary actions.
Primary Actions
Primary actions move users toward accomplishing the form’s primary goal: completing the form. An example would be the “Continue” button, which takes the user to the next step in the process. Another example would be the “Finish” button, which submits all of the user’s answers as the final step.
Secondary Actions
Secondary actions allow users to achieve secondary goals such as modifying data they previously entered. An example is the “Go Back” button, which takes the user back one page. Another example would be the “Reset” button, which clears all the user’s answers. For this project, “Go Back” was needed so that the user could navigate back and forth if they decided to edit their answers.
Label All Required Fields
Eliminate frustration by making it obvious which fields are required.
Use a Label that Says “Required”
I used a red word label to clearly indicate each required field on the form. This is better than using an asterisk (*), which can be open to interpretation.
If the required fields aren’t clearly labeled, a user might submit the form only to receive an error message—leading to unnecessary frustration. The color red signals importance, and using the word “Required” ensures that the meaning is clear and is accessible even to color blind users.
Display Error Messages
Error messages let users know when an error has occurred and how they can fix it.
Summarize Errors at the Top of the Screen
When a user submits the page but forgets answering a required question, the page should automatically scroll to the top and prominently display a summary of which questions were omitted. Error messages should not be presented in pop ups because these can disappear.
Highlight Unanswered Questions
In addition to summarizing errors at the top of the screen, I’ve alos highlighted each unanswered question in red so the user doesn’t have to search for it.
Use Good Visual Design
Good visual design boosts users’ confidence in the form and gains their trust.
Use a Grid to Align and Space Elements
I used an 8px grid with a 4px baseline grid to consistently space the text and other page elements. Using a grid provides an aesthetically pleasing and predictable rhythm to the page.
Give Each Option a Large Touch Target Area
I gave each option a touch target (clickable) area of 44px. This provides reliable interaction by making it easy for users to select an option (especially mobile users).
Use Brand Colors
Users will arrive at this web form via a branded email or directly from the company's website, so I added brand colors for identification purposes and to keep the user experience consistent.
The Outcome
This client did not communicate whether the form improved or not after the redesign. I would recommend tracking:
Completion Rate
What percent of people completed the form after versus before the redesign? Did the rate improve?
Drop Offs
On what pages or sections of the form do users most often stop and leave without having completed the form? Such “drop offs” are inevitable, but knowing where in the form they tend to occur can inform future redesigns that make a form even more effective.
Qualitative Feedback
I advise using both user feedback and metrics to identify new testing ideas for improving the form.
Challenges
One Question Vs. Many Questions per Screen
I considered displaying one question per screen, but this made the form too long. Instead, for each category, I used one page that contained multiple questions. The navigation reflects these categories.
Displaying Unanswered Questions When Returning
If the user decides to finish the form later, they need to be able to quickly find their unanswered questions when they return. They should be able to clearly see which questions remained unanswered, on which pages, and how to easily get to those questions. I recommend adding this feature.
Things I Didn’t Use
One Question Per Screen
Displaying one question per screen made the web form too long. Instead, as mentioned above, I included several questions per screen.
Observations
Minimize Distractions
The “before” and “after” screenshots above show that I removed unnecessary social media links and other website navigation features because these were not required to complete the form. Minimizing distractions reduces the number of “drop offs” and helps users more clearly see a path to completing the form.
Let Users Know What to Expect
It is essential to be clear and concise with the form’s design and instructions.
Make It Easy for Users to Return
Not everyone will complete the form the first time they visit. Offer them an effortless way to return, see where they left off, and finish the web form.
Design for Mobile Devices
Many people will use the form on their mobile devices. Take a look at your analytics to determine this percentage of users, as it will usually be well worth the investment to design forms with mobile users in mind.
References
1 - These web form design guidelines, like some of the others mentioned in this case study, are referenced from Luke Wroblewski’s informative book on this topic, Web Form Design: Filling in the Blanks (Rosenfeld Media, 2008). My approach in this case study also reflects in some measure that of Jessica Enders’ Designing UX: Forms (Sitepoint Pty. Ltd., 2016).