Legacy Signup Process
Research
A project to improve conversions of allSpacebar media’s product sign up pages
- A heuristic review of the current sign-up process was held
- Heat maps, visitor recording and funnels analysed
- Competitor research was held to highlight best practices
- A report was written to highlight areas for improvement
- Quick wins were championed for the Dev team Critical blockers were raised
Design
- Quick mockups created based on findings was created
- Subject areas were clustered
- Usability was improved throughout entire journey error, in-progress and helper states created.
- Report presented to stakeholders
- Stories created for UI designers
Usability Enhancements
Improved address input – V2
The previous address field misses ‘find address’ and ‘enter address
Modern address input fields allows users to simply write in the address or postcode and validates data. For those who prefer to input an address in full, “enter address manually’ also appears. The new proposed solution pictured below.
Whats changed:
The refined 3-stage sign-up process is: cleaner, shorter, flows more naturally, clusters related information into defined stages, shows users which stage they are in more clearly, allows users to navigate backwards more easily, and has a more intuitive user interface
Whats new:
New Title field added (We can surmise gender from Title, helping to remove a contentious field)
Whats optional:
The calendar picker and promo code validation do not currently exist, so can be created when there is Dev capacity/downtime to do so
Currency is showing, but recommended to be removed entirely and placed within settings/ appear at first deposit
Seeing as we already had these elements in sketch, mid fidelity prototypes could be quickly created leaving the finishing touches for after user testing for example for refined UI and iconology would be applied at later stages. Its key to work quickly at this stage so more rough UI is acceptable to convey usability improvements
Mid Fidelity UX Prototypes
Alert states
- The split-screen below shows the form as it is being filled-in, completed and error states
- Each field has a clear ‘cursor line’ to help users see where they are writing
- All fields have clear, explainer text present inside each field
- Contextual helper text appears below a field as a user is in it, giving more information on what is needed
Follow up steps
User testing and Split URL testing would be the next phase of the project to ensure the enhancements are allowing users to signup with greater ease than previously.
We could also use form tracking in Hotjar to ascertain whether the new form has quicker fill times and compare previous stats of particularly troublesome fields which showed users taking the most time to complete for example address and the old version of phone input which we found users were confused by.