WorldStreet puts trading, a multi-currency wallet and a growing set of apps for calls, streaming, learning, shopping and more behind a single account. As design lead, I designed and built its landing page at worldstreetgold.com and the design system the products share, then built several of the products on top of it.
Someone landing on worldstreetgold.com might be there to trade forex, buy crypto, see a doctor online, hire an artisan, make a film with AI or just make a free video call. That’s fifteen platforms, each with its own subdomain, and all of them sit behind one account.
The obvious answer is a grid of fifteen logos, but that turns an ecosystem into a list. The page had to make it all feel like a single world worth joining, and then get you to open one account.
“A multi-sector digital ecosystem built to bridge the gap between traditional finance and the decentralized future.”
WorldStreet, in its own words
Don’t list the platforms. Make them a place you move through.
The landing page is one continuous journey. You start in orbit, dive down through the clouds, turn a dial of platforms, then drive down a street where every platform is a stop. The road ends at the wallet that pays for all of them, and an assistant who knows the way.
The page opens on an Earth drawn in gold dots. Its ring fills as the page loads, and then the camera flies into the hero: a WebGL night globe under “Your world of trading”.
Every 4.5 seconds that last word changes to streaming, communication, gaming, shopping, learning or investing, each in its platform’s own colour. The city pins and live cards on the globe change with it, so in a few seconds you’ve seen how broad the ecosystem is.
A single statement lights up word by word: WorldStreet isn’t just a platform doing everything, it’s a network of purpose-built products. Then the camera dives into the globe and through photoreal clouds into open sky.
That dive is the page’s section break. Instead of a hard cut from a dark hero to a light section, the change from night to day becomes the transition itself.
“Every platform, one account. Scroll to turn the dial.” Each platform clicks into place on an orbit, grouped as Connect, Entertainment, Lifestyle and Markets, with a panel in its own brand beside it.
The panels are small working demos, not screenshots: an Xtream battle, a trivia duel, a forex order ticket. You can try a product before you’ve opened an account.
A car follows an SVG road past four districts: Connect Avenue, Entertainment Boulevard, Lifestyle Street and Markets Row. Billboards tell each district’s story, and numbered exit signs link straight to the live platforms.
It’s a site map you’d actually want to scroll, and on a phone the road runs down the edge of the screen with the exits stacked beside it.
At the end of the street a gold circle opens out of the road and reveals the wallet: “One wallet. Every currency. Every WorldStreet platform.” It’s the thing that ties the fifteen platforms together, so it gets the biggest reveal on the page. On phones the dashboard turns into a phone app.
Vivid, WorldStreet’s AI, is introduced by about 1,600 gold dots that morph as you scroll: a sphere, the word “vivid”, a globe, and finally the W. Then a switchboard answers the problem the whole page has been circling: you don’t have to remember every platform, you just ask.
The page closes on a gold-dot planet turned to your own time zone, with a “You’re here” beacon. A Vivid “ask” pill stays docked at the bottom the whole way down.
A WebGL globe, photoreal clouds, fifteen demo panels and a few thousand animated dots on one page add up to a lot to load. Much of the work was making that land smoothly on the mid-range phones most visitors use.
The hero globe is hand-written WebGL: a night-globe shader over NASA's Black Marble imagery, with no three.js in the bundle. Textures ship as AVIF in responsive sizes, which came out 24% smaller than the WebP versions.
Compiling and warming the globe shader used to block the main thread for 2.4 seconds. Restructured, it blocks for 0.2, and on a slow phone the hero now arrives one to two and a half seconds sooner.
The gold-dot Earth's ring fills as the page actually loads. It waits for every panel and image, with a hard cap so a slow connection never waits forever. Once you're in, scrolling fetches nothing new, so the story never stalls halfway down.
The street and the wallet reveal are the two heaviest scroll scenes. Profiling took the street from 33 ms to 29 ms a frame, cutting slow frames from 79% to 52%. The wallet opening went from 32 ms to 26 ms, with slow frames down from 78% to 48%.
Phones get their own image set. The night map dropped from 780 KB to 170 KB, and the four cloud plates for the dive weigh 95 KB in total.
Each product pulls a copy of the system into its own folder with one script and switches it on with a single brand attribute. That makes adoption a one-afternoon job, not a rewrite, and it's how the system replaced the older one I'd rolled out in August.
Version 3 of the WorldStreet design system sets gold on warm stone, with emerald and red kept strictly for gains and losses. Manrope carries all of the type. Cards are corner-lit at a 20px radius, buttons are pills, and motion is spring-based. A set of 398 gold duotone icons covers every product.
Each platform also has its own hue, but it’s used as a mark (an icon tile, a pin, a word in the hero) and never as a fill. That way fifteen products can each have an identity and still clearly be one company.
The landing page is the front door. Behind it, I’ve built or rebuilt several of the products themselves, all on the shared design system.
I built the web app: 427 of its 443 commits. That covers the schools, cohorts, certificates, wallet payments and the move onto the design system.
academy.worldstreetgold.comFree HD video calls. I built the front end, named the product, and made it the first app on the new design system. Another developer built the backend.
meet.worldstreetgold.comGold on stone, Manrope, 20px corner-lit cards, pill buttons, spring motion and 398 duotone icons, checked across both themes and phone and desktop widths.
worldstreet-design-system.vercel.appA calmer signed-in home: a “For you” feed that lists every platform, Explore pages, a money card and a gentler onboarding. In review, running as a demo.
worldstreet-hub-demo.vercel.appTwo teammates set up the landing repo in early October with the header, FAQ, wallet panel and the first platform showcases. I designed and built the rest: the loader and globe, the dive, the dial, the street, the wallet reveal, Vivid and the closing planet. It went live two weeks after my first commit. The signed-in hub, About, legal and sign-in pages on worldstreetgold.com are the wider team’s work, and the people shown on the landing page are illustrations.
Captured from the live site. Tap any frame to enlarge it.
Have a vision in mind? I'm here to translate your ideas into cutting-edge digital reality. Let's talk about your next big move.
