Case Study · UX UI Lead

Rethinking the
Emirates Auction experience

The region's largest auction house. A complete UX/UI revamp covering cars, license plates and premium mobile numbers — across mobile, tablet and web.

Role
UX UI Lead
Year
2023 — Present
Scope
Research + UI
Platforms
Mobile · Web
It's live — visit the website
Emirates Auction — the region's largest auction house
Year
2023 — Present
Industry
Online Auctions / E-commerce
My Role
UX UI Lead · Research · Design System
Tools
Figma · Hotjar · Adobe XD · Adobe Photoshop
The region's largest
auction house

Emirates Auction is one of the UAE's leading online auction platforms for cars, license plates, and premium mobile numbers. The project involved a complete design revamp for the digital experience across mobile, tablet, and web.

The goal was to improve usability, reduce user drop-offs, and deliver a consistent, modern interface across all platforms. As UX UI Lead I was responsible for conducting user research and analytics, identifying usability issues, redesigning flows, creating wireframes and prototypes, testing with real users, and developing a cohesive design system.

On the backend side of the work, I documented UX specs and verified UI consistency during implementation — making sure the new system held together across mobile, tablet, and web.

Key challenges
Hard to bid or checkout
01
Inconsistent UI across devices
02
Confusing flows · high drop-off
03
Usability issues in every module
04
No status feedback while bidding
05
No scalable design system
06
Project Goals
↗ Make it easier to browse, bid, and sell with minimal friction
↗ Provide a seamless, consistent experience across mobile, tablet, and web
↗ Increase task completion rate and reduce abandonment
↗ Establish a scalable, reusable design system for long-term growth

Content

01 — Design Process

Design
Process

A two-phase user-centered process. The first diamond explores the problem — research, observation, and synthesis. The second diamond explores the solution — ideation, design, and validation with real users.

Doing the right things
Doing things right
Research Phase Synthesis Phase Ideation Phase Implementation Phase
Challange →
Discover Define
Develop Deliver
→ Outcome
Empathize
01 Identify problems in existing flows
02 Audit interface consistency
03 Hotjar + session analysis
04 Surface drop-off causes
Define
01 Quantitative research (8 users)
02 Objectives + measurable goals
03 User persona
Ideate
01 Golden Path mapping
02 User Journey Map (4 phases)
03 Opportunities per touchpoint
Design & Test
01 Style guide + design system
02 Before / After redesigns
03 Usability testing & iteration
03 — Define · Quantitative Research
8 users.
6 questions.
Clear patterns.

A quantitative survey with 8 Emirates Auction users — measurable data on usability, task completion, and satisfaction across the bidding and checkout flows.

Survey results — % of users reporting issue
20% Found it easy to place a bid on the platform
90% Want a more simplified, modern design
90% Feel the interface is inconsistent across mobile, tablet, and web
70% Have dropped off before completing a purchase or bid
50% — Payment friction

Half of users have faced issues understanding how to register or complete a payment. Checkout flow needs an audit.

50% — Comparison & browsing

Only half feel the current design supports easy product comparison and browsing across auction categories.

Conclusion

The results revealed a clear pattern of inconsistencies and usability challenges. Users reported confusion during essential flows like bidding and checkout — validating the need for a more intuitive interface, a consistent cross-platform experience, and streamlined task flows.

04 — Competitor Analysis

Competitors
analysis

Benchmarked three regional auction platforms (anonymized A · B · C) — bidding, checkout, and listings — to define opportunities for Emirates Auction.

Auction Platform A

Regional general-purpose marketplace. Strong listings + SEO, but dated bidding UI and a scattered checkout.

Strengths
High listing volume and search reach
Strong SEO and category landing pages
Live auction reminders via email and SMS
Recognized brand within the regional market
Weaknesses
Dated UI patterns and inconsistent mobile layout
Checkout split across many small screens
No clear bidding status feedback
Auction Platform B

Niche luxury auctions — premium plates and limited-edition vehicles. Trusted brand, but curated funnel and weak discoverability.

Strengths
Premium brand positioning and trust signals
Strong photography and item presentation
White-glove customer service flow
Clear bidder accreditation process
Weaknesses
Discoverability is weak — too curated
Mobile experience is an afterthought
Self-serve bidding feels limited
Auction Platform C

