top of page
Redmi Website Redesign
Client Pitch: Redmi | UI/UX Design | Adobe Illustrator, Photoshop
Problem Statement
The existing Redmi Note 11 Pro+ 5G landing page has some shortcomings that could prevent users from connecting meaningfully with the product as they navigate the product features.
The unstructured, lengthy information overwhelms casual browsers, resulting in high cognitive load and a reduced likelihood of users completing the page journey.
A redesign was pitched to Redmi to create a clearer, product feature display that felt straight to the point without confusing users with exaggerated and cluttered visuals.
Scope of Project
The redesign of the product landing page was completed within a 2-day timeline, using client-provided assets and adhering to existing brand guidelines. The focus was on restructuring content and visuals to create a more cohesive, minimal experience. Due to time constraints, the design remained fully static, without animations or videos.
Role
User Interface Designer.
I collaborated with the CEO of our design and marketing agency, to hash out the higher level strategy for the redesign. Took initiative and redesigned the site from scratch with input on improvements from another designer.
Final Outcome
Phase 1: UX Audit of the current landing page
Hero image relies on a standard blue background, safe but overused choice in tech marketing that will likely blend into the broader digital landscape.
The specifications section feels visually cluttered, with text scattered across randomly sized boxes with inconsistent alignment. Lack of visual hierarchy results in higher cognitive load, forcing users to work hard to extract key information.
The 5G feature section misses the chance to emotionally connect users to the true promise of next-gen connectivity. The 'flying phones' imagery, feels abstract and fails to explore real benefits like seamless streaming or instant downloads. It should ideally help users envision a future of faster, more fluid digital experiences.
The battery section demands excessive scrolling for a very limited amount of information. Bold visuals are striking, but they dominate space at the expense of clarity. Extended scroll not only disrupts the page’s overall pacing but could also risk disengaging users before they reach other critical product highlights.
The camera showcase focuses on overly stylized shots, neglecting real-world examples like landscape photography. This limits its appeal to average users, who may question the camera’s everyday performance. Including more relatable images would help build trust by more truthfully demonstrating the camera’s capabilities.
The AMOLED display section is visually cluttered, with text broken into multiple headings with uneven spacing. This makes it hard for users to focus on key information, resulting in important details being overlooked.
The overwhelming length of information can drive users away before they reach the bottom of the page. To reduce bounce rates halfway through the page, the scroll length should be reduced, with less crucial features that don't drive user purchase decisions, occupying less space.
The visual representation of the dual stereo speakers feels lackluster, weakening the desired impact of this feature on the user's mind. More dynamic visuals, like vibrant sound waves or immersive audio imagery, would better convey the richness of the sound, driving a more memorable impression.
The RAM booster section fails to effectively highlight the benefit of multitasking, leaving users uninspired. The visuals are flat and lack excitement, failing to convey the potential of using multiple apps smoothly.
The features of MIUI13 are very misaligned and cluttered, occupying excessive space without adding value.
Lack of proper spacing makes this section feel too condensed, creating a cramped experience that diminishes readability and engagement in the final section.
1
1
2
2
3
3
4
4
5
5
6
6
7
7
8
9
10
11
8
9
10
11
Phase 2: Design Rationale and the Implementation
Visual Hierarchy and Layout
Before:
The original Redmi Note 11 Pro+ 5G page lacked clear visual grouping, making it difficult for users to quickly associate related information. Disorganized spacing and inconsistent styling disrupted the natural scanning flow, leading to a fragmented and overwhelming experience where users had to work harder to make sense of the product features and technical details.
After:
In the redesign, each product feature and it's more detailed specifications, were grouped together.
Visual consistency was established through uniform typography, iconography, and color treatments. Similar content types ( technical specs, performance highlights) now share common visual patterns, allowing users to recognize categories effortlessly as they scroll.
The structured layouts helped users scan information without being overwhelmed, allowing them to focus on understanding and making more informed decisions. The result is a cleaner, more intuitive, and visually cohesive experience.
Color Scheme
Before:
The original color palette primarily relied on black, white, and a dull, overused shade of blue in the battery section, causing it to stand out awkwardly and feel disconnected from the rest of the page.
After:
In the redesign, the color palette remains aligned with the brand’s guidelines of black and white, but is refined with vibrant background accents that echoes the vivid, dynamic quality of the AMOLED display, creating a more cohesive and delightful visual experience.
Detailed Breakdown of Design Choices:
The new landing page reintroduces itself with a colorful background that aligns with the phone’s AMOLED display to create a more vibrant entry point to the product's showcase.
The redesigned specifications section organizes information into a clean, symmetrical two-column layout with consistent iconography and clear visual hierarchy. This streamlined structure reduces cognitive effort, allowing users to quickly scan and retain the most important product features without feeling overwhelmed.
The new 5G section shifts from abstract and redundant phone imagery to a more human-centered visual, featuring a person surrounded by dynamic, light trails that symbolizes next-gen connectivity. This design leads users to envision themselves at the center of a faster, more fluid digital future. The bold typography and structured layout further strengthens the section’s impact without overwhelming the viewer.
The redesigned battery section delivers key information more clearly, pairing strong visuals with clear data points like charging speed and battery life. It reduces unnecessary scrolling, improves pacing, and keeps users engaged with the product story.
Curated real-world photos like landscapes and portraits, making the camera's performance feel more relatable and trustworthy.
Organized the AMOLED section with cleaner grouping, consistent spacing, and clearer hierarchy, making it easier for users to quickly grasp key features without feeling overwhelmed.
Trimmed excessive scroll length by condensing less critical content into tighter sections, helping users stay engaged and reach key information faster.
Enhanced the dual stereo speakers section with dynamic visuals of sound waves. This now better conveys the richness of the sound thus making the feature more engaging and memorable for users.
The RAM feature section now focuses on illustrating the potential of a boosted RAM using an arrow to visually communicate the significantly increased capacity for multitasking.
The new MIUI13 features section, streamlines the content by reducing unnecessary space taken.
Improved spacing in the final section, creating a more open, balanced layout that enhances readability.
Phase 3: Retrospection
Conclusion
The redesign of the Redmi Note 11 Pro+ 5G landing page successfully improved content structure and visual language within the limited 2-day timeline. While the outcome resulted in a cleaner, more cohesive experience, the project’s scope didn’t allow for interactive elements, animations, or deeper exploration into personalized features. Given more time, incorporating dynamic interactions could have elevated the user experience to a much grander level.
While the pitch didn’t lead to the design being implemented, it helped secure future projects and build a relationship with the client. The process showcased our ability to deliver impactful design under tight timelines, resulting in continued collaboration with the client down the line.
bottom of page