Menu

Designing a Scalable E-commerce Experience Within Shopify Constraints

From building the first responsive site → to designing structured e-commerce experiences within Shopify constraints
Platform: Web (Responsive)
Company: Astroworld Telescopes

Overview

This project focused on redesigning and customizing an e-commerce storefront built on Shopify. The goal was to improve usability, streamline user flows, and deliver a more cohesive experience—all within the constraints of an existing theme system.

Rather than treating this as a visual refresh, I approached it as a product design problem: how to create a scalable, user-centered experience while working within technical and structural limitations.

The Problem

The existing storefront faced several usability challenges:

  • Fragmented navigation made product discovery difficult
  • Page structures lacked consistency, increasing cognitive load
  • The purchased Shopify theme limited full customization
  • Improving the experience required working within constraints—not rebuilding from scratch

The business needed a more intuitive, conversion-focused experience without the cost and time of a full redevelopment.

My Role

  • Led UX and UI improvements across the storefront
  • Audited and restructured site architecture and navigation
  • Designed and implemented UI customizations within Shopify’s theme system
  • Translated business needs into scalable, system-based design solutions
Approach

1. Foundation: Systems Thinking from Web Design

My approach was grounded in my earlier experience designing web systems, including building the first responsive website for a college.

That work established my core strengths in:

  • Structuring clear navigation pathways
  • Designing relationships between pages, not just individual screens
  • Creating responsive layouts for multi-device usability

This foundation directly informed how I approached the Shopify experience—not as isolated pages, but as a connected system.

2. UX Audit & Structure Redesign

I began by evaluating the existing storefront:
  • Identified friction points in navigation and browsing flow
  • Mapped page hierarchy and user pathways
  • Analyzed inconsistencies in layout and content organization
From there, I restructured the experience by:
  • Simplifying navigation to reduce decision fatigue
  • Clarifying content hierarchy for faster scanning
  • Creating more predictable and consistent page patterns

3. Designing Within Constraints

Shopify’s theme system imposed clear limitations:
  • No full control over backend structure
  • Restricted layout flexibility
  • Dependency on existing components
Instead of seeing this as a blocker, I treated it as a design constraint:
  • Customized UI using CSS and theme configuration
  • Reused and adapted components to maintain consistency
  • Optimized layouts without breaking the system
This required balancing design intent with technical feasibility—a key aspect of product design.
Key Design Decisions
  • Simplified Navigation
    Reduced unnecessary steps and improved wayfinding across the site
  • Improved Product Discovery
    Structured content to make browsing more intuitive and efficient
  • Consistent Layout System
    Established repeatable patterns across pages to reduce cognitive load
  • Responsive Optimization
    Ensured usability across devices, building on my experience with responsive systems
Outcome
  • Delivered a full storefront redesign within an existing Shopify theme
  • Improved usability by reducing friction in navigation and browsing flows
  • Created a more scalable and maintainable design system
  • Eliminated the need for costly custom development
This project reflects my ability to design within constraints, think in systems, and deliver scalable user experiences—skills directly aligned with product design.