Mobile-first marketplace. Clear bid widget and strong notifications, but onboarding is long and gated.

Strengths
Mobile-first design, fast loads
Excellent bid status feedback (leading / outbid / won)
Push notifications for live auctions
Self-serve seller listing flow
Weaknesses
Long, multi-gate onboarding (deposit, ID, accreditation)
No category-rich browsing
Limited cross-platform consistency (web is weaker)
Features comparison matrix
Feature A B C
Streamlined bidding flow✗✗✓
Clear bid status (leading / outbid)✗✗✓
Cross-platform consistency✗✗✗
Map view for property auctions✗✗✗
Real-time notifications✓✗✓
Quick filters for categories✓✗✗
Auto-bid with clear leading state✗✗✗
06 — Empathize · Problems Identified

Challenges & analysis
of user feedback

  • ↗ Users struggling to complete tasks like bidding or checkout
  • ↗ Interface inconsistent across mobile, tablet, and web
  • ↗ Confusing user flows causing frustration and drop-offs
Module-wide usability issues

Major usability friction in almost every module — car listing, bidding process, profile, payments. The platform grew piecemeal and each module felt designed in isolation.

High drop-off pressure

70% of surveyed users have abandoned the platform before completing a purchase or bid. Drop-off concentrated around the deposit-increase and accreditation steps.

Cross-platform inconsistency

90% of users feel the interface is inconsistent across mobile, tablet, and web. Same task, three different patterns — users lost trust by jumping between devices.

20%

of surveyed users found it easy to place a bid on the existing platform. The other 80% needed help, gave up, or felt unsure their bid had even gone through.

07 — User Persona

User
persona

User personas were developed from research and feedback to surface real user needs, behaviors and pain points.

Primary Persona
Local entrepreneur running a small car dealership
Photo of Mohammed Al-Mansoori
Mohammed Al-Mansoori
37 · Car Dealer · Sharjah, UAE

Regularly uses Emirates Auction to buy and resell used vehicles. Tech-savvy enough to use online platforms but not deeply involved in complex tools. Clarity and trust are critical for him in any digital service.

Pain Points
— Trouble finding relevant listings quickly across the catalogue.
— Misses bids due to unclear button placement or hidden CTAs.
— Payment flow feels long and lacks confirmation steps.
— Doesn't always feel confident his bids went through.
Goals & New Experience
01 Buy cars at competitive prices to grow dealership margins.
02 Monitor, track and bid on vehicles from his phone while multitasking.
03 Real-time updates and reminders for upcoming or ending auctions.
04 Seamless bidding and checkout with vehicle history visible upfront.
Technology Use · Mobile-first behavior

Mohammed uses the Emirates Auction mobile app daily. He's familiar with WhatsApp, Instagram, Google Maps and online banking — and expects the same polish from auction tools.

Habits & Preferences
— Apps with clean design, large tap areas, easy navigation.
— Multitasks while bidding — calls, browsing, messaging.
— Wants vehicle history and inspection details before bidding.
— Expects consistent design across mobile, tablet and web.
Needs & Expectations
01 Find and act fast — minimal friction between "interested" and "bid placed".
02 Always know his status — leading, outbid, auto-bid, won.
03 Confidence in payment — clear steps, clear confirmations.
08 — Ideate · User Journey Map

Mohammed's
bidding journey

Scenario: Mohammed wants a unique plate number. He expects to find plate "1" in Emirates Auction, pay online easily with his debit card, and receive the plate within 2–3 days. The journey breaks into four phases — each with its own emotional rhythm, friction points, and opportunities.

01
Discover
Thoughts
"Is the price good? Could I find better offers?" Excitement mixed with confusion.
Touchpoints
Dubai Plates Details · Friends · SEO · Chatbot
Opportunity
Provide clear info for plate details, payment, delivery, terms and conditions — upfront.
02
Bid on Plate
Thoughts
"Will I catch this plate before the auction ends?" Excited but bored by long onboarding.
Steps required
Create account → Increase deposit limit → Bid on item
Opportunity
Make account creation, deposit, and bidding sequential and clearly stepped — never confusing.
03
Follow Results
Thoughts
"No, I'm not losing it. I'll bid again." Excitement + enjoyability when the system feels fair.
Touchpoints
Check results · Approval state · Bid is leading? · Bid again · Auction ended · My won items
Opportunity
Show bidding status clearly at all times — leading, outbid, auto-bid, won.
04
Checkout
Thoughts
"Is this website trusted? When will they deliver my plate?" Excitement clouded by uncertainty.
Steps required
View bill → Pay due amount → Add plate owner → Add delivery address
Opportunity
Aggregate delivery, set realistic timeline, and confirm every step with trust signals.
20%

