Introduction
Atomax connects Filecoin holders and miners in a trustless, decentralized marketplace. Holders stay liquid, miners access capital, and both sides share in the upside — without relying on intermediaries.
Goal
Enable Filecoin holders to stay liquid by exchanging FIL for stFIL. Give miners secure access to pledge capital without adding trust dependencies. Design a node registration process that inspires confidence from day one — critical to the protocol’s viability. Deliver all of this quickly, with a minimal interface that speaks to two very different audiences, and wrap it in a professional, credible brand that builds trust in a new DeFi product
Challenges
- No documentation — The project started without feature lists, flow diagrams, or clear requirements.
- Asynchronous, cross-timezone collaboration — All communication was written and asynchronous, with a 6–7 hour time gap between design in Europe and the core team in Shanghai.
- Dual audience — The product had to serve two very different user types: Filecoin holders and miners.
- Trust barrier in node registration — If miners didn’t trust the registration process, they wouldn’t participate, and the product’s value would collapse.
- Mid-project rebrand — The switch from FilBond to Atomax required a new brand identity while design and development were already in progress.
Outcome
We took the project from a rough concept and sparse requirements to a functional, dual-audience product and brand that communicates trust from the first click. From our first Telegram exchanges, the collaboration with the stakeholder shaped the product vision, turning scattered ideas into a clear plan. We worked on the first draft of the protocol documentation — missing until that point — and mapped critical user flows into a complete mobile prototype.
Alongside the UX, we created a new brand, a full app interface across viewports, and a branded design system with semantic color tokens for effortless theming. By the time development paused, the client had in hand a ready-to-build product with a clear identity, tested flows, and a solid foundation for launch.
Timeline
- Jun 2022 — Filbond funding deck (investor outreach)
- Dec 2022 – Jan 2023 — Collaborative scope & terminology; critical flowcharts; mobile wireframes & prototype; first UI pass
- Feb 2023 — Rebrand to Atomax; additional features mapped; name confirmed (20 Feb); logo route approved (24–27 Feb); three UI concepts delivered next day
- Mar (weeks 1–2) — Atomax UI refined; coming‑soon page
- Mar (week 3) — Landing page: information architecture, copy, layout variants, custom icons, UI previews, developer handoff
Brand Design
Where Trust Meets Velocity
Goal
Atomax needed a visual identity that could inspire trust from day one while remaining lightweight enough to ship quickly. The aim was to create an identity that balances professionalism with approachability and speaks to two distinct audiences: Filecoin holders and miners.
Outcome
Delivered a compact brand system — logotype, palette, typography, and icon style — built to work seamlessly across both product UI and marketing surfaces.
Logo symbol explorations: three black-and-white marks that merge the letter A with an atom motif.
The three best symbols shown with type and exploratory color to validate direction with the client
After locking the symbol and wordmark, we explored three palettes and surface styles using real interface components, since the brand lives primarily in-product.
Urbanist: A geometric, open-source family with range and restraint—elegant, modern, and not overused. It keeps the brand neutral and legible across UI and marketing without the “generic” vibe
Logo reveal animation. The elements radiate from the core, enlarge and rotate into alignment to form the symbol. Loopable and versatile for loaders, splash screens, and micro-interactions.
Custom icon set tuned for dark and light modes. Palette and shading adjusted for clear contrast in both themes
App Design
Product Architecture: from Glossary to Interface
Process
The product work began by untangling incomplete requirements and turning them into clear, testable flows. I started with a concise glossary to align terminology across design and engineering, then moved into mobile-first wireframes to validate critical interactions early.
Once the wireframe prototype was completed and approved, we designed the full UI in the visual style of FilDA, since the product was still positioned as FilBond by FilDA. Shortly after, the decision was made to launch under a new brand — Atomax — with a few additional features.
Following a rapid branding phase, we applied the approved Atomax visual concept to the existing interface and designed the new features directly in Atomax style, leveraging the now-established design system without needing another wireframing round.
Outcome
The result was a polished, multi-viewport interface supported by a design system built on semantic color tokens for effortless theming, ready for seamless developer handoff.
Started from a glossary of key terms and expanded it into documentation of core entities and flows, giving the team a shared reference that reduces ambiguity and speeds up async work.
Quick mapping of critical user flows via Mermaid.js
Before visual design, we built mobile-first wireframes. If it’s easy on mobile it’ll be easier on desktop
Every critical flow is connected in a single prototype. You can explore the app end-to-end or jump straight to any mapped flow via the flow index.
The color palette for light and dark modes defined with semantic design tokens. The UI kit is wired to developer variables, so components pull colors from tokens rather than hard values. That keeps theming and maintenance clean.
Well organised Figma workspace. Each file has a custom thumbnail with a clearly visible title and preview of its content.
Thanks to Figma’s swap library functionality, changing the theme of a component in the UI became a breeze.
Liquidation page previews on different devices
A well-structured file where pages and flows are logically grouped, with each page shown across breakpoints for a complete design overview.
List of registered nodes, with different states per each node. Clear visual alerts for nodes with low health or at risk of liquidation.
Landing Page Design
Killing 2 birds with 1 landing page
In short
We designed the landing page to drive users into the app. To address two distinct audiences, we split the page into dedicated sections for each. Every section highlights clear benefits, explains how the product works, previews the most relevant part of the interface, provides reassurance, and ends with a strong call to action.
We first spun up a temporary coming soon page, already outlining the benefits for the 2 audiences.
Holders’ section
- Headline highlighting their benefit for holders.
- Preview of the most relevant interface component for holders, paired with a quick “how it works” explainer.
- Simple explanation of the liquid staking token — how it works and the benefits it brings.
- Additional benefits and reassurances, ending with a holder-specific call to action instead of a generic “launch app.”
Miners’ section
- Headline tailored to miners, clearly stating their primary benefit.
- Preview of the interface component most relevant to miners, paired with a concise “how it works” sequence.
- Clear explanation of the product features that matter most to miners, with a focus on building trust and reassurance.
- Additional benefits, reassurances, and call to action, this time catered to miners.
The landing page was designed and delivered across all key breakpoints
