Frictionless Signup
The signup page was a risky page to redesign as this will have direct impact on conversion; If the page is un-optimised or problematic in any way, this could serve as a bottle-neck to signup and have potentially massive repercussions for business. The market however had moved in a direction of simplification. Removing all obstacles between the customer and the application in order to optimize conversion - in other words reducing friction from the signup process.
With this market change, we felt confident that making the change to Capsule's own signup page was the right next step in exploring ways to increase conversion and growth. This also fits with Jakob's Law and familiarity bias whereby we could leverage existing mental models and design patterns already familiar to customers in our signup process.
First we needed to identify the issues with the existing design.
Agile Design
A small team consisting of myself as design lead, two developers, a tech lead and the CEO ensured the design, technical and business requirements could be equally discussed and considered throughout this project.
A quick and regular discussion process allowed the team to quickly evaluate new ideas and designs in response to changing knowledge and understanding and quickly change where necessary.
Low-fidelity wireframes and prototypes helped ensure the user journey and information architecture of the signup process felt right before moving onto high-fidelity prototyping.
Following design and prototype cycles, the build process was a undertaken by myself, and two developers who quickly iterated the design to a prototype state where it was regularly released onto a staging environment for internal feedback from a wider-audience.
The old design
The previous design had remained virtually untouched for a while, and whilst it served its purpose, Capsule and the market in general was moving in a direction that meant that this design was no longer fit-for-purpose.
Key Design Isssues
- Information Density - The amount of pre-signup information a customer needed to enter was simply too much and was a cause of likely cause of high drop-off and bounce rates and ultimately a cause of friction between them and the app.
- Unnecessary Information - Billing details were required up-front. This is a source of friction to potential signups and can deter customers who just want to explore the app before signing up.
- Un-optimised and inacccessible design - The design of the signup for didnt facilitate the customer in signing up nor meet WCAG AA guidelines. In addition, there were opportunities to improve the design around user error prevention. We also had an opportunioty to explore the 'Aesthetic-Usability Effect'
- Not responsively optimised - The form was not optimised for both desktop and mobile devices. Even though the vast majority of Capsules customers are using a desktop, the market trend is continually moving towards mobile devices.
- Dated user journey - The user post-signup needed to visit their email in order to retrieve a link they can then navigate to in order to log-in. This was another source of friction for the user.
- Untrackable progress - This project offered an opportunity to allow Capsule to track the progress of signups and offer greater future opportunities for optimisation.
Goals
- Reduce information volume - Reduce the amount of information a new customer has to enter before being able to access their Capsule account. Which will have a knock on effect on other goals directly.
- Save time - Reduce the amount of time a new customer spends entering their information. This included removing the need to enter billing information up-front and pre-populating data where possible.
- Update the UI - Present a new design of the signup page that visually entices users to signup by keeping the look and feel as simple as possible but also incorporating a fresh and friendly feel with more branding elements in place.
- Increase conversion - Reduce bounce and drop-out rate from the signup process and Increase conversion overall for payed payment plans that asked for payment card up-front.
- Reduce spam and churn - Protect against spam and possible nefarious users by introducing features into the signup flow that captures suspicious signup and required email verification up-front.
- Uninterupted user flow - Provide frictionless way for customers to go straight into the app after signing up. Removing the need to go elsewhere beforehand and continue to the onboarding experience.
- Mobile optimisation - Optimise the design and front-end to be more friendly towards customers on a tablet or mobile device - the customer base at the time were primarily desktop users.
Design considerations
Early prompt for an email address helps capture the users investment and interest early. In addition saving time later by using the email address to pre-populate other form fields.
The principle of 'Chunking' was applied here whereby there is an increase chance of a customer completing a complex form (or sign up process in this case) by splitting the task up into 'Chunks' of smaller pieces, this has the effect of increasing the perceived simplicity of the process and speed of which it is completed.
Following Hick's Law - Reducing the complexity and number of decisions to make during the signup process should reduce abandonment.
Merging first and last name into one field reduces the number of inputs visually and reduces effort from the user.
Password field is given a reveal button and is reduced to just one input saving time and reducing the potential for user error.
Finally, all billing details were deferred to after the user has signed up and completed their trial period.
Information Hierarchy
Understanding the information hierarchy of the signup process was key to enabling us to simplify the signup process and adopt a modern process.
There was an equally important desired outcome from a business point-of-view to reduce the amount of spam account that were created. This outcome had technical and design implications in that there was a need to include a form captcha prompt and also include an extra step for potentially problematic signup attempts.
Prototyping
Using Figma, high fidelity prototypes were created and shared with other members of the project team.
Flows were prototyped which included edge-cases. For example, when a user has used a black-listed email address, how does their experience differ than users who have not.
This allowed me to gradually tweak the general UI, spacings, line heights, font sizes and colour choices but offer clear directions for the engineers to focus towards.
Design considerations
Using Figma, high fidelity prototypes were created and shared with other members of the project team.
Flows were prototyped which included edge-cases. For example, when a user has used a black-listed email address, how does their experience differ than users who have not.
This allowed me to gradually tweak the general UI, spacings, line heights, font sizes and colour choices but offer clear directions for the engineers to focus towards.
A/B Testing
The new design was released as an A/B test against the existing linear form design over a period of 4 months with a sample-size of over 60,000 customers.
Paid signups saw an increase in overall conversions across all payed plans. Whilst not a massive improvement the quality of those customers have proven in the past to be higher and therefore more likely to convert to paying customers at the end of their trial period.
There was a significant increase in free account signups, whilst the quality of those customers is generally lower than paid customers, the new signup still allowed more people the chance to experience Capsule CRM
Hotjar session recordings
Hotjar was used as the tool of choice to monitor anonymous public usage, drop-off rates and individual customer sessions to check for usability issues.The tool proved invaluable in investigating issues based on click rate, a number of unexpected usability issues were identified and quickly fixed.
One area that was amended post-launch was the way in which customers change their Capsule account domain name, despite having a clearly marked link 'change' we noticed in recordings that customers were clicking the url instead, this prompted us to make a swift change that allows the url or the 'change' link to be clicked in order to interact with the component.
Key takeaways
This project was a close collaboration between a number of stakeholders. Back-end developers and business owners worked in quick design cycles with myself to quickly identify user-flows - outlining the technical requirements and limitations which were quickly fed-back and influenced the designs further ideation.
This was a valuable experience for me and the organisation as it showed how regular communication, updates, timely workshops and close working relationships between design and development teams could result in a high quality end user experience in a relatively short period of time. This process served as a template for future projects that I undertook at Capsule.