KarmaShop

Project Overview

Designing a Store That Can Adapt

KarmaShop is an e-commerce platform designed to support stores with different brands, catalogs, and shopping needs. The aim was to build a shared product foundation that could be adapted for different businesses rather than recreate an entire storefront for each client.

A clothing store, a cosmetics retailer, and a specialist shop may share the same shopping structure, but their product attributes, filters, content, and visual identity can differ. The design needed to accommodate these differences while keeping the core experience consistent.

My Role

Connecting Product Decisions to Implementation

I worked across product structure, UX, UI direction, and AI-assisted development in collaboration with a frontend developer. My responsibilities included defining shopping flows, specifying interaction behavior, reviewing implemented interfaces, and checking consistency across desktop and mobile.

I used AI to turn design decisions into implementation instructions and to support iteration on the working interface. The frontend developer and I reviewed the output against product requirements, existing components, and backend constraints.

AI-Assisted Design & Development

From Product Design to AI-Assisted Development

The work followed an iterative cycle: identify a problem, examine relevant interaction patterns, define the expected behavior, translate the decision into an implementation prompt, and review the result in the browser.

Prompts described more than appearance. They included component states, data requirements, interaction scenarios, responsive behavior, and compatibility with the existing product. A filter change, for example, needed to account for multiple selections, internal search, persistent state, and the real catalog data.

AI supported implementation and iteration, while I remained responsible for evaluating the experience and refining the visual and interaction details. This gave me a more direct role in shaping the working product alongside the frontend developer.

A Reusable Storefront

Shared Structure, Flexible Product Data

Navigation, search, product listings, product details, cart, checkout, and account management formed the shared foundation. Branding, product attributes, category-specific filters, and selected content patterns could vary by store.

I approached components as parts of a connected product. Changes to a brand or catalog should not require separate versions of the same page or a complete rewrite of the shopping experience.

A Deliberately Neutral Visual Foundation

I deliberately avoided giving the base storefront a dominant visual identity. Restrained colors, straightforward typography, and reusable layouts leave room for each retailer’s branding, imagery, and content. The aim was to create a foundation that could take on different identities without redesigning the core shopping flows.

Navigation & Product Discovery

Helping Shoppers Find Their Way

I simplified the desktop navigation into a single row and refined the position of search, category access, account actions, favorites, and the cart. On mobile, a two-line menu icon and a multi-level category sidebar supported navigation within a smaller screen.

For product listings, breadcrumbs and subcategories carried category navigation, while filters focused on narrowing the available products. Multi-select controls supported attributes such as brand, color, and size; toggles handled availability and discounts.

Voice search and natural-language search scenarios were also explored. The intended behavior was to translate a request such as “black cotton coat, size 40” into relevant catalog filters, using the same listing components rather than creating a separate filtering experience. Speech-to-text included a chance to edit the query before searching.

Product Variants & Visual Selection

Different Products Need Different Choices

A product may require a size, a color, a model, a capacity, or several attributes together. I designed the selection patterns around the product’s actual attributes rather than assuming every item uses the same set of options.

Size options could appear as individual buttons, while other attributes could use dropdown selectors. For color, visual swatches or image-based options helped shoppers identify the variation they wanted. Selected and unavailable states needed to remain distinguishable across these controls.

The selected attributes needed to correspond to the correct product variant, including its price and stock availability. Required choices appeared before the add-to-cart action so shoppers could resolve them before purchasing.

In the working storefront, selecting a different color and size updates the product variant code. For example, the trench-coat page distinguishes a sage size 36 variant from a camel size 38 variant. Size 36 is unavailable for camel and appears disabled, making availability specific to the selected combination rather than the product as a whole.

The shared product card also accounted for these differences: some products could be added directly, while others required shoppers to choose their attributes first. Discounted, unavailable, and multi-variant products each needed an appropriate presentation without creating unrelated card components.

Supporting Purchase Decisions

Putting Purchase Decisions First

I organized the product page around the information shoppers need to make a choice: product title, ratings, price, selectable attributes, and the purchase action. Descriptive information could sit in accordions below this decision area.

Favorites and sharing stayed near the title, product images retained zoom behavior, and related products reused the same card component as the rest of the store. Card dimensions, image proportions, pricing typography, and option spacing were reviewed for mobile as well as desktop.

Cart & Checkout

Making the Next Step Clear

A cart drawer supported quick review and quantity changes without leaving the current page, while a full cart page offered a more detailed view before checkout. At a quantity of one, the decrease action could become a delete icon to make the result of the action clearer.

Shipping scenarios included unconditional free shipping, free shipping above a minimum order value, and costs determined later in checkout. A progress indicator communicated the remaining amount for conditional free shipping.

Checkout was structured around a stepper for recipient details, shipping information, and payment. The flow considered mobile-number verification, saved addresses, adding an address in a modal, delivery methods, and payment selection.

Changes to layout and interaction had to preserve real payment logic, validation, and backend integration. I reviewed these details with the developer rather than treating checkout as a set of independent screens.

Consistency in the Working Product

Keeping the Supporting Flows Consistent

The account area brought together orders, personal information, addresses, favorites, and support requests. I simplified the order summary, reduced unnecessary explanatory content, and clarified the active navigation state.

On mobile, dropdown navigation replaced the horizontal account menu. Address creation and support-ticket submission used modals, and signing out included confirmation.

Across the storefront, I reviewed component states, alignment, spacing, and responsive behavior in the implemented interface. The goal was to keep repeated interactions consistent as individual sections evolved.

Design Contribution & Reflection

A Closer Connection Between Design and Delivery

My contribution combined a reusable e-commerce structure, detailed interaction specifications, UI refinement, and AI-assisted implementation work with a frontend developer.

The project made the relationship between design intent and implementation especially visible. Defining an interaction meant considering its states, catalog data, responsive behavior, and technical constraints before reviewing it in the working interface.

This case study focuses on the design and development decisions. No measured post-launch results are presented.