90fa9443d4
- Added redirect functionality to the LoginForm component, allowing for dynamic redirection after login. - Updated PublicInternetConfigure and PublicSimConfigure views to utilize modals for user authentication, improving user experience by avoiding full-page redirects. - Enhanced PublicInternetPlans and PublicSimPlans views with updated button labels for clarity and consistency. - Refactored plan configuration views to display detailed plan information and prompt users for account creation or login, streamlining the onboarding process.
99 lines
3.4 KiB
Markdown
99 lines
3.4 KiB
Markdown
# Shop Experience UX Improvements
|
|
|
|
## Overview
|
|
|
|
The shop experience has been significantly improved to be more user-friendly and less disruptive. Instead of redirecting users to a full signup page when they want to configure a plan, we now show plan context and use a modal for authentication.
|
|
|
|
## Key Improvements
|
|
|
|
### 1. **AuthModal Component** ✨
|
|
|
|
- **Location**: `apps/portal/src/features/auth/components/AuthModal/`
|
|
- **Purpose**: Reusable modal component for signup/login that doesn't break the shopping flow
|
|
- **Features**:
|
|
- Overlay design that keeps users in context
|
|
- Toggle between signup and login modes
|
|
- Automatic redirect after successful authentication
|
|
- Customizable title and description
|
|
- Responsive design
|
|
|
|
### 2. **Improved Configure Pages**
|
|
|
|
Both `PublicInternetConfigureView` and `PublicSimConfigureView` now:
|
|
|
|
- **Show plan information** before requiring authentication
|
|
- Plan name, description, pricing
|
|
- Plan features and badges
|
|
- Visual plan summary card
|
|
- **Use modal authentication** instead of full-page redirects
|
|
- Users stay on the configure page
|
|
- Can see what they're signing up for
|
|
- Better context preservation
|
|
- **Better loading and error states**
|
|
- Skeleton loaders while fetching plan data
|
|
- Clear error messages if plan not found
|
|
|
|
### 3. **Improved Plan Card CTAs**
|
|
|
|
- Changed button labels from "Create account" to "Get started" (more inviting)
|
|
- Plan cards now link to configure pages instead of directly to signup
|
|
- Configure pages show plan context before requiring auth
|
|
|
|
### 4. **Better User Flow**
|
|
|
|
**Before:**
|
|
|
|
1. User browses plans
|
|
2. Clicks "Create account" → Redirected to full signup page
|
|
3. Loses context of what plan they selected
|
|
4. Must navigate back after signup
|
|
|
|
**After:**
|
|
|
|
1. User browses plans
|
|
2. Clicks "Get started" → Goes to configure page
|
|
3. Sees plan details and context
|
|
4. Clicks "Create account" → Modal opens
|
|
5. Completes signup/login in modal
|
|
6. Automatically redirected to authenticated configure page
|
|
7. Never loses context
|
|
|
|
## Technical Details
|
|
|
|
### Components Created
|
|
|
|
- `AuthModal` - Reusable authentication modal
|
|
- Updated `PublicInternetConfigureView` - Shows plan context with modal auth
|
|
- Updated `PublicSimConfigureView` - Shows plan context with modal auth
|
|
|
|
### Components Updated
|
|
|
|
- `LoginForm` - Added `redirectTo` prop for modal usage
|
|
- `PublicInternetPlans` - Improved CTAs and redirects
|
|
- `PublicSimPlans` - Improved CTAs and redirects
|
|
|
|
### Key Features
|
|
|
|
- **Context Preservation**: Users always see what plan they're configuring
|
|
- **Progressive Disclosure**: Plan details shown before requiring authentication
|
|
- **Non-Blocking**: Modal can be closed to continue browsing
|
|
- **Seamless Flow**: Automatic redirect after authentication maintains user intent
|
|
|
|
## Benefits
|
|
|
|
1. **Better UX**: Users don't lose context when authenticating
|
|
2. **Higher Conversion**: Less friction in the signup process
|
|
3. **Clearer Intent**: Users see what they're signing up for
|
|
4. **Professional Feel**: Modal-based auth feels more modern
|
|
5. **Flexible**: Easy to reuse AuthModal in other parts of the app
|
|
|
|
## Future Enhancements
|
|
|
|
Potential improvements for the future:
|
|
|
|
- Add "Continue as guest" option (if business logic allows)
|
|
- Show more plan details before auth (pricing breakdown, installation options)
|
|
- Add plan comparison before auth
|
|
- Remember selected plan in localStorage for returning visitors
|
|
- Add social login options in the modal
|