[UI/UX]: Improve User Onboarding, Feature Discoverability & Authentication Flow

[Ayan281]

Before submitting

• I have searched existing issues to make sure this is not a duplicate.
• I have read the contribution guidelines.

Current UI/UX issue

[UI/UX Enhancement]: Improve User Onboarding, Feature Discoverability & Authentication Flow

Problem Statement

Currently, CodeLens has a visually appealing landing page, but new users may struggle to immediately understand the platform's core purpose, available features, and how to get started.

Additionally, the Login/Signup experience is not prominently surfaced during the user's initial interaction with the platform. Users must navigate through multiple sections before discovering authentication options, which can increase friction and reduce conversion rates.

Current Behavior

• New visitors land on the homepage and are presented with multiple sections containing information.
• The platform's primary value proposition and workflow are not immediately obvious to first-time users.
• Important actions such as Login and Signup are not emphasized early in the user journey.
• Feature discovery requires excessive scrolling and exploration.
• Users may leave the site without understanding how CodeLens can help them.

Why This Improvement Is Needed

A strong onboarding experience is critical for developer-focused platforms.

Improving feature discoverability and reducing authentication friction can:

• Increase user engagement.
• Improve user retention.
• Reduce bounce rates.
• Help contributors, students, and developers understand the platform faster.
• Create a clearer path from visitor → user.

Proposed Solution

1. Add a Quick Product Overview Section

Introduce a concise section near the Hero area explaining:

1. Connect GitHub
2. Connect LeetCode
3. Connect Codeforces
4. Receive AI-powered insights and roadmap

This helps users instantly understand the workflow.

2. Improve Feature Discoverability

Create a dedicated "Key Features" section with visual cards for:

• Unified Developer Analytics
• AI Growth Roadmap
• Coding Progress Tracking
• Competitive Programming Insights
• Leaderboards & Consistency Tracking

3. Enhance Authentication Visibility

Consider introducing:

• A prominent "Get Started" CTA.
• Authentication modal/popup triggered from Hero CTA.
• Faster access to Login/Signup without navigating away from the landing page.

4. First-Time User Guidance

Add onboarding elements such as:

• Feature highlights.
• Interactive walkthrough.
• Quick-start checklist.

Expected Outcome

• Better onboarding experience.
• Higher signup conversion rate.
• Improved feature visibility.
• Reduced confusion for first-time visitors.
• More intuitive user journey.

Additional Notes

This enhancement focuses on improving overall UX, onboarding flow, and feature discoverability while maintaining the existing visual design language of CodeLens.

Proposed improvement

The onboarding experience should clearly communicate the purpose and workflow of CodeLens within the first few seconds of landing on the platform.

Proposed improvements include:

• Introduce a "How CodeLens Works" section near the hero area.
• Add visual feature cards highlighting the platform's core capabilities.
• Surface Login/Signup actions more prominently through a primary CTA.
• Consider using an authentication modal or quick-access authentication flow instead of requiring users to navigate away from the landing page.
• Add first-time user onboarding elements such as guided feature highlights or a quick-start checklist.
• Improve information hierarchy so users can easily understand what the platform does, why it is useful, and how to get started.

The goal is to reduce onboarding friction while preserving the existing visual design and branding.

Screenshots or mockups

No response

Responsive behavior considerations

Desktop

• Display the onboarding workflow and feature cards in a multi-column layout.
• Keep Login/Signup CTA prominently visible within the hero section.
• Authentication modal should remain centered and accessible.

Tablet

• Convert feature sections into responsive grids.
• Maintain clear CTA visibility without excessive scrolling.

Mobile

• Stack onboarding sections vertically.
• Ensure feature cards remain readable and touch-friendly.
• Authentication modal should be fully responsive and optimized for smaller screens.
• Reduce unnecessary scrolling required to understand the platform's purpose.

The experience should remain consistent across all screen sizes while maintaining usability and accessibility.

Accessibility considerations

• Ensure all interactive elements are keyboard accessible.
• Maintain proper focus states for buttons, links, and modal interactions.
• Use semantic HTML elements where appropriate.
• Ensure sufficient color contrast for readability.
• Support screen readers through proper ARIA labels and landmarks.
• Respect reduced-motion preferences for onboarding animations and transitions.
• Authentication modals should include focus trapping and keyboard navigation support.
• Maintain WCAG-compliant accessibility standards across all onboarding components.

Additional implementation notes

Potential implementation areas:

• Landing Page / Explore Page
• Hero Section
• Authentication Components
• Navigation CTA Flow
• Mobile Responsiveness

I would like to work on this issue under GSSoC'26 and can provide both UI/UX improvements and frontend implementation while maintaining design consistency with the existing CodeLens branding.