WebTrader Revamp POC
A proof of concept for the future of WebTrader. Built on competitor insights and user feedback, it's a starting point for discovery with the Product and Engineering teams — to align on direction and shape the roadmap forward.
Toward a Pepperstone One vision
Pepperstone is evaluating the WebTrader platform as the basis for a single multi-asset platform housing both CFDs and Crypto as two realms under one proprietary interface — a step toward the "Pepperstone One" vision.
Strategic drivers: multi-device is now the default (75% of clients trade on more than one device; ~60% mobile / 40% desktop), platform ownership enables faster iteration and reduced third-party reliance (e.g. cTrader), and it aligns with the FY25 pillars: Platform Advantage and Exceptional Digital Experiences.
What's broken today
We collaborated with UXR to run a survey that received 93 responses. Three clusters emerged across performance stability, feature comprehensiveness and usability.
- Charts freezing or failing to load
- Prices not updating, blank sessions
- Orders not executing or rejected
- SL/TP not triggering
- Pricing discrepancies vs competitors
- Unintuitive TP/SL, no drag-to-set
- One-click trading still needs confirmation
- Inconsistent charting tools
- Small buttons, no font sizing
- Constrained layout customisation
- Drag-and-drop SL/TP
- Default SL/TP presets
- Lower timeframes
- Exportable history
- Better search, a desktop version
The common thread: traders don't fully trust the platform, and everyday actions cost more effort than they should.
What “good” looks like
To understand the current landscape of best-in-class TradFi experiences, I conducted an intensive analysis of 13 competitors to learn about:
- How competitors prioritise different trading workstations and layout
- What the essential features and interactions are
- What the navigation flow patterns look like
- How competitors contextualise the experience with cross-panel interactions to inform trading decisions.
Key takeaways
- Top + left navigation combination is widely used
- Top nav reserved for utility (account, notifications, search)
- Sidebar for in-depth trading modules — watchlists, portfolio, orders
- Right-hand side, usually collapsible or foldable
- Keeps the chart visible while placing an order
- Charting is the prime area
- Account performance at the top, kept minimal
- Watchlist in the upper fold, then portfolio
- Order entry lives in the right panel, collapsible
- Multi-chart preset at 2 / 4 / 6-up combinations
- Multi-symbol views are essential
- Kraken, Trade212 and XTB set the bar
- Legibility, consistent states, clear hierarchy
- Symbol sync and panel linking are table stakes
- Snap-to-grid customisation reduces cross-panel friction
Collaboration on DRD & BRD
The project hasn't set a fixed timeline or delivery phase. The PM provided a high-level requirements doc capturing core functionality. To translate that into a feasible design brief that could kick-start the POC, I ran a co-creation workshop to clarify, discuss and align on:
- Estimation of new UI components that could feed the web Design System library
- Responsive and data-density rules
- Menu structure and navigation flow
- Design requirements for the core tabs — Home, Trade, Report, Settings — with primary focus on the Trade tab: how the market, chart, deal ticket, portfolio and history panels lay out within the fold.
A north star, not a final spec
Drawing on insights from various sources, the new WebTrader POC responds to identified gaps and benchmarks that converge on a few principles:
- Trust through stability and clarity by restructuring the navigation and information architecture
- Rearrange modules to reduce clicks and cognitive load on core actions
- Unify the interface to ensure visual elements are consistent, desirable and usable
- Customisation that allows traders to shape their own workspace.
A design POC isn't the final output. It serves as a north star for the experience and helps the PM deep-dive into PRD writing. The experience POC focuses on:
- Establishing layout and responsive grid guidelines — defining navigation flow and the positioning of left, middle and right panels
- Defining the types of widgets and setting guidelines for UI and interaction standards
The key screen
Bringing the principles to life — the main workspace demonstrates layout hierarchy, panel behaviour and cross-panel interaction.
From proof of concept to delivery planning
The future-experience prototype was presented to the C-suite and received positive feedback, validating the overall direction. From here, the Product team will translate that direction into a defined release and build scope — identifying requirements, risks, and dependencies — and carry the work forward through the PM–PD pipeline.