Webolizma
Product
E-commerce
Skills
UI/UX Design, Web Design,
My Role
Digital Product Designer
Date
Aug 18, 2025
Team
Kerem T.
About the Project
This project was developed for 10noo to modernize its electronics e-commerce platform and improve product discovery, comparison, and mobile usability. Since the majority of traffic came from mobile devices, the entire design process followed a strict mobile-first approach.
My Role
Together with my teammate, we reviewed research and articles related to this project. By leveraging competitor analyses and customer complaints received by the brand, we created our own roadmap. Throughout the design process, we worked collaboratively. I was responsible for the product comparison module, quick-view module, product detail page, and ensuring that the homepage slider area worked seamlessly with the same visual on both web and mobile.
Problem Statement
The previous version of 10noo’s e-commerce platform presented several experience barriers that slowed users down and often prevented them from reaching a purchase decision. These issues became especially visible on mobile, where most of the traffic occurred.
No product comparison system was available.
Users had to enter product pages to access basic info.
On mobile, CTA buttons were not easily accessible.
The search bar lacked visibility, causing high exit rates.
Slider texts overlapped images, reducing clarity and accessibility.
Gift products and promotional items were overlooked by users.
Research
Our research aimed to understand user needs, identify friction points, and evaluate industry standards to create a mobile-first shopping experience. We combined behavioral data, heuristics, and user insights to form a clear direction for improvement.
User Behavior Analysis:Mobile traffic was significantly higher than desktop.
Heuristic Evaluation: Search visibility, slider readability, and CTA placement were weak points.
Competitive Analysis: Many competitors offered quick view and robust comparison features.
User Interviews: Users emphasized the need for easy technical comparison.
Data Review: High exit rates occurred on search and detail entry points.
Solution Approach
Based on the research and identified challenges, we introduced product-focused enhancements, accessibility improvements, and mobile-first structural optimizations to create a faster, clearer, and more reliable shopping experience.
Introduced a mobile-first grid system.
Added Quick View on product cards.
Implemented a sticky price & CTA bar on mobile.
Created a contrast-checked color palette aligned with the brand.
Rebuilt the homepage slider with accessible text placement.
Made the search bar permanently visible and more central.
Designed a new product comparison feature.
Added prominent “gift badges” for promotional items.
Design Principles
Accessibility: All colors were contrast-validated.
Speed: Reduce friction in the decision-making process.
Simplicity: Minimize cognitive load with clean layouts.
Consistency: Use a unified component language across all screens.
Mobile-first: Optimize for mobile before desktop.
Users needed to see technical differences but had to navigate between multiple pages.
Solution:
A new comparison module was designed.
Users can add items directly from listings.
Specifications were reorganized into a clean, readable table.
Users had to enter product pages for basic specs, causing friction.
Solution:
Introduced Quick View popups.
Users can see key details instantly.
Increased the speed of product evaluation.
The Add to Cart button was too far from reach during scroll.
Solution:
A sticky CTA bar was added for mobile.
Price + Add to Cart remain visible at all times.
Improved conversion potential.
This project reinforced the importance of mobile-first thinking in e-commerce success.
By empathizing with a more tech-literate audience, I was able to understand users’ expectations and observe the outcomes clearly.
Mobile usability improved dramatically.
Search visibility increased, reducing exit rates.
Quick View + sticky CTA boosted conversion efficiency.
Visual clarity and accessibility standards were achieved.
The new comparison module significantly reduced decision-making time.
