Websites
Katrielle Glow Studio: beauty shop redesign
A full redesign for a beauty and skincare shop in the Philippines: a quiet stone-coloured page, glass bottles catching a thin line of rainbow light, and the range arranged as a four-step routine. The new homepage loads 0.24 MB instead of 17.95 MB, the lightest in this series.
- Context
- Katrielle Glow Studio, a beauty and skincare shop in Marikina 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 black-and-yellow gradient card became a calm first screen: a large serif headline with a handwritten accent, a serum bottle and a jar on warm stone, and a thin rainbow line where the light breaks through the glass.
Policy section
Dark policy cards became a light 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 product still life fit the screen, with the cart always in the header.
Overview
Katrielle Glow Studio sells skincare, body care, and hair products from Marikina City. The new website is deliberately quiet: one material, one light effect, and a routine that tells visitors what to use first.
The problem
The old homepage downloaded 17.95 MB on every visit, 17.58 MB of it images, which took 14.5 seconds to load on a simulated 10 Mbps connection. On a 390 px phone screen its layout was 780 px wide, it loaded fonts and icons from three outside hosts, and its product photos showed third-party brands.
The solution
A rebuild with no framework, in stone, cream, and black with an elegant serif and a handwritten accent. The fifteen products are arranged as a routine in four steps, Cleanse, Treat, Protect and color, and Body and hair, customer quotes appear as glowing reviews, and the order summary is "Your routine". A thin spectrum line, like light through glass, is the only ornament. 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
- Fifteen products arranged as a routine in four steps: Cleanse, Treat, Protect and color, and Body and hair
- Product still lifes with blank packaging, replacing photos that showed other brands
- A thin spectrum line as the single decorative element
- Order summary titled "Your routine"
- 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 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 product
- Cart updates announced to screen readers, reduced-motion support, and HealthAndBeautyBusiness structured data
Technical challenges
The lightest page in the series
A restrained design is also a light one. With few, well-compressed images and no outside fonts or icons, the homepage loads 0.24 MB on desktop and on phones, and 0.44 MB after a full scroll.
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 availability first.
Own images instead of other brands
The old product photos showed packaging from other brands. The new still lifes use blank packaging, and the shop states that the photos are illustrations, so the page no longer suggests products or partnerships that aren't the shop's own.
Verified stack
- HTML
- CSS
- JavaScript
- WebP
- JSON-LD structured data
Facts from the code
- Homepage weight on load
- 17.95 → 0.24 MB
- On load, on a phone
- 17.95 → 0.24 MB
- After scrolling the whole page
- 17.95 → 0.44 MB
- Fully loaded, simulated 10 Mbps
- 14.5 → 0.37 s
- Phone layout width (390 px screen)
- 780 → 390 px
- Products in the shop
- 15
Outcomes
- Live at katriellebeauty.site.
- Measured with the same script: homepage on load down from 17.95 MB to 0.24 MB on desktop and on phones.
- No failed requests or console errors on the new site during the capture run.
Lessons
- One material and one light effect can carry a whole brand.
- A routine tells visitors where to start, which a grid doesn't.
- 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 with blank packaging and no people, and the site says so. Product descriptions and customer quotes on the site are carried over from the old site. In the old homepage screenshots, a location line and a personal name are blurred, and the old product grid isn't shown because it pictured third-party brands.
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.