Case Study — Shopify E-Commerce
MEF
Shopify storefront design and development for a mechanical engineering products brand — delivering a clean, conversion-focused e-commerce experience for a technical audience.
Role
Shopify Designer & Developer
Client
MEF
Stack
Shopify · Liquid · Figma
Services
E-Commerce · UI/UX · Web Design
Project Gallery
Overview
About the project
MEF is a mechanical engineering products supplier requiring a professional Shopify storefront. The brief called for a trustworthy, conversion-focused e-commerce experience that communicated precision and reliability — reflecting the engineering nature of their products while remaining accessible to a broad buyer base including both industry professionals and individual purchasers.
Shopify Development · UI/UX Design · E-Commerce · Figma Wireframing · Liquid Templating · Responsive Design
Challenge & Approach
Engineering trust through design.
The Challenge
Engineering trust through design
Designing for a technical audience while keeping the purchase flow clear and intuitive for first-time buyers unfamiliar with the product range. Product pages needed to balance technical specifications with clear calls-to-action — without overwhelming non-specialist buyers.
The Approach
Clean precision, clear conversion
A dark, professional visual language with clear product photography, spec-forward product pages, and a streamlined checkout experience. Technical product details were presented clearly alongside professional imagery to build confidence in buyers at every stage of the purchase journey.
Tech & Build
Shopify custom theme
✦ Shopify platform & custom theme
✦ Liquid templating language
✦ Figma wireframes & high-fidelity designs
✦ Responsive mobile-first implementation
✦ Product photography layout optimisation
Key Findings
What worked, what I’d change.
What Worked Well
The product page layout received strong positive feedback — clear specification presentation alongside professional imagery built confidence and reduced pre-purchase enquiries. The professional visual identity positioned MEF as a credible supplier in their sector.
What I’d Do Differently
More attention to mobile-first design from the outset would have streamlined the build process — initial wireframes were desktop-biased and required additional mobile optimisation passes during development.
Interested in working together?
Book a free discovery call or browse more of my work below.