We created the first automated step to help onboard customers, as we wanted to save the time of Account Managers.
- Scope: Research & Concept
- Role: Research & Visual Identity
- Tools: Figma, Figjam & HTML
- Collaborators: Stakeholders, Product, UX Writer & Development Team
Offer & Terms Page Design
Existing Product & Problem
The initial sign-up process was time-consuming for both new customers and Account Managers, involving a lead form, a vetting process, and a lengthy follow-up form. Customers would require help to set up their account tracking and direct debits.
To improve this, as an interim solution we wanted to try to automate as much of the process as possible, saving time and simplifying onboarding before making further improvements.
Process
Discovery & Research
To understand the onboarding process, the Product Manager organised a meeting with stakeholders, engineers, and the UX team to map out the customer sign-up journey.
Examples of onboarding were shown, but it became clear all current steps were necessary due to Salesforce integration.
I then researched competitor and sister company onboarding flows. The Product Owner and I discussed possible improvements and future enhancements.
Ownership was unclear since the process starts from the main website and customers end up on the web app. With limited quantitative data, we had to base our ideas on assumptions and feedback from account teams.
Ideation
I gathered all data and insights from the initial meeting and brainstorming session, working with the Product Manager to develop ideas. I compiled sketches from the previous meeting to outline what could be achieved within the project scope.
I created form layout concepts and refreshed sign-up/login screens by integrating elements from both the main website and the web app. Given the web app’s lack of imagery and the main website’s conservative use of lifestyle images, I incorporated shapes inspired by the sail motif in our logo.
To maintain focus on the form elements, I aimed to minimize distractions for the user.
Based on feedback, I put more emphasis on responsive design for the form, prioritizing its value for future users despite learning from feedback that most current users used desktop screens. I designed prototypes to demonstrate how the form would adapt across various screen sizes. Focusing on mobile usability, I aimed to refine the step process indicator to enhance UX and reduce scrolling which was a problem with the current stepper we had.
Initial release
[videojs_video url=”https://www.gd86.co.uk/wp-content/uploads/2024/06/signup_release.mov” autoplay=”true” controls=”true” loop=”true”]
In a phased release, we launched the new sign-up form with a cleaner design matching the main website’s style. We integrated web app components for engineering simplicity and refined elements as needed.
Before the release, we presented updates to stakeholders. During these meetings, we successfully reduced the form size. However, we aimed to further minimise it to ensure customers wouldn’t feel overwhelmed.
User Insights
During our phased release of the new sign-up form to a select group of customers, we gathered user insights from quantitative data and user interviews. This helped us identify any challenging touchpoints in the process that could be adjusted to enhance the overall user experience.
Update & Roadblocks
The final component we added to the sign-up form was the capability for customers to set up payment methods, including Direct Debit or card payments.
[videojs_video url=”https://www.gd86.co.uk/wp-content/uploads/2024/06/advertiser_payments.mov” autoplay=”true” controls=”true” loop=”true”]
With the Product Manager, we came up with a plan to streamline the Direct Debit setup process. Previously, customers had to liaise with the finance department to obtain and sign the mandate document.
To simplify this, we proposed automating the process with an e-signature solution to present and obtain signatures for the Direct Debit mandate. I also tailored Direct Debit mandates for our SEPA, US, and Canadian customers to accommodate regional banking requirements.
For the payments section, the engineers used the same provider as other web app processes. Customisation options for the card payment view were limited to embedding it within the app or opening it in a modal. This meant we couldn’t use our preferred design and had to adapt the payment provider’s interface to fit our style.
Outcome
We delivered a solution that significantly accelerated customer onboarding and payment setup, reducing the average onboarding time from 45 days to just 5 days.
With further planned iterations, we aimed to enhance the onboarding process even more.
Key Takeaways
Despite we were able to improve the sign-up UX, even with scope constraints.
Working with the UX writer and Product Owner, we aimed to reduce form fields, but stakeholders insisted on keeping many due to the complex onboarding process.
The late inclusion of engineers for technical analysis on the payments page created design debt, as I had to design prototypes without knowing the payment provider or what was possible to customise.
Uncertainty about project ownership complicated decisions on whether the form should align with the main website or the web app.
