📌 Project Overview​

This project focused on redesigning and modernizing an outdated Shopify storefront built on the Dawn theme. The existing experience suffered from poor navigation, inconsistent visual hierarchy, and limited product discovery, creating unnecessary friction for customers and reducing conversion opportunities.

​

The goal of the redesign was to create a cleaner, more intuitive shopping experience that simplified browsing, improved usability across devices, and supported business growth through better engagement and conversions.

​

🤝 My Role

I led the project as the UX/UI Designer, owning the end-to-end design process from research and problem definition to high-fidelity UI design and implementation support.

​

My responsibilities included:

• Conducting UX research and competitive analysis

• Identifying usability issues and customer pain points

• Creating wireframes and high-fidelity prototypes

• Designing responsive desktop and mobile experiences

• Collaborating closely with the client through iterative feedback sessions

• Assisting with implementation using Shopify's Dawn theme, including Liquid and index.json customization

• Ensuring design fidelity while working within Shopify's technical constraints

​

⚠️ Challenges Identified

The existing storefront created several obstacles for users attempting to browse and purchase products.

​

Key challenges included:

• A cluttered interface with little visual hierarchy, making pages difficult to scan.

• Confusing navigation that prevented users from quickly locating categories and products.

• No filtering system, forcing customers to manually browse large product collections.

• An outdated mobile experience that lacked responsive optimization and reduced usability on smaller screens.

​

These issues increased cognitive load, slowed product discovery, and negatively affected customer engagement.

​

​🔎Process and Solutions

The redesign began with a heuristic evaluation of the existing website alongside a competitive review of modern e-commerce experiences.

The research focused on understanding where customers experienced friction during browsing and identifying opportunities to simplify navigation and product exploration.

​

Research objectives

• Identify usability barriers preventing efficient product discovery.

• Evaluate the effectiveness of the site's navigation structure.

• Assess opportunities to improve responsiveness across devices.

• Benchmark the experience against industry best practices.

​

Methods

1. Heuristic Evaluation
   Reviewed the existing interface against established usability principles to identify layout inconsistencies, navigation issues, and accessibility concerns.

2. Competitive Analysis
   Analyzed leading e-commerce websites to understand common patterns for category organization, filtering systems, homepage layouts, and mobile experiences.

3. Stakeholder Collaboration
   Conducted multiple review sessions with the client to align design decisions with business goals, branding requirements, and technical feasibility.

 

🧠 Key Insights​

Insight 1: Users struggled to orient themselves.

Without a clear visual hierarchy or navigation structure, visitors often found it difficult to understand where to begin or how to move through the site.

​

Insight 2: Product discovery required unnecessary effort.

The absence of filtering options made browsing inefficient, particularly for users looking for specific product types.

​

Insight 3: Mobile usability was underserved.

The previous experience did not adapt well to different screen sizes, creating friction for mobile shoppers.

​

Insight 4: Simplicity improves confidence.

Reducing visual clutter and presenting information more clearly helped users focus on shopping rather than interpreting the interface.

​

✨ Design Strategy

The redesign centered around creating a structured, user-focused shopping experience that reduced friction while maintaining the client's brand identity.

​

Key priorities included:

• Establishing a clear visual hierarchy

• Simplifying navigation and category access

• Introducing product filtering to improve discoverability

• Creating responsive layouts for desktop and mobile users

• Maintaining consistency throughout the customer journey

​

📊 Results

Wireframes and high-fidelity prototypes were developed for both desktop and mobile experiences.

Major improvements included:

• A reorganized homepage with stronger visual hierarchy

• Prominent hero banners and featured collections

• Clear category sections for easier exploration

• Product filtering functionality to streamline browsing

• Improved spacing, typography, and content organization

• Responsive layouts optimized across screen sizes

​

Design iterations were continuously refined based on stakeholder feedback before implementation.

​​

⚙️ Shopify Implementation

Although I was not responsible for coding the Shopify theme, I worked closely with the client and the Shopify developer throughout the implementation process to ensure the design was translated accurately into the live experience.

​

My contributions included:

• Providing detailed design specifications and assets for development

• Collaborating with the client to clarify design requirements and expected interactions

• Reviewing implemented features such as the homepage layout, hero banners, category sections, featured collections, and custom footer

• Conducting quality assurance (QA) checks to verify that the final implementation aligned with the approved designs across desktop and mobile devices

• Identifying visual inconsistencies and usability issues and communicating feedback for refinement

• Recommending practical alternatives when certain design elements were constrained by Shopify's native capabilities or theme limitations

​

✅ Testing & Refinement

Before launch, prototypes and implemented designs were reviewed across multiple screen sizes and user scenarios.

Visual elements, layouts, and interactions were refined to ensure:

• Consistent branding

• Responsive behavior

• Improved readability

• Efficient navigation

• Smooth shopping flows

​

📊 Outcomes

Following the redesign and optimization efforts, performance reports demonstrated significant business improvements:

• 301% increase in click-through rate (CTR)

• 518% increase in landing page views

• 50% increase in purchases

• 50% reduction in cost per purchase

• 154% improvement in return on investment (ROI)

​

Beyond marketing performance, the redesigned user experience contributed to stronger customer engagement through improved navigation, more effective product discovery, and a smoother shopping journey across devices.

​

💭 Reflection

This project reinforced how thoughtful UX decisions can directly influence business performance. Simplifying information architecture, improving navigation, and reducing friction throughout the shopping experience helped create a more intuitive interface that supported both user needs and commercial goals.

​

Equally important was maintaining close collaboration with stakeholders throughout the process. By iterating based on feedback and understanding Shopify's implementation constraints, I was able to bridge design and development effectively while preserving the integrity of the user experience.

 

The project strengthened my skills in e-commerce UX, responsive design, stakeholder communication, design systems, and translating high-fidelity concepts into technically feasible Shopify solutions.