Overview
Fluff & Fibre is a responsive e-commerce website for an eco-conscious clothing brand, aiming to create a captivating online experience for young adults passionate about sustainable fashion. We envisioned a modern, minimalist aesthetic, emphasizing clean lines and earthy tones.
Fluff & Fibre contains a home page, product page with product listings, about page with a company description and finally an events page with upcoming company promotional events.
The navy and grey sweater products are clickable and can be added to cart where the full checkout process is available.
Tools:
HTML, CSS, JavaScript
Gitkraken, Figma, Visual Studio Code, Github
Reflection
This project allowed me to gain more insights in web development, explore possible ways of structuring layouts, and how to compose colours effectively.
This was a large-scale project in a short time frame. It allowed me think more deeply in both company and customers' perspective and develop a simple, user friendly website with strong branding.
Process
My partner and I embarked on crafting an e-commerce website for an eco-conscious clothing brand, aiming to create a captivating online experience for young adults passionate about sustainable fashion. We envisioned a modern, minimalist aesthetic, emphasizing clean lines and earthy tones.
Collaborating seamlessly via GitKraken, we meticulously coded a style guide in HTML and CSS, defining the visual language for key elements like the header (featuring a subtly animated logo), product cards, and footer.
I took ownership of developing the home page (with a captivating hero banner), the product page (incorporating a sophisticated filtering system), and the events page (dynamically displaying promotions and sustainability initiatives).
Through think-aloud testing with six participants, we uncovered usability issues related to navigation, cart functionality, the checkout process, and minor cosmetic inconsistencies.
We iteratively addressed these issues, improving navigation, smoothing the transition to the cart, streamlining checkout, and refining the visual design. Finally, I implemented the "Add to Cart" functionality using JavaScript, dynamically updating the cart display and persisting data with local storage.
This collaborative and iterative process, facilitated by GitKraken, enabled us to deliver a user-friendly and visually appealing e-commerce website that effectively embodies the brand's commitment to sustainability.
Web Design Project
Website design and coding using HTML, CSS and Java Script
Context:
4-week academic project for a senior web development course.
Team:
Rebecca Wong
Contribution:
Team Management, Visual Design, UX Research, UI Design, Illustrator, Front End Development, Copy/ Content