Design System for a Blockchain-Based Video Sharing Platform
190+
Global components
In the Atlas design system as it stands.
175
Design tokens
Covering colour, typography, animation and the rest.
100+
Pages of documentation
Written for the global components.
The client
Joystream is a video platform for creators, built on blockchain. The open-source project sits behind several apps, and a creator can push content to all of them at once.
Ownership is genuinely communal — Jsgenesis, its contractors and its end users — which made those users the real beneficiaries of this work.
The challengeWhat the teams actually needed
The brief was a highly customisable design system for the platform, with Atlas — the open-source codebase behind the dApp — carrying clear guidelines and structured documentation for whoever builds on it next.
Challenge 01Redesign before system
Ahead of the design system itself, the interface had to be redesigned and the feature set adjusted to complement how the community actually operates.
Challenge 02Rules as code
The goal was to empower users with a platform for expression, with the operating rules embedded in the design system rather than sitting beside it.
Challenge 03Extendable without drifting
Multiple operators would build on the system, so it had to survive being developed further by people who had not designed it.
What we did
A design system built to be handed over
Netguru supplied a self-sufficient design team within days, acting as consultants so the client could delegate the whole design process. UX research, competitor analysis and market analysis defined the shape of the platform and a pre-MVP model.
Galleries and drafts, redesigned
Curated Galleries display content meaningfully for consumers and give creators somewhere to show their work, while the draft system makes publishing and managing channels and videos across applications straightforward, through signed blockchain transactions.
Three sets, three audiences
Design guidelines keep views and components uniform; implementation guidelines describe how elements behave in different constellations so animations and interactions stay consistent; Figma guidelines let others extend the system without introducing inconsistency.
Following the W3C draft
Atlas adapts the token methodology drafted by W3C, with colour tokens defining brand and components, typography tokens split between desktop and mobile, and further tokens for animation, effects and rounding.
Two and a half years on
Joystream launched as an MVP in October 2021 and keeps developing, co-implemented by its users — which the design system is what makes possible.
Client testimonial
Getting to work with the amazing talent in the Netguru roster has turned out to be one of the most material positive impacts on how we build products at Joystream.
Tech stackThe tools that made it possible
01
Figma
Where the system lives, with guidelines for extending it safely.
02
W3C design tokens
The token methodology Atlas adapted for consistency across the ecosystem.
More like thisOther places we scaled product teams for growth.
What’s next