Order Form Revamp
Overview
The order form revamp was a critical UX initiative aimed at improving the core trading experience on the crypto.com Exchange. The goal was to unify component styling, improve responsiveness, and create a scalable structure that supports both novice and advanced traders across web and mobile
Role
Led the end-to-end redesign of the order form experience from problem framing to final delivery. My responsibility includes user research, interaction design, UI design, prototype and usability test.
Duration
2 months
Skills
Research, Strategy, Wireframe, Prototyping, Testing, UI Design
Problem
As the trading platform evolved with new features and growing user expectations, the existing order form design became outdated — lacking consistency, scalability, and responsiveness. To ensure a seamless and efficient trading experience across all devices and order types, a comprehensive redesign was necessary.
Research & Audit
Heuristic Review + UI Audit
Documented inconsistencies and pain points across different screen sizes.
Conducted competitive analysis to understand how other trading platforms structure their order forms and manage margin information, this helped us identify gaps in our own experience and oppotunities to differentiate.
Conducted in-depth user interviews that went beyond just usability testing of trading UI. Uncover broader trading behavioral patterns, feature expectations, and cross-platform comparisons. The research aimed to inform both immediate UI enhancements and long-term strategic improvements aligned with user needs.
User Research
Component Redesign
For advanced traders, efficiency is key - users often monitor charts, the order book, and place trades simultaneously. The order form redesign focuses on optimizing space with inline inputs and compact layouts, making it easier to scan and interact quickly. Components were restructured for clearer visual grouping, improving usability without sacrificing functionality.
Design Goals
-
Unify Component Behavior
Unify styles across all order types
-
Scalability
Support new features such as TP/SL without clutter
-
Clarity
Clear structure and labeling to reduce cognitive load
-
Responsiveness
Support customizable screen size, optimize for small and wide screens.
New Look
Improve Margin Visibility
User feedback highlighted appreciation for the colored scroll bar indicating available margin. We retained this feature and refined it to better distinguish between active and remaining scroll states, while also adding margin related information users frequently requested, improving clarity without adding visual noise.
Unified Order Type Options
OCO Order
Customizable Input Options
Added flexibility for users to enable quick price buttons (e.g. bid, ask), choose between slider or percentage inputs, and toggle steppers based on preference. Designed to suit both noivce and advanced traders.
Responsive & Scalable Design
Reduced input height and padding for smaller screens
Support dual form view on wider screens