Shopify Theme Development
Jewelry e-commerce redesign
Designed and developed a scalable Shopify e-commerce experience for a jewelry brand migrating to Shopify.
Project Scope
Shopify theme + e-commerce redesign
Role
UX/UI Design · Front-end Development
Project Duration
Sept 2024 – Jan 2025 (3rd Year Internship)
Website
The Challenge
My initial internship assignment was to design a scalable Shopify theme that could support different businesses looking for an affordable and customizable e-commerce solution.
Midway through the project, a real jewelry client needed to migrate their store to Shopify and redesign their website.
Instead of treating these as separate projects, I used this opportunity to apply the theme framework to a real business case, adapting it to the client’s brand, products, and customer needs.
affordability
flexibility
easy customization
strong brand differentiation
Business Needs
intuitive navigation
transparent pricing
fast shopping experience
trustworthy shopping experience
Customer Needs
Discovery
To structure the project, I followed the Design Thinking framework, using research, ideation, prototyping, and testing to guide the design process from discovery to implementation.
Design Thinking Framework
Secondary Research
I analyzed existing e-commerce platforms such as Shopify, Wix, Squarespace, and WooCommerce to better understand common UX patterns, customization opportunities, and usability issues within modern e-commerce experiences.
This helped me identify what worked well and where users commonly experienced friction.
Competitive Analysis
Primary Research
To better understand online shopping behaviors, I conducted surveys focused on browsing habits, product discovery, and checkout frustrations.
The research showed that users valued simple navigation, clear product displays, and fast checkout experiences, while cluttered layouts and overwhelming interfaces negatively impacted usability.
Surveys
Research Challenge
I initially created a separate survey for merchants, but reaching business owners proved difficult and most responses came from regular online shoppers.
To gather stronger business insights, I adapted my approach and scheduled direct interviews with a real client from my internship company.
These conversations provided more relevant insights into business priorities such as customization flexibility, scalability, and maintaining a strong brand identity.
Interview
Define
Defining the User
Personas
Using insights gathered during the discovery phase, I translated research findings into user-centered design decisions.
To better understand both business owners and online shoppers, I created personas and empathy maps that helped identify user motivations, frustrations, and expectations throughout the shopping experience.
Understanding User Needs
Empathy Maps
The empathy maps helped me better understand how both customer groups think, feel, and behave when interacting with e-commerce platforms.
This allowed me to identify recurring pain points such as overwhelming layouts, slow-loading websites, and limited customization options.
Defining the Root Problem
Finding the real problem
After synthesizing the research insights, I mapped out the core problems affecting both businesses and shoppers.
The analysis revealed a gap between business flexibility and customer usability. Businesses needed affordable and customizable solutions, while shoppers expected fast, intuitive, and trustworthy experiences.
This helped me define clearer priorities before moving into ideation and prototyping.
Design Opportunity
How might I create a scalable Shopify theme that allows businesses to stand out while maintaining a seamless and user-friendly shopping experience?
Ideate
From Research to Ideas
Brainstorming
Using insights gathered during the discovery and define phases, I started exploring possible solutions that could address both business and customer needs.
The goal was to create a scalable Shopify theme that balanced flexibility, usability, and strong visual identity.
Prioritization
Decision Matrix
I explored multiple feature ideas and design directions based on the research findings, focusing on areas such as customization, scalability, product discovery, and customer engagement.
To prioritize the most valuable concepts, I used a decision matrix that evaluated ideas based on a few factors.
This helped me focus on features that created the strongest balance between business goals and user experience.
Concept Development
Bento Grid
Based on the prioritized ideas, I developed the final concept direction for the Shopify theme.
The concept focused on creating a flexible and visually engaging experience that could adapt to different business needs while maintaining a seamless shopping experience for customers.
Key concept directions included customizable sections, industry-specific templates, seasonal promotional layouts and scalable design components
Prototype & Testing
Translating the Concept into a Real Experience
Shopify theme system + real client redesign
During this phase, I combined two goals within the same project: creating a scalable Shopify theme system while adapting it to a real jewelry client redesign.
To explore how the theme could support different business types, I designed two visual variations:
Beauty/jewelry
Fashion/clothing
This helped me test how the same flexible structure could adapt to different branding and content needs.
From Low to High Fidelity
Iterative prototyping across desktop and mobile
I started with low-fidelity wireframes to define the structure, layout hierarchy, and shopping flow across both desktop and mobile experiences.
From there, I iterated toward mid- and high-fidelity prototypes, refining navigation, product presentation, and visual consistency throughout the platform.
Stakeholder feedback and iterative design refinement
Adapting the Theme to the Client
Throughout weekly feedback sessions, the client’s visual preferences evolved several times, which required continuous iteration and refinement of the design direction.
To better align expectations, I started presenting multiple design options side-by-side, making it easier to compare solutions and communicate decisions more effectively.
This process helped me improve stakeholder communication while adapting the scalable theme system to the client’s more minimal and luxury-focused visual identity.
Scalable Design Components
Bridging design and development
As part of the original theme concept, I designed reusable seasonal and promotional sections that businesses could easily customize for campaigns such as Black Friday, holiday sales, or new product launches.
This reinforced the goal of creating a flexible and scalable Shopify theme that could adapt to different business and marketing needs.
Usability Testing
User testing, eye tracking, and iterative improvements
To evaluate the usability of the prototypes, I conducted both traditional usability testing and eye-tracking analysis using a Tobii Pro device.
Participants were asked to navigate the website, explore products, interact with sections, and complete shopping-related tasks.
The testing revealed strong visual attention toward product imagery and highlighted areas where layout hierarchy and section separation could be improved.
Based on the feedback, I refined section spacing and organization, product card interactions, information hierarchy and visual separation between content blocks.
The eye-tracking results also helped validate the luxury-focused visual direction by showing that users were naturally drawn toward the large product imagery and featured sections.
Front-End Implementation
Reusable promotional layouts and seasonal templates
Alongside the UX/UI design process, I also contributed to the front-end implementation of the Shopify theme.
I worked with:
Shopify Liquid
Tailwind CSS
Alpine.js
This involved building and customizing Shopify sections, translating Figma designs into responsive components, and collaborating with developers to ensure the final implementation stayed aligned with the intended user experience.
Through this process, I strengthened my front-end development skills and gained hands-on experience working with Tailwind CSS and modern Shopify development workflows.
Website Walkthrough
Outcome
A scalable Shopify theme system adapted to a real jewelry e-commerce experience, combining UX/UI design, front-end implementation, and usability testing.
Reflection
This project gave me hands-on experience designing and implementing a scalable Shopify theme within a real client environment, from research and prototyping to usability testing and front-end development.
Working closely with stakeholders throughout the process strengthened my ability to iterate based on feedback, balance business and user needs, and adapt designs to real-world constraints.
By contributing to both design and implementation, I also developed a stronger understanding of the relationship between designers and developers, improving the way I approach component structure, scalability, and developer collaboration in future projects.