Onboarding
Redesigned Onboarding application for seamless user sign-up and account creation

01 / Overview
As the lead developer for the Onboarding project, I was tasked with rewriting our existing sign-up application to align with our brand's new design and enhance the user experience. The Onboarding application serves as the primary gateway for new users from our main website, guiding them through account creation and enabling access to our Connect portal, where they can manage their accounts.
Project Scope:
The new Onboarding application was built using a Kotlin API and a React frontend, leveraging the reusable Kotlin Base and React Base projects that I had previously developed. The project introduced a fresh, modern design to match our brand's rebranding initiative and improved the overall sign-up flow for users.
Dual Sign-Up Workflows:
Inbound Workflow: Streamlined sign-up process directly from the main website, providing a smooth and intuitive user experience.
Outbound Workflow: Enabled targeted sign-ups for specific leads, allowing a customised and efficient onboarding process for different user segments.
Verification System: Integrated with Vonage for SMS and Mandrill for email OTP (One-Time Password) notifications, ensuring secure and reliable user verification.
Component Library: To support this and future projects, I also developed a new organisational Storybook project. This component library established a unified design system and allowed for the reuse of components across all frontend projects, promoting consistency and speeding up development time.
Analytics & User Tracking: Implemented Segment and PostHog analytics to track user interactions within the form. These integrations allowed for comprehensive session replays, providing valuable insights into user behavior and identifying opportunities for future form updates.
Technology Stack:
Backend: Kotlin API, enabling robust and scalable backend services.
Frontend: React, utilising the React Base project for reusable components and consistent styling.
Analytics: Segment and PostHog for detailed user behavior tracking and analytics.
DevOps: Smooth deployment pipeline with CI/CD, allowing for rapid updates and maintenance.
Impact:
The new Onboarding application not only improved conversion rates by providing a seamless sign-up experience but also strengthened our system's security through reliable OTP verification. The addition of the Storybook component library contributed to future efficiency gains in frontend development across the organization. The analytics integration provided invaluable insights into user behavior, allowing for data-driven improvements to the sign-up process and enhancing the overall user experience.
02 / Problem
The sign-up application, the main gateway from the website into the Connect portal, didn't match the company's new branding and needed a smoother route to account creation.
03 / Decisions
04 / Outcome
The new flow has separate inbound and outbound sign-up workflows, OTP verification via Vonage SMS and Mandrill email, and Segment and PostHog session replays that point to improvements in the form.
05 / Stack
- ReactFrontend
- StorybookFrontend
- KotlinBackend
- AzureDevOps