1. Goal
To establish the Mahindra BE 6 as a premium, high-performance electric vehicle through a minimalist, engaging, and high-contrast digital interface, driving user confidence and sales conversions.
2. The Problem
A Heuristic Evaluation of the existing Mahindra BE 6 web page revealed critical issues that hindered user flow, caused significant confusion, and reduced perceived product quality. The primary mission of this redesign was to simplify the complex technical narrative and restore user trust.
3. UX Pain Points
| Area of Failure | Observation & Impact | Design Outcome |
|---|---|---|
| Inconsistent Navigation | The hero image doubled as an uncoordinated ad banner with changing, clickable links leading to different, non-linear parts of the site. | Violation of Predictability and Poor Information Architecture. |
| Poor Textual Contrast | Text overlaid on images often failed WCAG 2.1 contrast standards. | Accessibility Failure and Severe Readability Issues. |
| Non-Uniform Interaction | The page experimented chaotically with mixed scroll effects. | Increased Cognitive Load and Inconsistent Interaction Design. |
| Redundant Content | Key features were duplicated across different parts of the page. | Design System Inconsistency and Frustrating Repetition. |
Inconsistent Navigation
Poor Textual Contrast
4. Design Strategy
Cinematic Futurism and Minimalism. The foundational strategy for the BE 6 redesign was built on two pillars: Minimalist Immersion and Clear Information Hierarchy.
Core Implementation Principles:
- → Reduce Cognitive Load through ample negative space.
- → Establish Premium Immersion with dark-mode interface.
- → Action-Oriented Placement of key CTAs.
5. Style Guide
A comprehensive visual system that ensures consistency across all design elements and establishes the premium, futuristic brand identity.
Color Palette:
Typography Hierarchy:
H1 - Main Heading - size= 28px
H2 - Section Heading - size= 20px
H3 - Subheading - size= 16px
Body Text - size= 14px
6. UI Execution
High Contrast and Structured Components. Execution focused on disciplined styling and component utilisation to ensure scannability and accessibility.
- →Information Presentation: Consolidated all essential features into the header section.
- →High Contrast Colour System: Deep background with crisp white text.
- →Structured Content Modules: Used Card Components and clean tables.
Interactive Product Carousel
Visualize different vehicle colors effortlessly.
Real-time Feedback
Immediate cost for chosen variants.
7. Key Flows: Streamlining the User Journey
| Flow Stage | Redesign Improvement | UX Benefit |
|---|---|---|
| Interest | Exclusive, full-bleed hero image with only price and core CTAs. | Immediate emotional hook. |
| Consideration | Layered disclosure of features with immersive gallery. | Digestible, scannable data. |
| Action | Persistent mid-page CTAs and clear booking modules. | Higher conversion efficiency. |
8. Impactful Results
The implementation of this disciplined and focused UI/UX design is anticipated to deliver measurable improvements in business metrics.
01
Enhanced Brand Perception
02
Improved Conversions & CRO
03
Reduced Bounce Rate