Concept project · Mobile application · Qatar / Middle East
Designing Clarity for High-Stakes Mobile Bidding
A UI/UX assignment to transform an established auction interface into a clearer, more contemporary, and more consistent product experience.
Overview
The brief: upgrade the existing mobile auction UI, refine navigation and hierarchy, simplify bidding, and establish a coherent visual system without discarding the established color direction.
The interface made users work too hard to understand where they were, what mattered in an auction, and what action to take next. Dense presentation, competing navigation layers, fragmented bid information, and inconsistent components weakened clarity across discovery and bid management.
The objective: create a consistent path from finding an auction to understanding its status, placing a bid, and tracking the result — turning a visually busy transaction flow into a composed decision-making experience that feels dependable, premium, and easy to scan.
Discovery & evidence
Start with the experience that existed
The assignment brief and supplied reference screens were the available inputs. No independent user research, analytics, or usability study findings were supplied, so the observations are framed as design-review inputs — not verified research results.
Client identity, organization details, and original branding are intentionally omitted. No inferred user quotes, personas, metrics, or behavioral claims have been added.
Key design insights
Three clarity gaps shaped the response
Assignment-informed design observations derived from the supplied interface — not standalone research findings.
- 01 / Navigation — Too many elements appeared equally important. Establish clear levels for destinations, categories, status, and utilities.
- 02 / Auction context — Critical bid information was visually dispersed. Group time, amount, status, and action into one decision area.
- 03 / State visibility — Active, won, and outbid states lacked a unified language. Pair semantic color with explicit text labels and consistent placement.
Design objectives
Observable goals, not generic ambitions
Each objective describes a change that can be inspected directly in the final interface.
- Make discovery predictable — give categories, auction states, search, and filters distinct roles in the browsing journey.
- Surface decision-critical data — keep status, time remaining, current bid, and the next action visible without competing signals.
- Clarify bid commitment — separate bid entry, review, confirmation, and success into understandable moments.
- Standardize repeatable patterns — use consistent cards, statuses, fields, navigation, and action hierarchy across core journeys.
Design strategy
Organize around decisions, not screens
The strategy connected information architecture, auction status, and bid commitment into one coherent journey: Discover (browse and narrow) → Evaluate (understand item and status) → Commit (enter and review bid) → Track (monitor active bid) → Resolve (recognize won or outbid).
Information priority: 01 Decide — status, time, amount, action. 02 Understand — item details, bid history, terms. 03 Navigate — categories, search, filters, saved items.
- One dominant action — keep the next meaningful step visually unmistakable.
- State before decoration — use explicit labels and hierarchy before relying on color.
- Consistency builds trust — repeat patterns where users repeat decisions.
Solution · Discovery
A clearer entry point into a dense catalogue
Search, categories, auction states, and filters receive distinct visual roles. The auction card concentrates item imagery, status, timing, metadata, and current bid into one scannable unit.
Decision: separate browsing controls from auction content. Rationale: reduce competition between navigation, filters, and item information.
Solution · Bidding
A deliberate path from intent to commitment
Current bid, time remaining, bid amount, increments, and the primary action form one visual sequence. A separate review step makes the bid value and auction context explicit before confirmation.
Decision: introduce review and success as distinct states. Rationale: make a consequential action easier to verify and understand.
Solution · Bid management
Status becomes visible, labeled, and actionable
Active, won, and outbid auctions use consistent layouts while preserving the information each state needs. Color supports the message; it does not replace it.
Decision: use stable card anatomy across bid states. Rationale: make comparison easier while keeping state differences unmistakable.
Mini design system
A compact language for repeated decisions
Limited to foundations and patterns evidenced in the supplied design work: color roles (primary, background, surface, text), Roboto typography (Display / Price 32/40 · 700, Headline / Screen 24/32 · 500, Body / Primary 16/24 · 400, Label / Button 14/20 · 500), and a 04 · 08 · 16 · 24 · 32 · 48 spacing scale.
- Components — buttons, cards, fields, navigation, status indicators
- States — live, active, won, outbid, ended
Validation & delivery
Clear about what is known — and what is not
No usability-study evidence was supplied, so the case study does not claim test findings, user feedback, or iteration outcomes. No stakeholder approval status is claimed; presentation, review, acceptance, and implementation status remain intentionally unspecified.
Documented design outputs: refined mobile UI, reusable components and variants, a mini design system, and an interactive Figma prototype.
Outcome & business value
A qualitative outcome, responsibly framed
No quantitative performance, user, or business metrics were supplied. The value below describes what the delivered design supports — not measured impact.
- User value — supports faster interpretation of auction status, timing, amount, and next action.
- Product value — creates a coherent experience across discovery, bidding, and bid management.
- Operational value — provides reusable patterns that can reduce inconsistency in future design work.
- Strategic value — establishes a more premium and trustworthy direction for a high-value marketplace.
Reflection
Clarity is a product quality, not a visual style
The strongest design move was not adding more polish. It was deciding which information deserved priority at each moment, then making that logic repeatable across the system.
- Interface audit against the assignment brief
- Navigation and information hierarchy refinement
- Core mobile screen redesign
- Bid-flow and state definition
- Mini design system and reusable components
- Interactive Figma prototype
Next case study
SecureVault — Enterprise Identity & Access, without the friction
Enterprise SaaS · Security & GovernanceContact
Let’s talk about the problem, not just the solution.
I’m open to senior product design, UX leadership, design systems, and AI-native product opportunities.
Get in touch