Websites
Micara Fashion House: clothing shop redesign
A full redesign for a clothing shop in the Philippines, built around a clothesline: warm orange walls, pieces pegged on a line for her, for him, and for kids, and an order summary that hangs like a garment tag. The new homepage also loads 0.75 MB instead of 32.66 MB.
- Context
- Micara Fashion House, a clothing shop in Caloocan City, Philippines.
- My role
- Design, frontend development, and image production
- Year
- 2026
My redesign: before and after
The old site next to my design, at the same screen size.
Homepage
A pink gradient card with the logo became a sunny wall: a warm serif headline on orange and a row of everyday clothes pegged on a line, with clear buttons to shop and learn more.
Shop
A grid of small product cards became "Fresh off the line": pieces hanging on hangers along a drawn clothesline, grouped for her, for him, kids and teens, and everyone.
Policy section
Light policy cards became a cream band with a one-line summary and a link to each full policy.
On a phone
The old phone layout was 780 px wide on a 390 px screen. Now the headline, two buttons, and the clothesline fit the screen, with the cart always in the header.
Overview
Micara Fashion House sells everyday clothing for women, men, and kids from Caloocan City, and takes bulk orders for teams. The new website takes its look from the simplest picture of fresh clothes: a line of pieces drying in the sun.
The problem
The old homepage downloaded 32.66 MB on every visit, 32.29 MB of it images, which took 26.4 seconds to load on a simulated 10 Mbps connection. On a 390 px phone screen its layout was 780 px wide, and it loaded fonts and icons from three outside hosts.
The solution
A rebuild with no framework, in warm orange, terracotta, and deep green with a soft serif display face. The catalogue hangs on clotheslines in four groups, a short section invites bulk orders for teams, customer quotes appear as word on the street, and the order summary is a hanging garment tag. Images are compressed WebP files that load as the visitor scrolls, and the fonts ship with the site, so the homepage makes no third-party requests.
Screenshots
Captured from the real, live website.
My contribution
Designed and built the new site, produced the image set and compressed it for the web, rebuilt the cart and order page, and measured the old and new versions with the same script.
What it does
- Catalogue on clotheslines in four groups: for her, for him, kids and teens, and for everyone
- Fifteen products on hangers, each with price, stock, and an add button
- Section for bulk orders, for teams that need to be dressed together
- Order summary styled as a hanging garment tag
- Cart with quantity controls and a reminder that nothing is paid yet
- Order sent as a pre-filled email that the customer sends, with the team confirming size, color, and availability first
- Field checks on the order page, including Philippine mobile number formats
- Note in the shop that the photos are illustrations and may differ from the piece
- Cart updates announced to screen readers, reduced-motion support, and ClothingStore structured data
Technical challenges
A simple picture that carries a whole shop
A clothesline is instantly familiar and fits everyday clothing. The line is drawn once per group, so it organises the catalogue without adding images or weight.
Ordering with no backend
The site is static, so it can't place an order by itself. The order page checks the details and opens a complete pre-filled email for the customer to send, and it explains that the team confirms size and availability first.
New photos, honestly labelled
The shop's own photos weren't used, so every product image is a generated illustration. The shop says so, and the case study doesn't present the new images as photos of the original pieces.
Verified stack
- HTML
- CSS
- JavaScript
- WebP
- JSON-LD structured data
Facts from the code
- Homepage weight on load
- 32.66 → 0.75 MB
- On load, on a phone
- 32.66 → 0.70 MB
- After scrolling the whole page
- 32.66 → 1.26 MB
- Fully loaded, simulated 10 Mbps
- 26.4 → 0.52 s
- Phone layout width (390 px screen)
- 780 → 390 px
- Products in the shop
- 15
Outcomes
- Live at micarastyle.store.
- Measured with the same script: homepage on load down from 32.66 MB to 0.75 MB on desktop and 0.70 MB on phones.
- No failed requests or console errors on the new site during the capture run.
Lessons
- The most familiar picture is often the strongest concept for everyday products.
- Grouping by who it's for helps visitors find their section fast.
- If images are illustrations, say so on the page.
About this case study
Client website, shown by name. Screenshots and measurements come from one capture script run on the old and new site, on a local server. The 10 Mbps figure is a simulated connection, not data from real visitors. The product and scene images are generated illustrations, and the clothesline is a visual concept; the site says the photos are illustrations. Product descriptions and customer quotes on the site are carried over from the old site.
Planning a new website, or is yours too slow?
Describe it in a few sentences. You'll get a reply within two business days with questions, a rough approach, and a price range in CHF.