Case Study UI/UX: Nexgen Website

NexGen revolutionizes the way gamers customize their gear, offering a seamless, interactive platform to design their perfect mouse and keyboard setup. With an emphasis on personalization and performance, NexGen transforms average players into champions through custom-tailored gaming equipment.

Curious how it all begins?🤔

I was frustrated by the limited choices and confusing customization UIs on existing websites. Many sites offered only basic features, making it hard for users to truly personalize their equipment. I saw a gap in the market for a solution that not only offers a wide variety of custom gear but also makes personalization easy and fun. That’s how NexGen was born.

Goals🎯

1. Streamline the customization process with diverse, easy-to-use options.

2. Design an intuitive and engaging UI for a competitive edge.

3. Showcase a variety of custom mice from different brands in one place.

Design Process⏳

Implementing Garrett’s Five Planes of User Experience

Using Garrett’s Five Planes of User Experience helps create a complete and effective design by covering all important aspects.

UX Strategy💡

1. Stakeholder Interviews

Stakeholder Interview Questions

Interview Summary:

Stakeholders wanted a customization platform that’s easy to use, looks modern, and can grow with new features in the future. The focus was on creating a smooth, enjoyable experience that keeps users coming back.

1. Target Users: Gamers and tech enthusiasts seeking personalized gear.
2. Design Priorities: Modern, sleek interface with intuitive navigation and real-time 3D customization.
3. Future Enhancements: Potential for subscription services and expanded product offerings, guided by user feedback.

2. Competitor Review

Competitor Analysis Summary

Most existing brands fall short when it comes to customization and user experience, leaving gamers with limited options and little creative freedom.

1. Razer: The interface is too complex, causing frustration, and gear options are outdated with little room for design changes.
2. Logitech: Customization isn’t available before purchase, users can only modify products afterward, with no true personalization.
3. SteelSeries: Customization is limited to one mouse model and doesn’t allow personal design uploads, restricting creativity.

3. User Research

User Personas:

To understand the target audience, I interviewed two users. Their feedback helped shape the key needs, preferences, and pain points shown in the user personas below.

User Persona: Hrithik Yadav

Hrithik Yadav
rithik, a gamer from Chennai, wants a high-performance, fully customizable mouse with RGB and ergonomic design.

User Persona: Ananya Sharma

Ananya Sharma
nanya, a designer from Mumbai, wants a stylish, pastel-themed mouse with custom anime designs and good comfort.

These personas helped identify the target audience and their pain points, guiding design decisions to better meet their needs.

Target Audience:

1. Professional Gamers: Users needing customizable, high-performance mice for competitive play.
2. Tech Savvy Users: Enthusiasts seeking personalized and advanced tech products.
3. Creative Professionals: Individuals needing precise and comfortable peripherals for their work.

User Pain Points:

1. Lack of Variety: Pre-built designs offer few creative or unique options.
2. Poor Fit: Available choices rarely match personal aesthetics.
3. High Costs: Customization often comes with a hefty price tag.
4. Complicated Process: The steps involved are usually confusing and time-consuming.
5. Frustrating Tools: Many design interfaces are clunky and inefficient.

UX Scope✍

User Scenarios:

1. First-Time Visitor: A new user exploring NexGen’s offerings, needing clear navigation and an engaging overview.
2. Customization Enthusiast: A user looking to personalize gaming gear with real-time previews and various customization options.
3. Product Researcher: A user comparing product details, images, and pricing before making a purchase decision.
4. Frequent Shopper: A returning customer who wants quick access to saved designs and easy reordering.
5. Support Seeker: A user seeking assistance with orders or customization, requiring fast access to support options.

Content Requirements:

1. Homepage: The homepage features a hero section with heading, subheading, and CTAs, plus a product overview, navigation bar, and footer with quick links, social media, and newsletter signup.
2. Customization Page: Offers a 3D tool for real-time product customization, design templates, and options to save and share designs.
3. Product Pages: Includes high-quality images, transparent pricing, and essential features.
4. Support Section: Provides a contact form, email, phone details, and customer support information.
5. Additional Sections: Features a search bar, user reviews, FAQ, shipping/returns info, product recommendations, and legal pages. Live chat can be added for real-time assistance.

Features:

1. Interactive Customization Tool: Real-time product customization.
2. Detailed Product Information: High-quality images and transparent pricing.
3. Clear CTAs: Prominent call-to-action buttons.
4. Search Icon: Easy navigation for quickly finding products or information.
5. Customer Support Tools: Contact form and support details.

UX Structure🏗️

Information Architecture

Here’s the IA (Information Architecture) for the NexGen website, showing the layout and key elements.

User Flow

This user flow maps the key steps for a smooth and intuitive NexGen website experience.

UX Skeleton🦴

Wireframes

Considering various design ideas for NexGen, I created wireframes to outline the website’s layout. These wireframes show how key elements will be arranged and help ensure a smooth and easy user experience.

wireframes

UX Surface✨

Design System

The NexGen design system ensures consistency with a defined logo, typography, color palette, and components. Using a design system helps maintain uniformity, making the brand feel more legitimate and improving the overall user experience.

Disclaimer: This case study is for learning only, logos aren’t endorsements. I'm here to land a job, not a courtroom drama!

Visual Design

NexGen’s design is sleek and modern, with bold typography and a clean color palette. Each element boosts usability and highlights customization. The creative choices are marked by arrows, fine print ahead, so you might want your specs handy before you start squinting your eyes!

Shop Page:

Support Page:

Customize Page:

Home Page:

Learnings🎓

Reflecting on NexGen, I gained insights that reinforced my focus on effective UX and attention to detail.

1. Simplifying Tasks: Breaking complex tasks into easy, engaging steps improves user flow and keeps users interested.
2. 3D Real-Time Feedback: Showing changes instantly in 3D gives users control and makes customization more interactive and satisfying.
3. Focus on Key Features: Highlighting one main feature avoids overwhelming users and creates a smoother, more enjoyable experience.

Gratitude🌟

And that’s a wrap! Thank you for taking the time to read my case study. I welcome all your constructive criticism (be gentle, please) and would love to hear your thoughts. Feel free to reach out and connect with me on Instagram and LinkedIn, and check out my portfolio for more of my work!