Building Star Gallery – Transforming Electronics E-Commerce Into a Frictionless Shopping Ecosystem

A comprehensive, 6-month, user-centered redesign for Star Gallery—rebuilding the web storefront and mobile shopping application around streamlined product discovery, intuitive navigation, and accelerated checkout flows.

Overview

Star Gallery is an innovative e-commerce brand specializing in electronics and tech products. The legacy digital experience was suffering from structural bottlenecks, including complex navigation, slow product discovery, and cumbersome checkout processes that hindered user engagement and conversions. This project focused on a complete redesign of the online store and mobile shopping application, balancing aesthetic appeal with high functionality to resolve user pain points and drive sustainable growth.

Role

Product Design Lead / UX-UI Designer — owned end-to-end UX strategy, information architecture, competitive analysis, user personas, user flows, and multi-platform interface design.

Team

2 UI/UX Designers, 3 Developers, 1 Product Owner / Stakeholder (Project Manager).

Timeline

6 months

Context

To position Star Gallery strongly in the electronics retail market, we conducted a rigorous Competitive Analysis against leading platforms (such as Microless, Gear-up.me, and 7MD). This benchmarking helped identify critical market gaps in checkout processes, UI consistency, accessibility, and order accuracy, ensuring our design choices established a distinct competitive advantage.

Problem

Through user research, empathy mapping, and journey mapping (focusing on personas like Osman), we mapped the core friction points across the shopping experience:

Quantitative & Structural Issues: Complex and overwhelming product catalogs making it difficult for users to find desired electronics items quickly.
Checkout Friction: Lengthy, confusing checkout processes leading to high drop-off rates.
UI & Consistency Gaps: Inconsistent UI elements across the app and web platforms, alongside slow product discovery that increased user frustration and lowered conversion satisfaction.

Enhanced Navigation & Site Architecture: Revamped the navigation structure with a clear, hierarchical menu and advanced search filters, drastically reducing the time required to discover electronics and tech items.
Streamlined Product Discovery & Information: Optimized product pages to present specifications, pricing, and variants cleanly above the fold, ensuring swift decision-making.

Simplified Checkout Flow: Consolidated checkout into fewer, logically grouped steps with clear progress indicators to eliminate confusion and smooth out the payment journey.
Design System & Visual Consistency: Established a robust Design System (incorporating standard typography like Poppins and Tajawal, a cohesive color palette, custom icons, and modular UI components) to guarantee a unified experience across the web store and mobile app.

Managing Large Inventories: Structuring massive electronic product catalogs into intuitive categories without overwhelming the mobile-first user.
Cross-Platform Consistency: Harmonizing the visual language and component behavior between the web store and mobile application.
Developer Collaboration: Maintaining tight coordination with the 3 developers to ensure smooth design handoffs, accurate component scaling (Grid System), and flawless implementation of complex flows (Cart, Signup/Login, and Main Flows).

Outcome

The redesign transformed Star Gallery from a traditional storefront with high user friction into a modern, intuitive, and high-performance e-commerce ecosystem delivering a seamless electronic shopping experience that elevates brand trust, user satisfaction, and overall conversion potential.