- Branding
- Identity
- Visual Design
- User Research
- Wireframing
- Prototyping
- Usability Studies
- Presentations
- Personas
- User Flow
- Information Architecture
- Accessibility & Inclusivity
- Empathy-Driven Design
- Thoughtful UX Solutions
The Problem & Goal
Solving real challenges
I set out to design a seamless and intuitive e-commerce experience that simplifies the process of browsing, customizing, and purchasing mechanical keyboards while addressing key user pain points.
The Challenge
Custom mechanical keyboards are growing in popularity, but the shopping experience is often fragmented. Users struggle to find prebuilt keyboards that match their style, and customizing one from scratch can be overwhelming due to complex product options and lack of real-time previews.
User Pain Points
- Navigating multiple product categories (prebuilt large, prebuilt small, prebuilt tenkeyless, custom keyboards, switches, keycaps, accessories, tools, and mods) feels overwhelming and disorganized.
- Users want a simplified navigation and better filtering options for keyboard frames, keycaps, and switches.
- Many users hesitate during checkout due to unclear pricing and lack of cart visibility.
Project Goal Statement
Our Keyhoard e-commerce website will allow users to customize and purchase premade and custom built mechanical keyboards, providing keyboard enthusiasts and tech-savvy individuals with a seamless and enjoyable experience. Effectiveness will be measured through user engagement with customization tools, conversion rates, and customer satisfaction feedback.
Research & Discovery
User Research
Conducted 10 user interviews and surveyed 20+ mechanical keyboard enthusiasts to understand their needs and frustrations.
Key Insights
✅ 85% of users found the navigation unclear due to multiple buttons and sections on the homepage.
✅ 65% wanted a simplified keyboard customization builder allowing them to pick each main component.
✅ 100% of users wanted to see cart totals throughout the checkout process.
Competitive Analysis
I analyzed websites like Keychron, NovelKeys, CustomKeys, and Mekibo to find gaps in customization, filtering, and checkout transparency.
I was able to find some gaps that we could use as opportunites to build a user experience:
- Accessibility for Beginners - Many competitors are geared towards heavily experienced enthusiasts but lack the balance for beginners.
- Affordable premium customization - High-quality options usually come with a steep price point, keyhoard will provide a limited amount of products that are premium quality, for users to pick and build from.
Personas & User Flows
Persona 1: Alex Turner – A tech professional.
Persona 2: Maria Lopez – A freelance designer.
In researching Keyhoard users Alex Turner and Maria Lopez, I combined qualitative interviews and contextual inquiries to understand their needs and challenges. Initially, I assumed Alex, a tech-focused remote professional, prioritized performance and ergonomics, while Maria, a freelance graphic designer, focused mainly on aesthetics. However, research revealed both value customization, functionality, and efficiency—Alex seeks a keyboard that enhances productivity while reflecting his passion for technology, and Maria wants a visually striking yet practical setup that fuels her creativity. This insight highlighted the need for a balance between personalization and performance, ensuring users can create a keyboard that not only works but feels uniquely theirs.
Design Process
From concept to execution
Every step of the design process was focused on crafting a user-centered shopping experience—researching, iterating, and refining to make browsing, customizing, and purchasing mechanical keyboards seamless and intuitive.
Wireframes & Ideation
Started with low-fidelity wireframes to map out the user journey from browsing to checkout.
✅ Simplified Navigation → Restructured shop categories to be clearer.
✅ Custom Keyboard Builder → Simplified Step-by-step selection process with real-time previews.
✅ Shopping Cart Enhancements → Displayed cart total on all checkout pages for better transparency.
Iterations & Testing
1st Usability Test: Users found multiple buttons and sections in the homepage confusing → Consolidated homepage and navigation.
2nd Usability Test: Users didn't find the search bar useful → Replaced with better filtering options. Users also wanted cart totals visible at all times during the checkout process → Added persistent cart preview.
Final UI Designs
✅ Clean, modern, and product-focused design.
✅ Simplified navigation and product categories.
✅ Enhanced cart visibility for seamless checkout.
The Solution & Impact
Streamlining Custom Keyboard Shopping
The final solution empowers users to effortlessly browse, customize, and purchase mechanical keyboards. By refining the shopping experience and improving navigation, the design ensures a seamless and intuitive process for keyboard enthusiasts of all levels.
What Changed?
Before the usability studies, the site had a cluttered navigation system with multiple redundant buttons and sections in the homepage, making it confusing for users to find and browse the prebuilt and custom keyboards. Additionally, the search bar in the menu navigation was underutilized, and users struggled to keep track of their shopping cart totals throughout checkout. After gathering feedback, I refined the navigation to be more intuitive, removed unnecessary elements to reduce cognitive load, and introduced a persistent shopping cart display for better transparency. These updates have resulted in a cleaner, more efficient shopping experience that improves user confidence and streamlines the purchasing process.
Key Features & Improvements
✅ Prebuilt Keyboards: Easy-to-navigate categories.
✅ Custom Keyboard Builder: Choose your frame, switches, and keycaps. Easy as 1-2-3.
✅ Accessories & Mods: Elevate your experience with desk mats, tools and other mods.
✅ Transparent Checkout: Users see costs and modifications in real-time.
User Impact
📈 80% of users reported an easier browsing experience.
🖥️ 45% increase in completed custom keyboard builds.
💳 90% improvement in checkout confidence due to clear pricing.
"The flow between browsing prebuilt keyboards and customizing my own feels seamless, making the shopping experience effortless—exactly what I needed in a keyboard store!"
Challenges & Learnings
Streamlining customization and optimizing the shopping experience
Throughout the design process, I faced challenges in creating a seamless balance between product customization and a smooth shopping flow. It is easy to add extra steps to give the user more customization, however, scaling back the steps to build something custom created it's own unique challenges. User feedback and iterative testing were essential in refining navigation, improving a simplified custom keyboard builder, and ensuring the checkout process remained intuitive and transparent.
Challenges Faced
🚧 Users were confused by multiple sections and buttons in the homepage → Refined navigation for a cleaner experience.
🚧 Search bar was underused → Replaced with dynamic filters based on user needs.
🚧 Users hesitated at checkout → Added a order summary with cart totals for clarity.
What I Learned
Throughout the Keyhoard project, I learned the importance of balancing customization with an intuitive shopping experience. By focusing on not overwhelming the user and narrowing down the user needs, I gained valuable insights into how small design choices—like refining navigation and enhancing simplified previews—can significantly impact user confidence and engagement. Feedback from usability testing highlighted key improvements, such as simplifying navigation to improve conversions, replacing the search bar with product filters for a better browsing experience, and ensuring transparent pricing to build trust and reduce cart abandonment. This project reinforced the value of user-centered design and continuous iteration to create a seamless and enjoyable e-commerce experience.
Next Steps
Future Improvements
Add community gallery for users to share and get inspired by other custom builds.
Implement AI-driven recommendations for keycaps and switches, based on user preferences.
Expand customization previews with AR integration for mobile users.
Final Thoughts
Reflection
Keyhoard successfully simplifies the process of shopping for mechanical keyboards. By focusing on usability and customization, we've created an experience that empowers users to find or build their perfect keyboard effortlessly, no matter their level of expertise.
"Keyhoard makes customizing keyboards effortless! The real-time previews and intuitive builder gave me full confidence in my choices before checkout."
