Scentful Bliss

Candle Website & Mobile App

Scentful Bliss is a website I created to showcase an e-commerce store specializing in premium, hand-poured candles that bring luxury and warmth to your home. At Scentful Bliss, we believe a candle is more than just a scent—it’s an experience. Each candle is meticulously crafted to set the perfect ambiance, whether you're unwinding after a long day or adding a touch of elegance to any room. Explore our collection and let each fragrance transform your space.

In this documentation, I'll take you through my design process, from the initial lo-fi wireframes to the final polished design, and reflect on the key takeaways I gained from this project.

Project Role

Independent Project - Solo

Methods/Tools Used

Figma, Wireframing, Prototyping

Duration

October 2024

Approximately 2 Weeks

View Desktop Prototype

View Mobile Prototype

Design Rationale/ Process

Project Overview: For this project, I aimed to create an e-commerce website and mobile app for selling candles. The goal was to provide an intuitive, user-friendly experience that guides customers seamlessly from the home page to browsing products.

Research Phase: Before jumping into design, I conducted research to understand the common features of successful e-commerce websites. I looked at various platforms to draw inspiration from their UX/UI elements. This included studying how they structured their product pages, implemented filters, and organized the checkout process. I focused on how users interact with products and what makes the buying journey smooth, enjoyable, and efficient.

Key Features to Include:

Homepage Layout: Clear navigation to product categories, featured products, and promotions.
Product Pages: High-quality images, detailed descriptions, customer reviews, and related products.
Search Functionality: A prominent search bar for easy product discovery.
Shopping Cart: Easy access to the cart, with a clear path to checkout.
Mobile Optimization: A responsive design that ensures a smooth user experience on both desktop and mobile.

Wireframing Phase: Once I had a clear understanding of what the website should offer, I moved on to creating low-fidelity wireframes. These wireframes were essential in mapping out the structure of both the desktop and mobile versions of the site and app. I focused on organizing elements logically and ensuring users could easily navigate through the site.

Desktop Wireframe: I started with the desktop layout as it allows for more screen space. I placed a top navigation bar with easy access to product categories, a search bar, and the shopping cart. Below, I showcased featured products with larger images and clear CTAs (Call to Actions). The product detail pages followed a structured format with high-quality images and descriptions, as well as options for users to add items to their cart.
Mobile Wireframe: Given the increasing use of mobile devices for shopping, I adapted the desktop design to be mobile-friendly. I ensured the mobile layout was compact while still offering all the necessary features, such as filtering products, viewing detailed images, and easily navigating the checkout process. I paid close attention to thumb-friendly design, making buttons large enough for easy interaction.

Project Overview: For this project, I aimed to create an e-commerce website and mobile app for selling candles. The goal was to provide an intuitive, user-friendly experience that guides customers seamlessly from the home page to browsing products.

Research Phase: Before jumping into design, I conducted research to understand the common features of successful e-commerce websites. I looked at various platforms to draw inspiration from their UX/UI elements. This included studying how they structured their product pages, implemented filters, and organized the checkout process. I focused on how users interact with products and what makes the buying journey smooth, enjoyable, and efficient.

Key Features to Include:

Homepage Layout: Clear navigation to product categories, featured products, and promotions.
Product Pages: High-quality images, detailed descriptions, customer reviews, and related products.
Search Functionality: A prominent search bar for easy product discovery.
Shopping Cart: Easy access to the cart, with a clear path to checkout.
Mobile Optimization: A responsive design that ensures a smooth user experience on both desktop and mobile.

Wireframing Phase: Once I had a clear understanding of what the website should offer, I moved on to creating low-fidelity wireframes. These wireframes were essential in mapping out the structure of both the desktop and mobile versions of the site and app. I focused on organizing elements logically and ensuring users could easily navigate through the site.

Desktop Wireframe: I started with the desktop layout as it allows for more screen space. I placed a top navigation bar with easy access to product categories, a search bar, and the shopping cart. Below, I showcased featured products with larger images and clear CTAs (Call to Actions). The product detail pages followed a structured format with high-quality images and descriptions, as well as options for users to add items to their cart.
Mobile Wireframe: Given the increasing use of mobile devices for shopping, I adapted the desktop design to be mobile-friendly. I ensured the mobile layout was compact while still offering all the necessary features, such as filtering products, viewing detailed images, and easily navigating the checkout process. I paid close attention to thumb-friendly design, making buttons large enough for easy interaction.

Project Overview: For this project, I aimed to create an e-commerce website and mobile app for selling candles. The goal was to provide an intuitive, user-friendly experience that guides customers seamlessly from the home page to browsing products.

Research Phase: Before jumping into design, I conducted research to understand the common features of successful e-commerce websites. I looked at various platforms to draw inspiration from their UX/UI elements. This included studying how they structured their product pages, implemented filters, and organized the checkout process. I focused on how users interact with products and what makes the buying journey smooth, enjoyable, and efficient.

Key Features to Include:

