Lady Sloth Redesign – Assignment 3 Implementation

This project is the final stage of a user interface redesign for the independent Lolita fashion brand Lady Sloth.
It is based on the UI analysis from Assignment 1 and the design prototypes developed in Assignment 2.

This stage includes a working front-end implementation of the redesigned website using semantic HTML, modular CSS, and vanilla JavaScript. The focus is on improving usability, mobile responsiveness, and maintaining the brand's elegant aesthetic.

Project Goals

• Address major usability issues such as unclear layout, poor visual hierarchy, and mobile inaccessibility
• Improve structure, readability, and responsiveness across devices
• Preserve the original brand identity with better design and interaction flow

Features

• Semantic HTML structure with accessibility in mind
• Responsive layout using Flexbox, Grid, and media queries
• JavaScript interactions:
  • Product variant selection (colour and size)
  • Quantity adjustment and validation
  • Cart logic with localStorage persistence
  • Dynamic subtotal calculation and warnings on checkout

Deployment

• Hosted on GitHub Pages https://erin-reiraku.github.io/info20005-a3/
• Works well on desktop and mobile (tested on Surface Pro and iPhone 12 resolution)

Notes

This project was created as a front-end implementation assignment for INFO20005. It is intended purely for educational use and has no official affiliation with the Lady Sloth brand.
All behaviours are simulated using JavaScript in the browser without any backend or database.

Design Credits & Resources

Built with vanilla HTML, CSS, and JavaScript.
Fonts used: Playfair Display, Roboto, Lora, and Inter (via Google Fonts).
Some icon designs come from open source materials from Figma, lolibrary and Material Design Visual elements adapted from Canva frames and Haikei background generators.
Some colour palettes are based on Material Design 3 open-source tokens.
Styling inspiration and imagery were drawn from Lady Sloth’s original branding, especially its "Herbarium" and "Tea Time at Grandma’s" collections.
Some codes, icons and visuals were generated with the help of ChatGPT and customised based on product references.