Product card shows fabric, rating and savings at a glance
Component 01
Work / Case study 02
Nihara Ecommerce
A responsive B2B store for an ethnic-wear label. I designed the UX and UI and built the front end.
What I did
UX researchInformation architectureUI design
Design systemPrototypingFront-end build
A catalogue business buyers can actually order from
Nihara Designz sells sarees, set mundu, blouses and bridal wear to other businesses. Nihara Ecommerce is the web store where those buyers browse the range, check price and stock, choose sizes and quantities, and place an order.
I worked on it end to end. I set up the structure and the design system, designed the pages, and wrote the front-end code, so the live site is the design, not an interpretation of it.
- Client
- Nihara Designz
- Project
- Nihara Ecommerce
- Type
- B2B e-commerce
- Platform
- Responsive web, desktop to phone
- Tools
- Figma
- Live site
- Open the store
Design system
Components first, pages second
Before I laid out a single page, I built the parts every page would need: the product card, filters, buttons, pickers and alerts, in the brand's black and gold. Every screen in the store is assembled from this set, which kept things consistent and made new pages quick to add.
The cards below are taken from the component library, shown as they appear on the live store.
Plus Jakarta Sans for the store, Italiana for the logo
Component 02
Colour black and gold from the logo, ivory behind products
Component 03
Deal of the Day counts down in real time
Component 04
Stock alerts tell buyers what is running low
Component 05
Colour and size picked in one place
Component 06
Gold gradient CTAs mark every primary action
Component 07
Filters by category, fabric and occasion
Component 08
Delivery, returns and stitching answered before anyone asks
Component 09
The problem
Business buyers don't browse, they look up
A retail shopper might scroll for fun. A business buyer usually knows what they're after: a fabric, an occasion, a price band. They want to get to it quickly, see if it's in stock, pick the size and quantity, and move on to the next item.
The catch is that many of these products look alike in a small photo. Two sarees can be a few thousand rupees apart because of the fabric or the border. So the store's real job was to make those differences visible without opening every product.
What buyers need to know
Three questions before every order
01
Is it in stock?
Low stock shows on the product card and again beside the quantity selector, so nobody orders something that's nearly gone.
02
What exactly is it?
Fabric, weave, border, length and blouse piece are in a spec table on the product page. Easy to scan, easy to compare.
03
What will it cost?
Price, original price, discount and the saving are on every card. The free-delivery threshold is repeated right by the buy buttons.
Process
How the work came together
- 01Went through the catalogue and grouped it by category, fabric and occasion
- 02Mapped the main path: find, filter, compare, add to bag, order
- 03Wireframed desktop and mobile side by side
- 04Built the component library
- 05Designed the product page around specs, size and quantity
- 06Built the front end, responsive from the first line
- 07Handled the edge cases: empty filter results, low stock, long product names
Below are the wireframes next to the finished pages. Drag the handle to compare.
WireframeFinal design
Key decisions
Choices that made ordering quicker
FILTERS
Filter by what buyers ask for
Category, fabric and occasion, each option with a live count, plus sorting by newest, popularity, price and rating. The counts stop people clicking into empty results.
PRODUCT CARD
Enough on the card to skip the product page
Fabric, rating, colour options, price, discount and stock. For a repeat order, a buyer can often decide straight from the grid.
PRODUCT PAGE
Specs in a table, buttons always in reach
Colour, blouse size (including unstitched) and quantity sit together. Add to Bag and Buy Now stay on screen while you read the details.
LAYOUT
One website, two very different screens
Desktop gets a full search bar, category menu and filter sidebar. On a phone, the same site moves navigation to the bottom and turns filters into a drawer.
Responsive web
The same website, on a phone
This isn't a separate app. It's the same website in a phone browser. On small screens the layout changes so it feels like an app: the main navigation moves to a bottom bar within thumb reach, categories scroll sideways, and the filter sidebar becomes a full-height drawer.
Designing both sizes at the same time meant nothing had to be squeezed down at the end.
Outcome
Live, and built to keep growing
The store is live with the full catalogue, filters, product pages and the bridal made-to-order flow, on desktop and mobile. Because everything is made from the same components, adding a new category or landing page is mostly assembly.
Visit the live storeWhat I took away
- 01Building components before pages felt slow at the start and saved a lot of time later.
- 02Small things like filter counts remove a surprising number of dead-end clicks.
- 03Designing for phone and desktop together is easier than shrinking a desktop design at the end.
Keep exploring
Next: Twamo
Previous: Auto Marketplace Website