2023
Volted PC
Powering up the online presence of a premium custom PC Builder based in India, to increase retention and conversion
14 to 15 mins
INFO
Product
Volted PC Website
Skills
UI/UX Design
Visual Identity & Brand Positioning
Competitor & User Research
Conversion Rate Optimization
Feedback & After-Sales Experience Desig
My Contribution
UX Designer
Duration
Team Composition
THE BRAND
Volted PC, a premium custom PC builder from Nehru Place, Delhi, was already thriving in the offline market.
THE GOAL
Take their digital presence from just there to must visit with a user-friendly, high-converting, and brand-aligned website.
THE PREDICTED IMPACT
USER GOALS
Effortless Customization
Performance & Value
Gamers, creators, and professionals seek optimized setups that balance power, efficiency, and budget.
Trust & Transparency
First-time buyers need guidance, expert assistance, and clear warranty policies to feel confident in their purchase.
Seamless Buying Experience
Users expect a frictionless checkout, flexible payment options like EMI, and timely order updates.
Knowledge & Engagement
Enthusiasts look for buying guides, video content, and social proof to make informed decisions.
BUSINESS GOALS
Expand Beyond Offline Market
Increase Conversions
Optimize CTAs, checkout flow, and product discovery to boost sales and reduce drop-offs.
Build Brand Credibility
Position Volted PC as a premium yet transparent and trustworthy brand with strong after-sales support.
Enhance User Retention
Improve engagement through loyalty programs, saved configurations, and personalized recommendations.
Streamline Operations
Make PC building simpler and scalable with guided configurators and a robust order management system.
One of the standout features of Volted PC’s revamped website was the “Build Your PC” module—an intuitive, no-limits custom PC builder.
Unlike typical pre-configured options, this tool gave users complete control over every single component, from the processor to the cabinet.
WHAT MADE IT SPECIAL?
No default parts
Start fresh and build from scratch
Smart Compatibility Checker
Pick a processor, and the system automatically suggests compatible graphics cards, RAM, motherboards, and more
Full power & flexibility to craft a truly personalized PC, whether for gaming, streaming, or work
This game-changing functionality ensured that even non-tech-savvy users could assemble their perfect rig with confidence, eliminating the risk of picking mismatched components.
It wasn’t just a feature—it was an experience, empowering customers like never before.
We don't just want to sell prebuilt PCs like everyone else.
We wanted our customers to build — to handpick every part, personalize every detail, and create a machine that feels like theirs, not ours.
That’s why ‘Build Your PC’ is the soul of Volted PC — giving buyers full freedom, transparency, and trust. It’s not just a feature. It’s how we’re setting a new standard in the market.
Naman Gupta
Founder, Volted PC
1. HOME PAGE
2. BUILD YOUR PC PAGE
2.1
Prioritized Selection Flow
Competitors guide users with a top-to-bottom component selection approach for ease.
2.2
Smart Compatibility
Only compatible components are shown, preventing mismatched selections.
2.3
Clear Pricing Strategy
Some show comparative prices per component, others only at final selection. (Need a balanced approach.)
2.4
Smooth UX Matters
Messy scrolling & small CTAs hurt usability. (We should optimize layout & call-to-actions.)
2.5
Convenient Features Add Value
Save, review, share & estimated delivery times improve customer confidence.
2.6
Checkout Needs Trust Signals
Many lack trust-building elements at checkout. (We must reinforce reliability at purchase.)
3. LOGIN & SIGNUP PAGE
3.1
Multiple Sign-In Options Are Standard
Competitors offer Google, Facebook, Email, and Phone (OTP) login for ease.
3.2
Seamless Navigation
Clear CTA to switch between Login & Sign-Up avoids user confusion.
3.3
Security & Trust Reinforcement
A statement ensuring user data protection builds confidence.
3.4
Convenience Features Matter
“Remember Me” option enhances user experience for returning customers.
3.5
Minimal, Distraction-Free UI Works Best
No unnecessary elements; login should be quick and frictionless.
4. OTHER PAGES
4.1
Checkout Page Needs Trust Signals
Buying a PC is a big investment, so reviews, testimonials & buyer activity stats can boost trust.
4.2
Simplify the Configurator
A step-by-step guided experience (timeline-style selection) reduces confusion.
4.3
Human Touch Can Boost Sales
Sales team follow-ups on saved builds can improve conversion rates.
4.4
Loyalty & Urgency Drive Action
Loyalty rewards & limited-time offers (e.g., “XX% off if you checkout now”) encourage purchases.
4.5
Payment Flexibility Matters
EMI options on product pages (e.g., “Buy for ₹XX/month”) make high-ticket purchases easier.
4.6
Proactive User Assistance
Live chat, call support, or an inactivity prompt on the Configurator page can prevent drop-offs.
GOAL OF THIS STEP
GOAL OF THIS STEP
GOAL OF THIS STEP
STEP 1
Evaluating the Existing IA
Using user behavior data and CTA performance insights, we identified key problem areas:
Navigation Inefficiencies
2. Poor Content Hierarchy & Flow
2.1
Dispersed Information
Key decision-making elements like product details, trust signals, and customisation benefits were scattered across different pages instead of being accessible at the right moment.
3. Lack of Personalization & User-Specific Entry Points
3.1
One-Size-Fits-All Approach
Enterprise users and individual buyers had to navigate the same flow despite vastly different needs.
STEP 2
Defining the New IA
To address these issues, we proposed a goal-driven IA redesign, aligning content and structure with user intent and business objectives. The revised IA focused on:
1. A Streamlined, Multi-Level Navigation System
2. Contextual Content Structuring for Clarity & Trust
3. Task-Oriented User Flow Design
STEP 3
Validating the IA with Stakeholders & User Testing
Before committing to wire-framing, we conducted stakeholder walkthroughs and usability tests to validate:
Key Adjustments Post-Testing
GOAL OF THIS STEP
ITERATION 1
Mapping the User Journey
We began with bare-bones wireframes, focusing on:
Home and Related pages
Build your PC Page
Checkout flow
ITERATION 2
Refining Based on Feedback
Once the initial wireframes were tested with stakeholders and users, we analyzed the feedback to identify usability gaps and areas of improvement.
The goal was to fine-tune the structure, navigation, and task efficiency before moving into high-fidelity designs.
01
Reordering sections
Problem Identified:
Some users struggled to find key information, especially on the homepage and configurator.
Refinement approach:
1.1
Restructured the Categorized PC Pages (Gaming, Workstation, Enterprise)
Users often lacked the knowledge to make informed choices, leading to confusion or drop-offs. To address this:
Moved the PC Buying Guide to the Hero Section for first-hand visibility and a clear educational priority.
Ensured users were educated first before presenting them with product choices, reinforcing a customer-friendly, guidance-driven approach.
1.2
Rearranged homepage sections to prioritize high-impact elements like "Build Your PC" and "Pre-configured PCs", reducing unnecessary scrolling.
1.3
Ensured a logical flow of information, leading users seamlessly from awareness (educational content) to consideration (product discovery) to action (checkout or customisation).
02
Reducing Clicks & Interaction Overhead
Problem Identified:
Users found the existing flow too fragmented, requiring multiple steps to complete simple actions like logging in or adding a product to the cart.
Refinement approach:
2.1
Consolidated navigation pathways, ensuring fewer clicks were needed to reach key actions like Build Your PC, Account, Wishlist, and Saved Configurations.
2.2
Streamlined login/signup by reducing steps, making it easier for users to access their accounts without disrupting their journey.
03
Strengthening Wayfinding & User Flow Clarity
Problem Identified:
Users were unsure about the next steps in the configurator, leading to hesitation and increased abandonment rates.
Refinement approach:
3.1
Introduced a top-down selection approach in the configurator, reinforcing the recommendation to start with the processor and build downward to maintain compatibility.
3.2
Added clear section dividers to separate components, peripherals, and services, improving scannability.
3.3
Refined button placements for critical actions like “Save as PDF”, "Next Step" and "Add to Cart" to be consistently visible within the viewport at all times.
04
Improving First-Time User Experience
Problem Identified:
Users new to PC building felt overwhelmed by the wide range of options and lack of structured guidance.
Refinement approach:
4.1
Introduced onboarding tour, which would guide first-time users through the configurator, how to approach and build their own PCs
4.2
Ensured recommendation-based entry points by structuring a dedicated "Recommended Builds" section in the configurator flow.
4.3
Placed "Expert Help" CTA within the designs, ensuring accessibility to support without distracting from the selection process.
05
Mobile-First Adjustments
Problem Identified:
Wireframes in early testing indicated that key actions were not easily accessible on mobile, causing friction in navigation.
Refinement approach:
5.1
Adjusted layouts for collapsibility, ensuring mobile users could switch between component selections without excessive scrolling.
5.2
Optimized tap targets and spacing in low-fidelity screens to ensure a touch-friendly experience without UI crowding.
5.3
Restructured mobile navigation, ensuring quick access to cart, wishlist, and saved configurations without disrupting the browsing flow.
GOAL OF THIS STEP
Establishing the Design Language
To maintain brand consistency and clarity, we defined a design system that included:
01
Visual Aesthetics & UI Styling
1.1
Dark-themed UI with high contrast
Reinforces a powerful and high-performance feel, resonating with gamers, professionals, and enterprise users.
1.2
Minimalist yet impactful typography
Used bold headings for clear information hierarchy and modern sans-serif fonts for better readability.
1.3
Grid-based layout structure
Ensured visual balance, easy scannability, and structured content presentation, reducing cognitive load.
1.4
Strategic use of white space
Avoided visual clutter, guiding users toward primary actions effortlessly.
1.5
Hover-based interactions
Introduced micro-interactions that enhance engagement while maintaining a clean interface.
02
Color Palette & Brand Consistency
2.1
Primary Colors
Red and Dark Gray were used to emphasize the gaming theme and high-performance energy. The contrast between these colors reinforces power, speed, and intensity, aligning with the expectations of gaming enthusiasts.
2.2
Gradient Usage
Linear gradients of red and green were incorporated to create visual depth and dynamic interactions, enhancing the futuristic and immersive feel of the interface.
2.3
Data Visualization & Indicative Colors
Proper color-coded indicators were implemented to improve data consumption, readability, and clarity in complex decision-making areas, such as compatibility checks and pricing breakdowns.
03
Iconography & Visual Elements
3.1
Custom icons and illustrations
Used throughout guides, configurators, and key touchpoints to visually reinforce information.
3.2
Consistent button styling
Rounded corners and slight elevation effects for a modern and inviting look.
3.3
Device-agnostic layouts
Designed with scalability in mind, ensuring a seamless experience across desktop, tablet, and mobile screens.
Key Learnings
To maintain brand consistency and clarity, we defined a design system that included:
01
User Behavior Data is Invaluable
Analytics-driven decisions helped restructure the IA and optimize CTAs, ensuring better engagement & conversions.
02
Guided Experiences Reduce Friction
Features like step-by-step configurator flow, compatibility checks, and expert assistance CTAs significantly improved usability for first-time PC builders.
03
Trust Signals Drive Conversions
Integrating testimonials, brand partnerships, and customer success stories played a vital role in building credibility and reducing drop-offs.
04
Flexibility in Customization is Key
Users preferred complete control over component selection, but needed smart recommendations & safeguards to make informed choices.
05
Consistency Across Pages Matters
A unified design system with consistent UI patterns, typography, and interactions made navigation seamless across different pages.
Challenges & How We Overcame Them
To maintain brand consistency and clarity, we defined a design system that included:
Monitoring User Behavior & Performance Metrics
Why this matters:
Ensures the website remains efficient, responsive, and continuously aligned with evolving user needs.
Monitoring User Behavior & Performance Metrics
Why this matters:
Helps reduce decision fatigue, improve engagement, and increase the likelihood of completed purchases.
Monitoring User Behavior & Performance Metrics
Why this matters:
Builds brand loyalty, fosters long-term engagement, and encourages repeat purchases.
Monitoring User Behavior & Performance Metrics
Why this matters:
Positions Volted PC as a long-term leader in custom PC solutions, ensuring continued growth and market dominance.
Monitoring User Behavior & Performance Metrics
Why this matters:
Ensures Volted PC stays ahead of industry trends, continuously improving the buying experience.
CONSTRUCTION GRAB
Building a Seamless Platform for Construction Materials
Why Should You Check This Out?
See how smart UX simplified a chaotic industry. A deep dive into building a marketplace for construction materials.
Estimated Reading time : 11–13 mins
THE PALETTE
Crafting a Modern Digital Identity for a Interior Design Firm
Why Should You Check This Out?
Explore how branding, storytelling, and clean UX came together to shape a fresh, modern brand identity.
Estimated Reading time : 10-12 mins