Bridging the Gap:A Problem-Solving Journey in Section-Based Theme Design

Timeline

Service

Responsibilities

Tools

August 2023 - February 2024

Problem-solving

User Experience Design

User Interface Design

Design Operation

UX Research

Figma

Miro

Slack

Project Context

This project was developed within a business environment that prioritized sales revenue over product experience. Most team members focused mainly on completing assigned tasks, with limited attention to how the product actually worked or how end-to-end users experienced it. As a result, there was a noticeable gap in product understanding, user empathy, and long-term design thinking.

The Process

Discovery

Problem Identification

Retrospective Session

Problem Statement

Synthesize Insights

Problem Statement

Approach

Empathy Approach

System-first Design Approach

Testing and Impact

Testing & Impact

Refecting

1. DISCOVERY

Problem Identification

During the process of designing a customized e-commerce website theme, I identified several challenges that our functional team encountered — not only related to the product itself but also in terms of team collaboration, limited understanding of the company’s products, and the constraints of the Shopify platform.

In addition to issues regarding execution, some of the company’s projects received negative feedback due to the complexity of the theme builder setup and the overall user experience. These concerns directly impacted user satisfaction and, consequently, revenue.

1. DISCOVERY

Retrospective Session

To validate the problems I’ve identified, I plan to run a session with the product team. This will help gain a more holistic view and uncover additional perspectives from their side.

2. INDETIFY THE PROBLEM

Synthesize the issues

From retrospective sessions, I collected feedback from both design and development teams and synthesized key recurring issues. These included unclear builder settings that confused users, the lack of a scalable design library, and team challenges like misalignment with Shopify’s requirements and time-consuming design inconsistencies. These insights helped me define a clear and focused problem statement.

Issues from products

Issues from Teams

2. IDENTIFY THE PROBLEM

Problem Statement

These insights pointed me to a core challenge, leading to the following problem statement:

Problem statement 1

Designing pages as a whole, instead of using sections, caused misalignment with Shopify's structure, creating extra work for developers and reducing efficiency in building flexible, reusable templates.

Problem statement 2

A lack of empathy in designing builder settings, along with misalignment between design and development, led to unclear setups, user frustration, and more support requests.

3. APPROACH

Empathy Approach

To truly empathize with both the development and user perspectives, I first held a 1-on-1 session with a developer to gain a clear understanding of how the theme’s source code is structured and how it scales across multiple brands. At the same time, I put myself in the user’s shoes, walking through the store setup process using our custom theme. By combining these technical and user insights, I identified the gap between how the theme is built and how it is actually experienced by users.

3. APPROACH

System-First Design Approach

This empathy-driven approach led me to adopt a System-First Design Approach to address the inconsistencies and inefficiencies caused by one-page design thinking. By focusing on breaking down the product into reusable, modular sections, this method aligns with how Shopify themes are structured and improves usability, flexibility, and collaboration across teams.

I created a structured section management flow to bring clarity and consistency to how sections are built, organized, and reused. By setting clear rules for naming, grouping, and configuring settings, the flow improved alignment and efficiency between designers and developers.

In addition to designing and managing for multiple brands, I used Figma variables to build a solid design foundation — from global to semantic to mapped levels. Thanks to the multi-mode feature, I could easily switch between brand identities or select the appropriate brand home with just a few clicks.

4. TESTING & IMPACT

Testing and Impact

To validate this approach, our team applied the System-First Design method to a new Shopify theme project called SOUL, which included 4 different brands. The structured section system and Figma variables enabled smooth management across variations. As a result, we successfully submitted SOUL to the Shopify Market — marking the first official product from our company on this platform.

🚀 Explore the Full SOUL Project

In my upcoming case study, I’ll walk through the entire journey of SOUL, from sketching ideas to managing section files and designing for multiple brands using Figma’s variable foundation.

Read Project

Although we didn’t measure the results in exact numbers, the improvement was clearly reflected in the workflow:

Developers rarely asked for clarification on layout or spacing, unlike before.
The number of design feedback loops was significantly reduced — from 3 rounds to just 1–2.

This confirmed that the approach not only improved product quality but also enhanced cross-functional collaboration and team efficiency.

Reflecting

1. Balancing Creativity and E-commerce Needs: Balancing creativity with e-commerce needs was challenging. The structured approach sometimes limited design flexibility and creative freedom.

2. Challenges of Trying Something New: Since this was a new approach for the product, there were a lot of trial and error moments. We had to "test, make, fail, and try again," which brought its own set of problems and challenges.

3. Managing a complex system with numerous sections and components was overwhelming. Organizing and aligning everything took more time and effort than anticipated.