First Impressions — The Thoughtful Sign Up Form
Redesign exercise for Recurly
You will never get a second chance to make a first impression. -Will Rogers
This quote doesn’t just apply to personal first impressions. When designing, first impressions of a product set the tone and builds trust for the user before they commit to a product. A successful registration form can increase conversion rates and mitigate drop offs that can prevent a user from seeing the value of the product.
NOTE: This is a design exercise from April 2014. I later joined the company as a UI Designer
Design challenge:
Take some time to redesign the first step of the existing Recurly sign-up flow located at https://app.recurly.com/signup.
Overview evaluation:
From a visual standpoint, the design is outdated and lacks the simplicity the rest of the site carries. In evaluating it heuristically, the form can be simplified to minimize confusion, maximize trust and efficiency of completing the form. Initially, there are very few strikingly poor UX choices. In fact, the form clearly conveys familiar design patterns like validations, error messages, instructional text, etc. However, the form appears much more complex than it is intended to be.
Questions:
- Have users dropped off due to error or confusion of messages?
- Have users found password creation to be confusing?
- Is “Vanity URL” a globally recognized term? If so, is it necessary to include instructional copy?
- How often do users click on “sign in” link due to mistakenly landing on the sign up form? Can they locate the sign in link?
- How often do users click on twitter in the footer? To create a focused experience, additional elements that lead the user away from the primary goal of the page can lead to registration abandonment.
Business values:
From testing out the product, in order for a user to use and engage with the actual product, an account must be created. Therefore, the sign up form is a crucial part in the conversion process. Creating a concise, accurate and simplistic form can alleviate confusion and greatly increase conversion rates.
Design solutions:
The goal was to create an experience driven by standard form patterns that help develop a flow that is logical and systematic. I used Luke Wrobleski’s book, Webform Design, for guidance through the process.
Measurable Outcomes:
- Higher conversion rates, lower drop offs
- Quicker form completions
- Increased trust in company brand
Design Process:
With understanding the sections above, I was able to quickly construct a sketch of what the form should look like. With that, I evaluated the company’s marketing website for key elements that I could incorporate. I took a systematic approach to this by thinking about it as components that I could piece together. This idea was derived from Brad Frost’s Atomic Design methodology.
With these components, I was able to efficiently create designs that were thoughtful and driven by the desired outcomes.
As you can see, this version of the form eliminated the instructions and included crucial instructions as inline. The form is also separated into Company Information and Account Information which is done deliberately to create connections. The creation of the company name autogenerates as the URL as well. The rest of the form is aligned with generic form patterns for personal information.
Validation occurs inline for instant confirmation. Error states appear inline as well for clear indications. The final screen shows a completed form where the CTA becomes active.
Post Mortem Evaluations:
What I later learned was the importance of the form label. Users rarely read placeholder text which then means once they click on the form and the text disappears, they no longer know what it is that the form field requires. This was a lesson I never forgot. A good example of integrating labels progressively is shown here.
Looking back on the desired outcomes, the new form should measure up to those goals. The current form on the Recurly site reflects a lot of similarities that are proposed here.
