🧵 UI/UX Case Study: MAK Fashion – Mobile-First B2B Fashion Ordering Website

📌 Project Overview

Client: MAK Fashion
Industry: Fashion Wholesale (Women’s Ethnic Wear)
Role: UI/UX Designer & Web Designer
Tools Used: Figma, Notion, Google Sites, ChatGPT
Duration: 1 week
Platform: Mobile-First Web Design

Objective:
Design a mobile-first website to streamline the product browsing and order placement process for MAK Fashion's wholesale buyers, replacing the current WhatsApp-based manual system. 

🧩 The Problem 

MAK Fashion is a growing women's ethnic wear wholesaler that primarily deals with boutique owners and store owners. Currently, the entire catalogue and order process is managed manually over WhatsApp, where sellers share images for each design in multiple colours. 

Key pain points: 

• Cluttered image sharing: Each design has 3–4 colour variants, leading to dozens of images sent per customer. 

• Communication confusion: Buyers often miss design/colour combinations due to overload of images. 

• Order mismatch: Orders are sometimes placed incorrectly due to lack of clarity, causing time loss and errors. 

• No centralized catalogue: Clients have to scroll endlessly through chat to find previous designs. 

• The seller has limited technical knowledge and requires a simple, cost-effective solution.

Challanges Faced During the Project: 

• The client has limited technical knowledge and no dedicated technical team.

• They needed the ability to update product photos daily without technical support.

• The project had to be delivered within a tight budget.

• The client wanted to avoid recurring annual hosting or renewal fees.

• I had to design the UI with the constraint of using Google Sites as the hosting platform, ensuring it was both simple and functional with its limitations.

🔍 User Research Insights 

• Interviews with 4 boutique buyers and 2 sales reps. 

• All users preferred mobile-first access as 90% of their interaction happens on smartphones. 

• Most buyers screenshot designs from WhatsApp chats to remember them — a signal of poor UX. 

🧠 Design Goals 

• Create a mobile-first website to serve as a digital catalog. 

• Enable easy browsing by design and color variant. 

• Clients can browse the website, choose colors and quantities, and place orders by sending the product number through SMS. 

• Maintain a clean and minimalist UI suitable for business use. 

✏️ Design Process 

1. User Flow Mapping 

• Entry → Browse Categories → View Design → Choose Color → Place Order 

2. Wireframes 

• Low-fidelity wireframes were created in Figma focusing on thumb-friendly navigation, swipeable design galleries. 

• 3. High-Fidelity Designs 

• Mobile-first UI with: 

• Product galleries showing all color variants. 

• Each product has a unique number and an order button linked directly to WhatsApp. 

4. Prototype 

• Interactive prototype created in google sites to simulate the user journey. 

✅ Key Features Delivered 

• Mobile-optimized product catalog with swipeable images. 

• Real-time order form integrated below each product. 

• WhatsApp fallback button for any urgent queries. 

📈 Results & Impact 

• Reduced buyer decision time by approx. 40%. 

• Sales team reported fewer errors in order details. 

• Improved client satisfaction by reducing image clutter. 

• Increased repeat orders due to easier design recall. 

🪞Reflection 

This project demonstrated how solving a basic UX communication issue in a niche B2B market can dramatically improve efficiency. It emphasized the power of mobile-first design and tailoring the experience to a non-tech-savvy user base. If given more time, I’d add: 

• Backend dashboard for inventory updates 

• Image compression for faster mobile loading