Figma Design · Shopify Dev · SEO · Performance
From Figma to Shopify
A skincare storefront built from scratch, combining custom design, Shopify development, foundational SEO, and performance optimization.
Figma Design · Shopify Dev · SEO · Performance
/ Project Overview
- Client
- Skincare brand
- Industry
- Skincare & Beauty
- Platform
- Shopify
- Role
- UI/UX Designer & Shopify Developer
- Services
- Figma Design · Shopify Development · Basic SEO · Performance Optimization · Conversion-Focused UX
I took this skincare brand from initial design to a launched Shopify store, handling the complete Figma design, storefront development, basic SEO, and performance optimization.
The goal was to create a cohesive shopping experience that introduced the brand clearly, presented its products effectively, and worked smoothly across desktop and mobile.
/ Storefront
Homepage Across Desktop & Mobile
The launched storefront uses a dark, product-led hero, clear hierarchy, and shopping actions sized for both desktop browsing and mobile purchase flow.
/ Design to Development
From Design to Development
I designed the storefront in Figma before translating it into Shopify. Owning both stages allowed me to carry the visual direction into the finished store, with close attention to layout, typography, spacing, and responsive behavior.
The result was a consistent brand experience across screen sizes, supported by a functioning ecommerce storefront.
/ Conversion Focus
Conversion-Focused Experience
Conversion-focused UX was part of the build from the design stage. My approach centered on clear visual hierarchy, accessible shopping actions, readable content, and responsive layouts that help visitors move from discovery toward purchase.
For a newly launched skincare brand, these foundations support product exploration and a more straightforward shopping journey.
/ SEO & Performance
SEO & Performance
Alongside development, I completed foundational SEO work and optimized storefront performance to support launch readiness.
The supplied Google PageSpeed Insights homepage reports recorded:
| Metric | Desktop | Mobile |
|---|---|---|
| Performance | 100/100 | 97/100 |
| Accessibility | 97/100 | 97/100 |
| Best Practices | 100/100 | 100/100 |
| SEO | 100/100 | 100/100 |
| Largest Contentful Paint | 0.5 seconds | 2.4 seconds |
| Total Blocking Time | 0 milliseconds | 10 milliseconds |
Results captured on November 3, 2026. These are homepage lab-test results; scores can vary between runs. The SEO score reflects Lighthouse checks rather than search rankings. Report screenshots are cropped to omit the tested URL.
/ Outcome
The Outcome
This skincare brand launched with a custom Figma-to-Shopify storefront, responsive design, foundational SEO, and strong measured homepage performance.
This project demonstrates my ability to take ownership of a complete ecommerce build—from the first design decisions through development, optimization, and launch.
Designed and developed by Mohid Imran.
/ Next
Need a Storefront Built From Design Through Launch?
Share your brand direction, Figma files or product catalog, and we can define the Shopify development scope your launch needs.