Brushstrokes: Skin-Care E-Commerce Prototype
A clean, elegant, and responsive storefront for a premium skin-care brand.
Overview: The Challenge
For a premium skincare brand, an online store must be more than just functional—it needs to convey elegance, quality, and a seamless user experience. The challenge was to design and develop a complete e-commerce prototype from scratch that was not only visually appealing but also structured with a clean, maintainable codebase using React.js.
Live Demo | GitHub Repo | View the Figma Design
🎯 Key Features & Tech Stack
As the sole developer and designer, I built this prototype with a focus on a clean user interface and a modern, lightweight tech stack.
- JSON-Powered Catalog: Product information (names, prices, images) is dynamically loaded from a local JSON file, demonstrating a flexible approach to static data management in a React application.
- Component-Based UI: The entire interface, from the product grid to the navigation, was built with reusable React components for a clean and scalable architecture.
- Dynamic Animations: Subtle animations and transitions were implemented with CSS to enhance user engagement and provide a polished, modern feel.
- Custom UI/UX Design: The visual identity, layout, and user flow were designed and developed from the ground up to create a unique and compelling brand experience.
🖼️ The Live Product in Action
Here are some key features of the final deployed website, showcasing how specific design choices create an intuitive and elegant shopping experience.
Interactive Virtual Try-On
To bridge the gap between online and in-store shopping, an interactive “Virtual Try-On” feature was designed. This allows users to see how products might look, increasing engagement and purchase confidence.
Clean Product Showcase
The product listing uses a clean, spacious grid layout. Each product card clearly displays the item, name, and price, with a simple hover effect that encourages user interaction and exploration.
Building Trust with Testimonials
A dedicated testimonials section builds social proof and customer trust. The clean, quote-focused design makes the feedback easy to read and adds a layer of authenticity to the brand.
🎨 Design & UI/UX Process
The design goal was to create a functional and visually appealing prototype that reflects the quality of a premium skincare brand.
- Audience: Customers interested in high-quality, nourishing skincare products.
- Color Palette: A soft and natural palette to evoke a sense of calm and quality.
- Typography: An elegant serif for headings and a clean sans-serif for body text were chosen for their classic and readable qualities.
UI Mockups
These are the final mockups that guided the development process.
| Desktop UI | Mobile UI |
|---|---|
 |  |