found bidding "easy" before redesign — the rest experienced friction at one or more journey phases. The pain points map directly to design opportunities below.

09 — Design · From Ideation to Creation

Solutions &
approach

Auction Categories Overview
● Clean scrollable shelf displays many auction categories at once
● Each card shows data and auction status at a glance — no need to open the item
● Participation states color-coded so users instantly know their status
Enhanced Pop-up Experience
● Redesigned layout to fix UI flow and scrolling issues from overloaded content
● Optimised screen space, aligned with common user expectations
● Smooth scroll behaviour — especially for business-critical data
Improved Filtering Experience
● Moved filters to a dedicated side menu — separate from the main list
● Freed up space to show more auction items and reduce distraction
● Added Quick Filters for users who know exactly what they want
Smarter Search Results
● Search results match the auction-list card style — full item details inline
● No need to open a separate view
● Smart suggestions surface relevant results even when no exact match exists
Focused Bidding Experience
● Bidding widget given strong visual focus on the details page
● Status colours (Highest Bidder · Outbid · Auto-bid Leading) shown via clear gradients
● Same colour logic across auction list — visual consistency reduces cognitive load
Map View for Property Auctions
● Introduced map view for property auctions — explore items by location
● Selecting an item on the map opens the same familiar card layout
● Map stays in focus, no visual disconnect, seamless navigation
Optimised Bidding Flow — After
1
Discover & Browse
→
2
Create Account & Deposit
→
3
Place a Bid
→
4
Follow Live Status
→
5
Checkout & Delivery
✓
Cross-platform design system
A scalable token-based design system covering typography (Inter), 8-px spacing grid, full colour palette with bidding-status gradients, and reusable components — ensuring consistency across mobile, tablet, and web.
✓
Bidding status feedback
Clear visual states — Highest Bidder, Outbid, Auto-bid Leading — using gradients and the same logic across the auction list and item details. Users always know where they stand.
✓
Streamlined onboarding
Account creation, deposit limit increase, and bidding restructured into clear sequential steps — eliminating the maze that caused 70% drop-off pre-redesign.
✓
Optimised checkout flow
Streamlined process with fewer steps, clear confirmations, and aggregated delivery info with a realistic timeline — directly drove the +20% checkout-completion lift.
✓
Deposit experience
Online deposit rebuilt with clarity-first flows and confirmation steps — improving the digital channel deposit rate by ~10% versus the offline process.
✓
Smarter listing & search
Quick filters, smart search suggestions, inline item details — the catalogue became browsable rather than a series of dead ends.
Design System · v1.0 · 2026

The Design System.

Atomic-design library for the Middle East's leading auction house. Tokens, components and templates for every Emirates Auction surface — public website, bidder app, internal tools.

About this system

A comprehensive token + component foundation, organised as Atomic Design. Atoms compose into Molecules; Molecules into Organisms; Organisms into Templates. Every token traces back to a node in the source Figma file.

01 Colors→ 02 Typography→ 03 Logos→ 04 Icons→ 05 Dividers→ 06 Spacing→ 07 Radius→ 08 Shadows→ 09 Grid→ 10 Mobile UI→ 11 Buttons→ 12 Inputs→ 13 Chips & Tags→ 14 Avatars→ 15 Tabs→ 16 Switches & Toggles→ 17 Breadcrumbs→ 18 Indicators→ 19 Price Tag→ 20 Lot Cards→ 21 Navigation→ 22 Search→ 23 Filters→ 24 Accordions→ 25 Tooltip→ 26 Pagination→ 27 Info Messages→ 28 Map→ 29 Bid Panel→ 30 Modals→ 31 Footer→ 32 Templates→
01 / Atoms
The smallest pieces.
Color, type, logos, icons, spacing, radius, shadows, grid. These tokens never appear alone in product — they compose everything above.
02 / Molecules
Combinations.
Buttons, inputs, chips, avatars, tabs, switches, cards. Each pairs a few atoms into a single reusable interaction unit.
03 / Organisms
Full features.
Navigation, search, modals, bid panels, pagination, footer. These are full sections of a page — composed from molecules.
Foundation

