📋 Project Overview

The primary goal of this project was to modernize an outdated Shopify storefront using the Dawn theme. The existing website faced several usability issues, including a chaotic layout, lack of clear navigation, and absence of essential features like product filters. These problems led to user confusion and drop-offs, impacting both user engagement and sales performance.

​

💻 My Role
As the Lead UX/UI designer on this project, I led the end-to-end design process—from user research and pain point identification to high-fidelity prototyping and assisting in Shopify's Liquid and JSON template formats.

 

👇🏼 Challenges Identified

• Disorganized Layout: The original design lacked visual hierarchy, which overwhelmed users.

• No Navigation Clarity: Users couldn’t easily find categories, leading to poor product discovery.

• Missing Filters: Filtering options were non-existent, making it difficult for users to browse efficiently.

• Mobile Experience Neglected: The old design wasn’t optimized for responsive screens.

​

💭Process and Solutions

   1. Research & Discovery

• Conducted a heuristic evaluation and competitive analysis to benchmark against industry standards.

• Identified critical UX issues and mapped them to user pain points.

​​

   2. Collaborative Iteration

• Held multiple review sessions with the client to align on goals, preferences, and brand values.

• Presented UI/UX improvements backed by user-centered research.

• Incorporated client feedback iteratively into the design process.

​​

   3. Design & Prototyping

• Developed wireframes and high-fidelity prototypes for both desktop and mobile.

• Focused on simplifying layout, introducing clear navigation, and implementing filtering functionality.

​​

    4. Implementation in Shopify

• Used client's theme's index.json structure to implement a custom homepage.

• Ensured that the final build reflected the original design as closely as possible while staying within Shopify’s framework.

• Added hero banners, category blocks, featured collections, and a custom footer—all optimized for desktop and responsive screens.

​

   5. Testing & Refinement

• Performed thorough testing on mockups and prototypes across devices.

• Fine-tuned visual elements and interactions to ensure consistency with the brand and usability best practices.

​

📊 Results

• Increased User Engagement: Notable rise in overall clicks, page views, and time spent on site.

• Higher Sales: Enhanced user experience directly correlated with an increase in conversion rates and overall sales.

• Improved Responsiveness: Users on mobile and tablet devices experienced seamless navigation and accessibility.

 

✅ Key Takeaways

     A clear and intuitive design has a powerful impact on how users interact with a website, directly influencing engagement, time on site, and ultimately      sales performance. In this project, the success of the redesign was rooted in a user-centered approach that prioritized simplicity, structure, and visual clarity.  Through continuous collaboration with stakeholders, we were able to iteratively refine the design based on feedback and insights, ensuring it effectively    addressed the confusion caused by the previous layout. Every visual and interactive element was purposefully crafted to guide the user experience, making    navigation effortless and the shopping journey more enjoyable.

 

    To ensure the final implementation remained as faithful as possible to my original vision, I also provided guidance on how to best utilize Shopify’s existing    theme capabilities, along with alternative solutions for elements that weren’t natively supported. This allowed us to bridge the gap between design and    development, resulting in a modern, aesthetically cohesive interface that not only looked polished but also functioned smoothly across both desktop and    mobile platforms.