AKAkhil Kumar
← All work

01 — Overview · E-commerce · Retail · Omnichannel CX

Home & Furniture Commerce — Web & App

The customer-facing commerce experience for one of the Middle East's largest furniture and home-improvement brands: its website and its iOS and Android app.

Company
Home & Furniture Retail, UAE
Role
Lead Product Designer — UI/UX & CX
Timeline
Web: Sep 2020 — Present · App: Jan 2023 — Present

02 — Problem

The brand sells across showrooms, a website and an app. Customers needed to move between inspiration, a large catalogue, layered offers, delivery choices and after-sales without the experience changing from one channel to the next.

Commerce features kept growing: wallet, reward points, gift cards, Click & Collect, instalments, delivery rescheduling. Each one needed a place that didn't make the core path to purchase harder.

03 — Users

  • Inspiration shoppers

    Browse by room and style before they know which product they want.

  • Deal-driven shoppers

    Want to see sale price, savings, points and bank offers clearly before deciding.

  • Customers at checkout

    Choose home delivery or Click & Collect, pin an exact location, and pick a payment or instalment option.

  • Returning customers

    Track orders, arrange returns, and manage wallet balance and gift cards on their own.

04 — My role

Lead Product Designer — UI/UX & CX

  • UX research
  • Customer journey mapping
  • Information architecture
  • Wireframes
  • Prototyping
  • UI
  • Design system
  • Front-end collaboration

Team · Partnered with product managers, developers and business stakeholders. The website is built in React.js and SCSS; the app in React Native.

What I owned

  • Led UX strategy and product design for the website and the mobile app
  • Ran UX research, customer journey mapping and competitor analysis
  • Designed the information architecture, user flows, wireframes and prototypes
  • Established and maintained the design system shared by web and mobile
  • Designed and optimised PLP, PDP, cart, checkout, wallet, rewards, gift cards, Click & Collect, order tracking and delivery rescheduling
  • Designed predictive search, layered navigation, rich PDPs and multi-step checkout

05 — Challenge

  • P1

    Large catalogue, many entry points

    Customers arrive from campaigns, categories and inspiration content, and each route has to lead somewhere useful.

  • P2

    Layered pricing

    Sale price, original price, savings, reward points, coupons and bank offers can all apply to one product, and need a clear hierarchy.

  • P3

    Delivery accuracy

    Addresses in the UAE are often imprecise, so checkout needed a map pin, not just a text address.

  • P4

    After-sales self-service

    Orders, returns, wallet credit and gift cards had to be manageable without contacting support.

  • P5

    Web and app drifting apart

    Two platforms shipping in parallel needed one set of patterns to stay consistent.

06 — Journey / workflow

Omnichannel purchase journey

  1. 01InspireIdeas browsed by room: living room, bedroom, kitchen, bathroom.
  2. 02BrowseCategories and listings with sort, filter, badges and live sale timers.
  3. 03DecideProduct detail: images, specs, reviews, recommendations, price, savings and reward points.
  4. 04CheckoutMulti-step: delivery or Click & Collect, saved or autocompleted address, wallet and other payment options.
  5. 05After purchaseOrder tracking, cancellations, returns, delivery rescheduling, wallet and gift cards.

07 — UX approach

Customer Journey → Information Architecture → User Flow → Wireframes → Component Strategy → Design System → UI → Prototype → Development

  1. Customer JourneyMapped inspiration → purchase → after-sales across web, app and showroom.
  2. Information ArchitectureBottom navigation built around Home, Categories, Ideas, Cart and Me; account organised by orders, links and settings.
  3. User FlowFlows for checkout, Click & Collect, returns, wallet top-up and delivery rescheduling.
  4. WireframesListing, product detail, checkout and account explored at low fidelity first.
  5. Component StrategyOne product card, one price block and one status stepper reused across every surface.
  6. Design SystemA shared web + mobile system covering tokens, components and responsive behaviour.
  7. UIBrand red for commerce actions; neutral surfaces so product photography leads.
  8. PrototypeInteractive prototypes for key purchase and account flows.
  9. DevelopmentWorked with developers on the React.js + SCSS website and the React Native app.

08 — Solution

Mobile app — from inspiration to after-sales
  1. 1Price block hierarchySale price leads, then the struck-through price, the saving, and points earned, so layered offers read in one glance.
  2. 2Order status as a stepperPlaced → Confirmed → In transit → In dispatch → Delivered, shown on the home screen as well as in orders.
  3. 3Map-pinned delivery“Long press and drag the pin” fixes the exact drop point, addressing imprecise addresses at the source.
  4. 4Self-service accountOrders, returns, wallet, gift cards and language (English / Arabic) are grouped under one Me tab.
  5. 5Sticky purchase actionAdd to cart stays pinned on product detail, with stock and delivery estimate next to it.

09 — Mobile UX decisions

Real screens at device size, each with the decision behind it. Tap a screen to view it full size.

  • Listing — product discovery

    Category shortcuts across the top, a two-column grid, and Sort / Filter as a floating pill at the bottom, within thumb reach.

  • Flash sale — urgency

    A countdown in the header and a stock bar on each card show urgency without leaving the listing.

  • Product details — the decision

    Tappable tags in the lifestyle photo; price, saving and points lead; quantity and Add to Cart stay pinned at the bottom.

  • Home — order tracking

    Order status sits on the home screen (Placed → Delivered); a bottom tab bar keeps Home, Categories, Cart, Wishlist and Me in reach.

  • Delivery location — forms

    Long-press and drag a pin for the exact drop point, instead of typing an imprecise address; one full-width confirm action.

  • Wallet — account

    Balance first, then the two main actions; Spendable / Pending / History tabs keep the detail one tap away.

10 — Design system

One design system serves the website and the app, so a product card, a price or an order status looks and behaves the same everywhere.

  • Product card

    Image, badges (new, % off, online only), price, was-price, add to cart.

  • Price block

    Sale price, original price, saving and reward points in a fixed order.

  • Status stepper

    Order progress reused on home, order list and order detail.

  • Navigation

    Bottom tab bar on mobile; category navigation on web.

  • Forms & checkout

    Address, payment selection and instalment options.

  • Responsive behaviour

    Components defined for mobile first, then adapted to desktop web.

11 — Design → code

  1. 01FigmaFlows, UI and prototypes for web and app.
  2. 02Design systemShared components and tokens across platforms.
  3. 03React.js · SCSS · React NativeResponsive web in React.js and SCSS; the app in React Native.
  4. 04ProductionThe website and the shopping app on iOS and Android.

12 — Outcome

  • Live on the website and in the shopping app on iOS and Android.
  • Improved product discovery and checkout efficiency by reducing friction in the purchase flow.
  • More engagement through wallet, reward points, gift cards and personalised content.
  • Reusable components gave design consistency and faster development across web and app.
  • Responsive, accessible experiences across desktop, tablet and mobile.