Colors

A red-and-ink system. Brand red #CE0E2D is the bid-action color — used on the live ticker, the Bid CTA gradient, and the brand mark itself. Ink #1A1A1A is the primary body and the surface for all dark heroes. Eight-step ramps for every semantic family.

Primary · the brand red500 is the canonical brand red — used on the Bid CTA, brand mark, and LIVE chips
Primary 100#FFF1F3
Primary 200#FFDFE4
Primary 300#FFC5CE
Primary 400#FF9DAD
Primary 500#CE0E2D
Primary 600#A50F27
Primary 700#881427
Primary 800#4A0510
Neutrals · cool ink scale800 #1A1A1A is the brand ink — body text, headers, all primary-button backgrounds (non-Bid)
Neutral 100#FAFAFA
Neutral 200#F5F5F5
Neutral 300#E5E5E5
Neutral 400#B0B0B0
Neutral 500#888888
Neutral 600#5D5D5D
Neutral 700#3D3D3D
Neutral 800#1A1A1A
Success · forest greenUsed for bid-accepted toasts, "reserve met" chips, and confirmed-payment states
Success 100#F2FDF0
Success 200#DFFDDB
Success 300#C2F9B9
Success 400#30CB1C
Success 500#20A010
Success 600#1D8411
Success 700#175512
Success 800#063003
Info · cool blueUsed for non-urgent system messages and links inside info panels
Info 100#F1F7FE
Info 200#E3EDFB
Info 300#C0DBF7
Info 400#89BEF0
Info 500#3692E3
Info 600#1874D1
Info 700#1564B4
Info 800#0C3F75
Warning · amber · 4 stepsLast-hour countdowns, "ending soon" chips
Warning 100#FFF6EB
Warning 200#FEE4C7
Warning 300#F5E693
Warning 400#FB9724
Error · softer red · 4 stepsReserved for outbid alerts and validation. Distinct from the brand primary red.
Error 100#FFF1F2
Error 200#FFC4C9
Error 300#FF9AA3
Error 400#F20E23
Secondary · cool slate · 4 stepsSecondary borders, divider chips, "on light" outline buttons
Secondary 100#F4F6F7
Secondary 200#E2E8EB
Secondary 300#A2B5BE
Secondary 400#758F9B
Basic · system surfacesThe pure surfaces — page background, card surface, white, black
Basic BG#FAFAFA
Basic Surface#FAFAFA
Basic White#FFFFFF
Basic Black#000000
Foundation

Typography

Two font families. Inter is the system font for all UI and body — 12 to 80 px on a 110–160% line-height curve. Helvetica Neue Condensed Bold is the brand display face, reserved for page-hero titles and oversized moments. Arabic locale uses Noto Kufi Arabic, sized to match Inter’s x-height.

Display · Helvetica Neue Condensed Bold

Used 26× across the Figma library on page-hero titles (“Typography”, “Buttons”, etc.) at 56 / 48 / 40 / 32 / 20 / 16. Uppercase, tight tracking, ~100% line-height. Falls back to Barlow Condensed on systems without Helvetica.

EMIRATES AUCTION
PRESTIGIOUS NUMBERS
LIVE AUCTIONS TODAY
Display 1
AA
Helvetica Neue Cond Bold · 700 · 96 / 100% / +0% / upper
Display 2
AA
Helvetica Neue Cond Bold · 700 · 56 / 100%
Display 3
AA
Helvetica Neue Cond Bold · 700 · 32 / 110%

UI · Inter

The default font for body, buttons, captions — everything below the hero.

