Capsule frictionless signup redesign

UI Design
Design Systems
Usability Testing
Role: Product Designer
Duration: June 2019 - Oct 2019

Introducing a new signup flow that minimizes the amount of time, information and effort that a customer needs to provide in order to sign up to and start using Capsule.

TLDR

A successful, simplified redesign of Capsule's signup flow that resulted in a over 7 percent increase in the number of conversions through the signup flow.

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, I 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 I could leverage existing mental models and design patterns already familiar to customers in our signup process.

First I 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. I 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 Architecture

Considering the order of different signup steps and the content within each was key in this project. By simply laying out all the information we would need customers to enter from a business and technical standpoint allowed us to cluster each into pages of contextual meaning. This had the further effect of ensuring that no step was considered too information dense to help maintain the feel of a simple process.

It was during this process where the business requirement of reducing the amount of spam accounts was considered further. This outcome had technical and design implications in that I identified a need to 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.

Mobile Design

Referring back to the goals of this project, an optimised mobile signup experience was a high priority. Whilst not designed mobile-first as Capsule's audience were primarily desktop-based, transioning the desktop design to mobile was simple, thanks to the simple approach to the form design.

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' I 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.