Homepage Layout: Clear navigation to product categories, featured products, and promotions.
Product Pages: High-quality images, detailed descriptions, customer reviews, and related products.
Search Functionality: A prominent search bar for easy product discovery.
Shopping Cart: Easy access to the cart, with a clear path to checkout.
Mobile Optimization: A responsive design that ensures a smooth user experience on both desktop and mobile.

Wireframing Phase: Once I had a clear understanding of what the website should offer, I moved on to creating low-fidelity wireframes. These wireframes were essential in mapping out the structure of both the desktop and mobile versions of the site and app. I focused on organizing elements logically and ensuring users could easily navigate through the site.

Desktop Wireframe: I started with the desktop layout as it allows for more screen space. I placed a top navigation bar with easy access to product categories, a search bar, and the shopping cart. Below, I showcased featured products with larger images and clear CTAs (Call to Actions). The product detail pages followed a structured format with high-quality images and descriptions, as well as options for users to add items to their cart.
Mobile Wireframe: Given the increasing use of mobile devices for shopping, I adapted the desktop design to be mobile-friendly. I ensured the mobile layout was compact while still offering all the necessary features, such as filtering products, viewing detailed images, and easily navigating the checkout process. I paid close attention to thumb-friendly design, making buttons large enough for easy interaction.

Lo -Fi Wireframes (Desktop)

Lo -Fi Wireframes (Mobile)

Based on the concept of the project, I chose a warmer color palette for the website and app to create a softer, more inviting look. This choice aims to evoke a cozy, calming atmosphere that aligns with the comfort-driven experience candles provide

Hi-Fi Wireframes (Desktop)

Hi-Fi Wireframes (Mobile)

Next Steps & Improvements

To further enhance the website and app, I would focus on the following improvements for the future:

Checkout Page: Implement a detailed checkout page with order summaries, payment options, and shipping details for a smoother purchasing experience.
Hamburger Menu: Include a prototype of the hamburger menu, showcasing the items that appear when clicked, to improve mobile navigation.
Product Descriptions: Add dropdown descriptions for selected products to provide additional information, such as specifications, usage tips, or ingredient lists.
User Testing: Conduct user testing with a diverse group of users to gather feedback on usability and identify pain points, optimizing the design for different user groups.

Scentful Bliss

Candle Website & Mobile App

In this documentation, I'll take you through my design process, from the initial lo-fi wireframes to the final polished design, and reflect on the key takeaways I gained from this project.

Project Overview: For this project, I aimed to create an e-commerce website and mobile app for selling candles. The goal was to provide an intuitive, user-friendly experience that guides customers seamlessly from the home page to browsing products.

Key Features to Include:

Homepage Layout: Clear navigation to product categories, featured products, and promotions.

Product Pages: High-quality images, detailed descriptions, customer reviews, and related products.

Search Functionality: A prominent search bar for easy product discovery.

Shopping Cart: Easy access to the cart, with a clear path to checkout.

Mobile Optimization: A responsive design that ensures a smooth user experience on both desktop and mobile.

Project Overview: For this project, I aimed to create an e-commerce website and mobile app for selling candles. The goal was to provide an intuitive, user-friendly experience that guides customers seamlessly from the home page to browsing products.

Key Features to Include:

Homepage Layout: Clear navigation to product categories, featured products, and promotions.

Product Pages: High-quality images, detailed descriptions, customer reviews, and related products.

Search Functionality: A prominent search bar for easy product discovery.

Shopping Cart: Easy access to the cart, with a clear path to checkout.

Mobile Optimization: A responsive design that ensures a smooth user experience on both desktop and mobile.

Project Overview: For this project, I aimed to create an e-commerce website and mobile app for selling candles. The goal was to provide an intuitive, user-friendly experience that guides customers seamlessly from the home page to browsing products.

Key Features to Include:

Homepage Layout: Clear navigation to product categories, featured products, and promotions.

Product Pages: High-quality images, detailed descriptions, customer reviews, and related products.

Search Functionality: A prominent search bar for easy product discovery.

Shopping Cart: Easy access to the cart, with a clear path to checkout.

Mobile Optimization: A responsive design that ensures a smooth user experience on both desktop and mobile.

Lo -Fi Wireframes (Desktop)

Lo -Fi Wireframes (Desktop)

Lo -Fi Wireframes (Desktop)

Lo -Fi Wireframes (Mobile)

Lo -Fi Wireframes (Mobile)

Lo -Fi Wireframes (Mobile)

Based on the concept of the project, I chose a warmer color palette for the website and app to create a softer, more inviting look. This choice aims to evoke a cozy, calming atmosphere that aligns with the comfort-driven experience candles provide

Hi-Fi Wireframes (Desktop)

Hi-Fi Wireframes (Desktop)

Hi-Fi Wireframes (Desktop)

Hi-Fi Wireframes (Mobile)

Hi-Fi Wireframes (Mobile)

Hi-Fi Wireframes (Mobile)