Home

UI/UX

Graphic Design

Contact

Home

UI/UX

Graphic Design

Contact

Dynamic Login Page Enhancement

Dynamic Login Page Enhancement

Creating an easy method for users to login using OTP or Password, depending on the credentials they enter.

Role: UX/UI Designer

Skills & Tools:

  • Figma: Research, Wireframing and Prototyping

Overview

Overview

Overview

Our client requested to implement OTP login alongside our existing password-based login. The enhancement needed to accommodate both email and phone number credentials, with constraints on how each could be used.

Rather than introducing additional tabs or screens, I chose to design an adaptive login flow that responds to user input, allowing new functionality to be added while keeping the login experience simple, familiar, and uncluttered.

Our client requested to implement OTP login alongside our existing password-based login. The enhancement needed to accommodate both email and phone number credentials, with constraints on how each could be used.

Rather than introducing additional tabs or screens, I chose to design an adaptive login flow that responds to user input, allowing new functionality to be added while keeping the login experience simple, familiar, and uncluttered.

Goals

Goals

Goals

  1. Introduce OTP login: Add OTP login alongside the existing password flow to support both email and phone number credentials, while preserving current login behaviour.

  2. Keep the login experience familiar: Avoid adding new tabs or pages, ensuring the login screen remains familiar and easy to navigate.

  3. Clarify credential-based login rules: Use UI and visual feedback to communicate which login methods are available, preventing login errors.

Before enhancement (Left) vs After enhancement (Right)

Before enhancement (Left) vs After enhancement (Right)

Our Considerations

Our Considerations

Our Considerations

  1. The existing login page already uses tabs to differentiate between Live and Demo environments, which limited the available space for introducing additional tabs for login methods.

  2. Adding another layer of tabs means more visual clutter and could make the login page feel overly complex.

  3. A full UI overhaul would require users to relearn a familiar login flow, increasing friction for existing users.

  4. The design needs to clearly communicate which credentials are compatible with which login methods, without lengthy explanayions.

Researching and Validating Points

Researching and Validating Points

To ensure the login enhancement aligned with industry expectations and technical feasibility, I conducted a review of authentication flows across major trading platforms, including Binance, OKX, moomoo, and Tiger Trade.

The research showed us:

  • How different platforms handle multiple login methods within a single entry point

  • Patterns used to reduce clutter in login flows

Following the research, I worked closely with the front-end development team to discuss which approaches were most viable within our existing architecture.

User input phone number (Left) vs User inputs email (Right)

User input phone number (Top) vs User inputs email (Bottom)

Our Solution

1. Credential Detection & Adaptive UI

  • Designed the login input to detect whether the user entered an email or phone number.

  • Based on the detected credential type, the interface dynamically updates available login actions.

  • This ensures users are only presented with valid login methods, reducing confusion and preventing errors.

1. Credential Detection & Adaptive UI

  • Designed the login input to detect whether the user entered an email or phone number.

  • Based on the detected credential type, the interface dynamically updates available login actions.

  • This ensures users are only presented with valid login methods, reducing confusion and preventing errors.

2. Clear Call-to-Actions & Method Selection

  • For email credentials, users are given a choice between logging in via OTP or Password.

  • For phone number credentials, users can only login via OTP.

  • By adapting CTAs in context, users can proceed naturally without additional friction.

2. Clear Call-to-Actions & Method Selection

  • For email credentials, users are given a choice between logging in via OTP or Password.

  • For phone number credentials, users can only login via OTP.

  • By adapting CTAs in context, users can proceed naturally without additional friction.

3. Reduced Page Complexity

  • The solution avoided adding new tabs or screens, preserving the existing layout.

  • This kept the login experience familiar, while still supporting expanded functionality.

  • Users could complete login without switching contexts or navigating additional layers.

Results

  • Simplified Login Decisions: Users are only shown login options that are relevant to the credentials they enter, reducing confusion and missteps.

  • Cleaner Login Experience: Dynamic updates to the login interface eliminated the need for additional tabs or pages, keeping the flow lightweight and focused.

  • Clearer Credential Rules: Login constraints are communicated through interaction and UI behavior, rather than explicit instructions.

  • Scalable Login Framework: The adaptive structure allows future authentication methods to be added without redesigning the entire login experience.

Some points of improvements we've made on just the main page.

Some points of improvements we've made on just the main page.

Key Learnings

Key Learnings

Good UX Can Absorb Complexity: Even with multiple credential types and rules, thoughtful interaction design can keep the experience simple and intuitive.

Small Enhancements Have High Impact: Improving a core flow like login can significantly affect usability without requiring large visual or structural changes.

Back to home

Create a free website with Framer, the website builder loved by startups, designers and agencies.