logo

GSUnit.com

Welcome to GSUnit.com - The Groove Satisfactory Unit™ — where web dev meets design, UX/UI flows like rhythm, and every pixel hits on and off, but never out of beat.


Online Store - Cosmetics

Project: Online Store - Cosmetics

Project Lead: Zee Raux
Date: 2007-09-11

Intro (UX/UI for Online Store - Organic Cosmetics)

Back in "2007", when I first designed a website for a friend's cosmetic business, the term "responsive design" didn't even exist. Websites were built with fixed layouts, often stretching awkwardly on big screens and shrinking to unreadable sizes on small devices. Still, the focus was on "clarity, product trust, and aesthetics" - values that remain just as important today.

Fast forward to now, and "UX/UI design" for an online store trading organic cosmetics is about more than just "looking good." It's about creating an experience that adapts to every device, making sure a customer browsing on a phone feels just as comfortable and engaged as one shopping on a laptop.

In this project, we take the lessons from the past - simple layouts, clear product categories, and a focus on natural beauty - and blend them with today's design standards:

  • Responsive design that adjusts seamlessly across screens.
  • User-friendly navigation that makes shopping intuitive.
  • Organic-inspired visuals (soft colors, clean typography, natural imagery) that reflect the authenticity of the products.
  • Trust-driven UI with transparent labeling, easy access to ingredients, and smooth checkout.

By combining the nostalgia of early web layouts with modern responsive UX/UI, we create an online store that not only sells organic cosmetics but also communicates the same values of "purity, care, and adaptability".

Pain-point discovered:

During user-flow testing, one frustration stood out. A returning customer wanted to add a few new items to their basket before proceeding to checkout.

  • They already had an account with the store.
  • From their last visit, a few items were still saved in the basket.
  • This time, they added new products and were ready to check out.

When they clicked "[Go to Checkout]", the site redirected them to a "prompt page" with three options:

  1. Check out without signing up
  2. Sign in and check out
  3. Sign up and check out

Naturally, as an existing customer, they chose "Option 2".

Here's where the pain started to throb:

After successful verification, instead of seeing the "combined basket" (previously saved items + newly added items), the checkout page displayed "only the new items".

Don't you find it frustrating? A customer expects their shopping history and basket continuity to be respected.

Solution implemented:

GSUnit Design Unit decided to find a cure for this frustration by adding an "option prompt" after successful verification, with two clear choices:

  1. Merge items? "Would you like to merge your new items with the already existing items before proceeding to checkout?"
  2. Replace items? "No, go to checkout with new items only."

This small but meaningful design change gave customers "control over their basket" and removed the unexpected loss of items. The frustration was fixed, and the checkout flow became smooth, predictable, and user-friendly.

Reflection:

At that time (2007), solutions like this didn't exist in common e-commerce platforms - much like how responsive design itself only emerged later. By identifying the issue early, GSUnit Design Unit highlighted a real gap in the checkout flow. Today, the fix is clear: give users control with a prompt to merge or replace basket items. Back then, it was ahead of its time.

--- ?? Want me to also give this a **visual mockup idea** (like how the merge/replace prompt could look in a modal) so your case study has both text *and* visuals?

Process

As this project was about organic cosmetic products, extensive research was carried out to organize the product categories in a way that made sense for customers:

  • By brand
  • By type (cream, lotion, soap, shampoo, etc.)
  • By gender
  • By age group
  • And more...

Once the product structure was clear, attention moved to the "theme and layout". From there, a "site map" was created to map user journeys and page relationships.

All of this was done the "old school way" - with pen and paper. (Mightier than the sword, as someone once said.)

Admin Dashboard

The admin page served as the control hub of the online store. From here, the store manager could oversee operations and maintain smooth functionality. The dashboard included:

  • Manage Users (Staff) - create, edit, or remove staff accounts with role-based access.
  • Manage Customers - view customer profiles, order history, and account activity.
  • Product Entry - create, edit, or delete products. Option to add "discounts or promotions" within a set time frame.
  • Manage Orders - track new orders, update statuses (pending, shipped, completed), and handle returns.
    track orders from start to finish with detailed status updates:
    • Goods being allocated
    • Goods leaving warehouse
    • Goods dispatched
    Each step included a checkbox for admin verification, and an automatic email notification was sent to the customer to keep them informed of the order's progress.
  • Customer Service - handle complaints and queries directly from the dashboard. Admins can respond via email without leaving the interface, ensuring timely support and improved customer satisfaction.
  • Exchange Rate Entry - update and maintain currency exchange rates to support multi-currency shopping.
  • Additional Tools - reporting, stock monitoring, and more as needed.

This page was designed as a "one-stop management panel", giving administrators full control without needing to navigate multiple areas.

Contact

Contact Zee Raux: zee-raux@gsunit.com (Project Lead)

Intro (UX/UI for Online Store - Organic Cosmetics)

Back in "2007", when I first designed a website for a friend's cosmetic business, the term "responsive design" didn't even exist. Websites were built with fixed layouts, often stretching awkwardly on big screens and shrinking to unreadable sizes on small devices. Still, the focus was on "clarity, product trust, and aesthetics" - values that remain just as important today.







BauGlide © Zee Raux - Flow your content sideways.


Tech Summary:

A horizontally scrollable interface component with:

  • Touch swipe support
  • Button-based smooth scrolling
  • Press-and-hold glide
  • Responsive design

Optional UI themes later:

  • BauGlide Neo (glassmorphism)
  • BauGlide Minimal (just essentials)
  • BauGlide Sonic (scrolls with sound effects)






Preview app