Header 1
Aa
Inter · 500 · 80 / 110% / −2%
Header 2
Aa
Inter · 500 · 64 / 110% / −2%
Header 3
Aa
Inter · 500 · 48 / 110% / −2%
Header 4
Aa
Inter · 500 · 32 / 120% / −1%
Header 5
Aa
Inter · 500 · 24 / 120% / −1%
Header 6
Aa
Inter · 400 · 20 / 140% / −0.5%
Body XL
Aa Bid on what's rare.
Inter · 400 · 18 / 145%
Body L
Aa Bid on what's rare, distinguished, and yours.
Inter · 400 · 16 / 150%
Body M
Aa Auctioned in the UAE since 2004.
Inter · 400 · 14 / 160%
Body S
Aa Caption-level supporting text.
Inter · 400 · 12 / 130%
Label L
Place bid · AED 1,250,000
Inter · 600 · 16 / 145% / −1%
Button
Bid · Buy now · Sell with us
Inter · 600 · 14 / 145% / −1%
Button S
Filter · All categories
Inter · 600 · 12 / 130% / −1%
Mono · timer
01:23:45 · 00:42:18
Mono · 500 · tabular numerals for countdowns
Arabic Header
الإمارات للمزادات
Noto Kufi · 500 · matches Inter x-height
Foundation

Logos

A bilingual double-chevron mark with stacked black-red-black chevrons and a red dot underneath. Always paired with the Arabic + English wordmark, except in chip-sized contexts (favicon, app tile) where the mark stands alone.

Dark
Light
Mark
Mark (on ink)

Clearspace + minimum size

Clearspace = height of the brand mark on every side. Minimum print height: 16mm. Minimum digital height: 32px (mark only) / 56px (full lockup).

Foundation

Icons

Stroke-based at 1.75-px on a 24-px grid using currentColor. Inherits its color from the surrounding text — red is reserved for the brand mark, never general icons. Filled variants are used only for active-tab states (selected nav, favourited lot).

Foundation

SPACING, RADIUS, SHADOWS & GRID

Spacing scale

A 4-pt / 8-pt rhythm. Component-internal spacing pulls from 4–16; section spacing from 32–96; page-frame side margins are 128 at desktop wide.

Corner radius

From 4 (chips) to 24 (modal). Pill radius (9999) is reserved for buttons and avatar.

xs · 4
sm · 8
md · 12
lg · 16
xl · 24
pill · full

Elevation

A flat-at-rest, lift-on-hover system. Cards never float — they sit on a 1-px hairline border and gain a small shadow only on hover or focus.

Shadow 1 · inputs at rest
Shadow 2 · cards on hover
Shadow 3 · modals
Card hover-lift

Grid

A 12-column grid with 24-px gutters and 128-px side margins, centered on a 1280-px max content width.

8 col
4 col
4
4
4
3
3
3
3
Foundation

Dividers

Hairline rules at 1-px for inline section breaks, 0.7-px for tight tabular divisions. Always use the neutral border tokens — never red.

Default · 1px · #E5E5E5
Cool border · 1px · #CBD5E1 (used on inputs / cool surfaces)
Strong · 1px · #2C2A29 (dark hero panels only)
On ink surface · 1px · rgba(250,250,250,0.12)
Vertical · for inline lists
Ending Today Motors Prestigious Numbers Properties
Foundation

Mobile UI Atoms

Native-shell primitives used inside the bidder app on mobile: iOS-style status bar, home-indicator pill, alphabetic keyboard. Sized to native iOS 15+ defaults.

iOS Status Bar

9:41
9:41

Home indicator

Alphabetic keyboard (iOS · light)

q
w
e
r
t
y
u
i
o
p
a
s
d
f
g
h
j
k
l
⇧
z
x
c
v
b
n
m
⌫
123
🌐
space
.
go
Molecules

Buttons

Two primary patterns. The black pill drives non-Bid actions (Continue, Sell with us, View items). The red gradient pill is reserved for placing a bid — the brand's most-clicked, most-watched action.

Primary actions

The Bid button — gradient, brand red

Secondary & text

Molecules

Inputs

Filled-at-rest, outlined on focus. The focus ring uses the brand red — never the blue browser default. Validation switches the border to error-red.

Plain-state · filled gray bg
Focused · primary border + red ring
Validation · invalid characters
Molecules

Chips, Tags & Avatars

Lot meta chips

LOT 12345 99,999 KM Cracked Sharjah Classic Premium

Status chips

Live Reserve met Ending soon Watching Won Outbid

Avatars

AB
HM
SK
N
AB
HM
SK
+24
Molecules

Tabs & Switches

Tabs · pill segmented

All
Motors
Plates
Properties

Toggle switch

Checkbox & radio

Molecules

Lot Cards

