Octa · Web design & design system · 2024

One system, every page

I redesigned the website of Octa, an online broker: the front page, sub-pages for commodities, the demo account and promotions, and a commission calculator. I also built the design system the pages are made from.

Client: Octa
Role: Principal web designer, freelance
Period: February – July 2024
Status: Shipped, since retired

The front page’s scroll sequence, rebuilt from the design frames and recorded in a browser. The shipped site moved the same way.

Four product cards on pale grey: a chart with a pattern called out, a green lesson card on the Pennant pattern, an order ticket, and stat tiles — All-in-one solution shows the product in one view, a chart, a lesson, an order ticket and stats, so a visitor sees that analysis, learning and trading happen on one platform. On mobile the cards stack, and Space gets a tile of its own.

The same cards stacked on mobile, with a purple Space tile added — All-in-one solution shows the product in one view, a chart, a lesson, an order ticket and stats, so a visitor sees that analysis, learning and trading happen on one platform. On mobile the cards stack, and Space gets a tile of its own.

“Transparent conditions and pricing”: four white cards with translucent coins, quickest withdrawals 24/7, minimum deposit from $25, spreads from 0.6 pips and no overnight charges — Transparent conditions and pricing puts the costs a trader compares between brokers on four cards: withdrawals, minimum deposit, spreads and overnight charges.

“All-in-one solution empowering your trading” on the Advanced platform tutorials slide, beside a green lesson card on the Pennant pattern and an order ticket with stop loss and take profit — The feature carousel shows one feature at a time, here the tutorials, so the front page can present several tools without getting longer. The progress bar shows that more slides follow.

An Octa people banner: a smiling man in glasses on a sofa with his phone, “Kabir. Barista. Cyclist. Trader.”, and an Open account button — Octa people shows a trader through his everyday life, “Barista. Cyclist. Trader.”, to make trading look like something ordinary people do. It ends on the Open account button.

“12 years on the Market” on black: five figures on blue glass renders, 42M+ accounts opened, 35M+ app installs, 70+ awards, 180+ countries and 100M+ to charity projects, a Trustpilot rating, and “Global markets in your phone” with a phone on concrete — 12 years on the market collects the proof a new client looks for before depositing: the company’s age, accounts, installs, awards, countries and a Trustpilot rating. The app download follows, for visitors ready to start.

“World-class security” on dark under a glass render, then four points: segregated accounts, SSL-protected personal area, secure withdrawal rules and monitoring 24/7 — World-class security answers the worry of trusting an online broker with money and personal data, in four points: segregated accounts, an SSL-protected personal area, withdrawal rules and 24/7 monitoring.

“Transparent conditions & fees.” on dark: four outlined cards, 0% swaps, no commissions in blue with red and blue spheres, secure deposits and withdrawals, instant order execution — Transparent conditions and fees lists four terms, each linked to its details, and fills No commissions blue so it is seen first.

The header with the Trading menu open: Trading advantages and Demo account cards, finance links such as deposits and withdrawals and funds security, a list of assets, and an Octa Trading App card — The header’s Trading menu sorts a large site by what a visitor comes for: trading conditions, finances and assets. The demo account and the app are cards in it, one click from any page.

Art direction

Coins in brushed metal and glass, a set of glass studies, and an isometric scene with the Octa mark on a blue plate, in dark and light. The Octa coin went into the demo page’s hero and the withdrawals card.

3D coins: the Octa mark, dollar, euro and bitcoin, in brushed metal and glass — The coins: Octa, dollar, euro, bitcoin

Frosted glass capsules around blue cores — Frosted capsules

An isometric scene on light: the Octa mark on a blue plate, a toggle, glass panels and a EUR tile — The isometric scene with the Octa mark

Exploration

A dark hero: “Your ultimate trading experience” on black with an Open account button, then a phone on a concrete block beside a blue panel offering a 50% bonus — A dark variation of the hero: the headline on black, then the phone on concrete beside the 50% bonus offer.

The front page started with a sprint of about forty hero and layout directions, on dark and on light, built around a 3D object, a phone, a laptop or a portrait. Six of them:

Dark hero with a golden 3D ring and floating blue shapes — 3D objects on dark

Dark hero with a phone in a jeans pocket showing the trading app — A phone in a pocket

Dark hero with a portrait of a trader at home — A trader at home, on dark

Light hero with a phone on concrete inside a dark card — A phone on concrete, in a dark card

Centred headline over a hand holding a phone, with blue panels — Centred, over a hand holding a phone

Light hero: “Your ultimate trading experience” over a photo of a smiling woman at home, in a rounded card — A trader at home, on light