Linode Sign Up & Log In 2.0
An refreshed user experience that doubled conversation rates in six months
Context
In Summer 2018, Linode decided to revamp its login and signup experience for a number of reasons:
- The current signup flow looked and felt antiquated. It wasn't responsive, either.
- Recently released GDPR requirements presented new criteria pertaining to user privacy, data, and communication.
- We were in the midst of rolling out a beta version of the Linode Cloud Manager, which had a completely refreshed UI. It made sense to update the login system's visuals as well.
Challenges
Two possible account types are possible with Linode. At its most basic offering, users can sign up with just an email address and have partial access to our product suite. Users who keep a credit card on file have complete access to all of Linode. The account creation and login flow needed to support both experiences.
Architecture and User Flow
After requirements meetings with the product team and company stakeholders, I created a site map to represent the planned architecture for the updated user flow. I worked with our API team and general counsel to make sure the proposal and its content met all of their respective needs. I continued to consult with them while I continued onto wireframes.
GDPR
One of the requirements for the signup flow was GDPR compliance. I had to balance two objectives to design this system successfully. The first was the need to be clear that users were consenting to the collection and processing of their data. The second was to maintain an easy signup process.
One of the first steps in the new signup process requires the user to select their country. Only the policies that that are necessary and relevant to the specific country then appear beneath.
Users must affirm they have agreed to each policy. Until they do so, the call to action is disabled.
High-fidelity designs
Accessible, component-based designs
Company leadership had approved a direction for branding and styles earlier in this process. I referred to the color palette and made a few slight modifications to ensure appropriate color contrast levels according to WCAG 2.0 guidelines.
The frontend developer and I held a workshop to determine form styling. We wanted ours to be as intuitive, frictionless, and accessible as possible. Forms are frequently rife with pain points for users. We had additional considerations to keep sight of too, notably GDPR regulations and security. In addition to maintaining appropriate color contrast levels, we designed, implemented, and documented practices such as:
- Meaningful error messaging
- Tooltips
- Focus and input states
- Field input verification
- Non-intrusive links to support documentation
Style Guide
The frontend developer and I worked closely on this project from the very beginning. We discussed iterative changes, collaborated on the form inputs and interactions, and overall kept discussed new ideas regularly. Documenting this style guide served more as a reference rather than a set of directions by the time I sent it over.
Implementation
The new account creation and login process began to roll out incrementally in late 2018. At the time of this writing, the team has redirected 75% of traffic to the new system, and conversions of paid users has doubled to a rate of 25%.