The brand's signature unit. Photo or plate render on top, lot meta + countdown + bid button below. Hover lifts the card. The Bid button is always visible — placing a bid takes one click and one confirm.

LOT 12345
♡⋯
Nissan Patrol Platinum 2022
99,999 KMCracked
23 bids⏱ 01:23:45
AED215,000
LOT 24681
♥⋯
SHJ3
2552
Sharjah · Plate 2552
Classic
412 bids⏱ 00:42:18
AED8,750,000
LOT 60223
♡⋯
AD17
7
Abu Dhabi · Plate 7
Single digitLive
1,209 bids⏱ 04:55:12
AED24,500,000
LOT 90412
♡⋯
Mercedes-Benz S 580 2024
12,500 KMReserve met
11 bids⏱ 02:48:30
AED525,000
Molecules

Breadcrumbs

Slash-separated, Medium 14, neutral. Current page is ink-1; ancestors are fg-2; hover lifts to ink-1 with a 1-px underline.

Default

With back affordance (mobile)

Long path · truncated

Molecules

Indicators

Status dots, badges, progress bars and step counters. Used to surface activity (bids, notifications), categorical state (live, ended) and progress (multi-step onboarding).

Status dots

Live Open Ending soon Ended

Numeric badges (notification counts)

12 3 99+

Progress bars

Bidder verification2 of 3 steps
Auction time elapsed68%

Stepper

✓
Account
2
Emirates ID
3
Deposit
4
Confirm
Molecules

Price Tag

The currency + amount pattern. Small AED prefix in fg-3 always precedes the number, which uses tabular numerals so digits don't shift on every bid.

Scale

AED1,275,000
XL · 56 / Bid panel current
AED215,000
M · 24 / Lot card
AED8,750,000
S · 16 / Inline

With delta

Current bid
AED1,275,000 ↑ +25,000

With increment selector

Increment + AED 25,000

Reserve / starting / sold variants

Starting bid
AED50,000
Reserve
AED200,000Met
Sold for
AED1,300,000
Organisms

Navigation

A two-row top bar — utility strip above, primary nav below. The utility row keeps account, calendar and language switcher always reachable; the primary row drives the seven core auction categories.

✦ Auction with EA📅 Auction Calendar
📍 Find a Branch? How toعربى
Emirates Auction
Ending Today Motors Prestigious Numbers Properties Surplus For Rent About Us
🔍 ♡ 🛒 A

Mega menu (Motors)

Motors
Categories
  • Vehicles
  • Machineries & Trucks
  • Bikes
Body Type
  • Saloon
  • Pickup
  • Station
Popular Makes
  • Nissan
  • Toyota
  • Mercedes
  • Honda
  • Chevrolet
Cars Auction FAQ →

Search

🔍

Pagination

…

Tooltip

?
Max-bid is the highest amount you'll auto-bid up to.

Info messages

You've been outbid · place a higher bid or set a max.
Bid accepted · AED 1,275,000 recorded.
Last hour · price increment increases to AED 25,000.
Verify your Emirates ID · required to place bids over AED 1M.
Organisms

Filters

A left-rail filter set for search and category pages. Accordion-style groups, range sliders for price/year, multi-select pills, and a sticky "Apply" CTA at the bottom.

Active filters · chip row

Showing 482 lots · Nissan ✕ BMW ✕ AED 50k–750k ✕ 2022, 2024 ✕ Clear

Sort · inline dropdown

Sort by Ending soon ▾ Grid view ▾
Organisms

Accordions

Used for FAQ pages, lot-detail spec collapse, and filter groups. Always full-width, 1-px dividers, 200ms ease on open. Title left, chevron right.

Default (FAQ pattern)

How do I place a bid? −

Once verified, open a lot from any auction page, set your max bid in the right rail, and press Place bid. We'll bid on your behalf up to your max, in the increment shown.

What is the deposit and is it refundable? +
When is the buyer's premium charged? +
How do I transfer a license plate after winning? +

Inline (lot specs)

Specifications▾
Inspection report▾
Documents▾
Bid history (412)▾
Organisms

Map

A neutralised raster map with brand-red pin markers and lot-card pop-overs. Used on Properties and Find-a-Branch pages. Markers cluster at low zoom and become labelled at high zoom.

