Login SDK Suite
A collection of multi-channel login SDKs and product features I designed for OTPless, an identity and authentication SaaS company.
Challenge
Create a configurable multi-channel Login Module, complete with a dashboard for customization and management of the login suite.
Impact
More than 6,000 SMEs have created a login page using OTPless, with over 30 million users logging in each month using this product.
Company
Overview
As the Founding Designer at OTPless, I focused on enhancing login journeys, authentication processes, Enterprise Dashboards, and marketing efforts to elevate the customer experience. These foundational products enabled the company to grow from zero to over 30 million authentications per month. As the sole designer, I was responsible for transforming a blank canvas into a finished product, developing a comprehensive design system, and delivering a seamless end-to-end product experience. Below is a collection of those experiences, which were ideated, designed, and shipped over a year of iterative processes.
Login Module Design
Standard login experience
A one-tap login experience allows first-time users to simply enter their phone number and get verified through Silent Network Authentication. This method reduces the typical OTP-based login time by 6 to 9 seconds.
Auto channel fallback mechanism
When the system detects a delivery failure for a specific channel, it automatically triggers another channel while maintaining a seamless state representation on the UI. This has resulted in an over 8% increase in conversion rates and a delivery rate exceeding 99% across merchants.
Other Variants
The design of the login page encompasses different states, methods, and configurations tailored for various devices.
Login page configuration via dashboard
To customize the entire login page experience, I created a dashboard that allows for configuring login methods, UI customization, and analytics.
Brand color customization
Problem
Brands desired complete customization of the login page to align with their existing applications. This includes the ability to customize the color palette. To achieve this, we would need to offer over 36 color customization options, covering everything from button colors to the hover states, error messages, and various other state management variants. Users may feel overwhelmed when faced with changing 36 colors to achieve a consistent look.
Solution
I developed a color palette generation system that accepts just 15 colors as input and produces all the necessary states and variants while maintaining approximately 95% accuracy in the branded appearance. This solution was effective for 9 out of 10 customers. For the one client who needed extensive customization, we later introduced a headless SDK.
1. User can define 15 primary colors
2. System generates rest of the colors using if/else logic
Over 30 variants and state colors were developed using a similar method to reduce user input and effectively scale the design system at the SDK configuration level.
Other features
The entire dashboard includes features such as analytics, wallet management, template customization, and access control.
