# Butterfly – Cosmetic & Beauty E-commerce Website, UX Case Study

> Butterfly is an e-commerce website template for cosmetic and beauty brands: large, high-quality imagery, soft pinks and a luxurious calm, product pages with reviews, browsing by category and brand, promotional banners that sell, and a short way to checkout. Eight home pages are built from one kit of blocks, so a brand picks the story it tells first and keeps the system. Mohammad Azad designed and built it, responsive on phone, tablet and desktop.

- Web page: https://mohammadazad.com/templates/butterfly-cosmetic-eCommerce-website/
- Type: case study of a website template (beauty e-commerce)
- Role: UI design, UX, front-end development (HTML, Sass, Bootstrap)

| Key fact | Value |
| --- | --- |
| Home pages | 8, from one kit of blocks |
| Categories | 6 to shop by: makeup, skincare, haircare, fragrance, nailcare, grooming |
| Pages | 9 key pages |
| Sizes | Phone, tablet, desktop |
| Palette | Rose #E7489B, Blush #F7D4E6, Sage #E9F0EC, Ink #1F1F24 |
| Tools | Figma, Photoshop, HTML, Sass, Bootstrap |

## 01 – What it fixes

| A generic store | Butterfly |
| --- | --- |
| Products lost in a template made for anything | Large, high-quality imagery and calm space around every product |
| Shoppers hunting for skincare among everything else | Shop by category or by brand |
| One home page for every brand and every season | Eight home pages from one kit: pick the story, keep the system |
| Offers that look like everything else | Promotional banners for new arrivals, deals and seasons |

## 02 – My role

- **Design:** a clean, luxurious look for beauty brands.
- **UX:** categories, filters, product pages and checkout.
- **Development:** responsive on phone, tablet and desktop.

## 03 – What's in it

- **Home:** 8 layouts, promo banners, best of the week, new arrivals.
- **Shop:** categories, brands, filters, reviews.
- **Buy:** cart, checkout, sign in, free shipping.
- **Brand:** about, blog, FAQs, contact and stores.

## 04 – The core: eight home pages, one kit

On the page, a home-page picker: every home is built from the same blocks (heroes, category rails, product grids, offer banners, brand strips, journal cards). Pick one of the eight and watch it scroll in a browser frame, with the blocks it is built from listed beside it; it moves on to the next on its own.

## 05 – The screens: 9 pages in 3 parts

- **Shop:** the home page, the shop with filters.
- **Account:** sign in.
- **Brand:** about (two layouts), the journal, FAQs, contact, our stores.

## Links

- Next case study, Tickly: https://mohammadazad.com/portfolio/tickly-support-ticket-system/
- Mohammad Azad, portfolio: https://mohammadazad.com/
- LinkedIn: https://www.linkedin.com/in/mohammad-azad