5
12
23
AD
7
LOT 60223
Abu Dhabi · Plate 7
AED24,500,000
Map Satellite
Live lot Lot cluster (zoom in to expand)
Organisms

Bid Panel

The auction screen's anchor. Sticks to the right rail at desktop and the bottom on mobile. Always shows LIVE chip + countdown, current price, next-min bid line, an optional max-bid field, and the big red Place bid CTA.

LIVEAuction ends in00:42:18
Current bid
AED1,275,000
Next minimum · AED 1,300,000
AED
We'll bid up to AED 1,500,000 on your behalf.

Bid history

BidderAmountWhen
YouAED 1,275,000just now
Bidder #2841AED 1,250,0002m ago
Bidder #1192AED 1,225,0005m ago
Bidder #7723AED 1,200,00012m ago
Organisms

Modals & Pop-ups

A 24-px radius card on an ink-56% scrim, centered. Title on top, supporting copy in the middle, primary + secondary CTAs right-aligned at the bottom.

Confirm your bid

✕

You're about to bid AED 1,275,000 on LOT 12345 · Nissan Patrol Platinum 2022. Once placed, bids cannot be withdrawn.

Emirates Auction

Emirates Auction is the Middle East's leading auction house since 2004, organising public and online auctions for cars, plates, properties, jewelry and more.

© 2026 Emirates Auction L.L.C. · UAE Privacy · Terms · Cookies
Templates

UI Kits

Two full kits assembled from the atoms / molecules / organisms above. Each runs as a click-thru prototype: the public-facing website and the bidder-app workspace.

Public Website

Marketing site + browse experience. Top nav with mega menus, dark hero with full-bleed photography, live-auctions grid, sticky lot-detail drawer with real-time bid increment.

ReactRTL-readyClick-thru
Open prototype →

Bidder App

The live-auction workspace. Lot detail with sticky right-rail bid panel, My Bids table with status chips, Calendar of upcoming sessions, and a fixed bottom live-ticker.

ReactSignal-denseClick-thru
Open prototype →

Use this system.

Every token, type and component above maps to a node id in the source Figma library. The full source CSS lives in colors_and_type.css; the brand assets in assets/; the prototypes in ui_kits/. Drop the kit into any new EA surface and stay on-brand by default.

35 Figma pages· 109 frames· ~3,200 components· v1.0 · 2026
10 — Refined Booking Flow

Refined
booking flow

📅
Streamlined bidding flow
Redesigned for clarity — sequential steps from account creation to bid confirmation, with live status updates throughout
🔗
Cross-platform consistency
Mobile, tablet, and web share one design system — same patterns, same components, same visual language
📊
Live status feedback
Highest Bidder, Outbid, and Auto-bid Leading states surfaced via clear gradients — no guessing
Emirates Auction mobile item — after
✨
Enhanced UX
Clear pricing, status badges, and modern UI patterns with engaging auction cards across all device sizes
⚡
Future-ready system
Scalable token-based design system supports new categories, new flows, and new platforms without rework
🗺
Map view for property
Property auctions explorable by location — same card layout opens inline, no jarring view change
12 — From Ideation to Creation

Before & after

Side-by-side comparison of the redesigned platform. Each pair shows the previous experience next to the rebuilt one — status colors, card layouts and bidding feedback all tied back to the design system, across mobile, tablet and web.

Web · Old → New Emirates Auction homepage — old design (left) and redesigned dark theme (right)
Homepage — web From a dense, light-themed grid of categories to a focused dark hero with a single clear path into the bidding journey. Categories surface as a scannable shelf, not a wall of plates.
Mobile · Old → New Emirates Auction mobile app — old light-theme grid (left) and redesigned dark theme with focused categories (right)
Homepage — mobile Same shift on the app: search-first dark hero, fewer categories above the fold, status-bearing cards. Same design system as the web — the handoff feels like one product, not two.
Impact

The redesign didn't just solve usability problems — it gave Emirates Auction a foundation for scalable growth across every category and every device.

Through quantitative research, a consistent design system, and a redesigned bidding + checkout flow, the platform now lets users browse, bid, and pay with confidence — on whichever device they happen to be holding.

Arabian Systems · Emirates Auction · 2023 — Present

+20%
Checkout completion rate
+10%
Deposit rate via digital
3×
Platforms unified — mobile, tablet, web
6
Major flows redesigned end-to-end