Case study · Landing page

2024

WeChain.ai

A landing page for a compliance-first chain.

Designing the web home for WeChain, a ZK-powered blockchain from WeFi: turning dense crypto infrastructure into a clear, confident story that drives one action, buying a node.

Client
WeChain by WeFi
Role
Web & UI design
Scope
Landing page, menu, states
Tools
Figma
WeChain landing page in a browser: “Enable ZK-Enhanced AI Nodes to Purify Big Data” beside a lime dotted globe, with a Buy a Node button and trusted partners

01 · Overview

Deep tech, made readable.

The client

WeChain is a compliance-focused blockchain from WeFi. It combines a zero-knowledge payment engine, Cosmos SDK infrastructure and a network of AI compliance nodes, and powers the wider WeFi ecosystem, including the WeFi Neobank.

The brief

Create a landing page that explains a technical product to a broad crypto audience, earns trust quickly, and guides visitors to buy an ITO node, while still speaking credibly to builders and validators.

02 · Approach

Three principles behind every section.

  1. Explain with visuals

    Isometric line illustrations do the heavy lifting, so each technical idea is understood at a glance before a single paragraph is read.

  2. Earn trust early

    Trusted partners such as Cosmos and Ledger sit right under the hero, and the mission line sets the tone before any sales ask.

  3. One clear action

    Every section points back to the same goal: Buy a Node. Lime is reserved for actions and key words, so the path is always visible.

03 · Visual language

Black, lime and line art.

A pure black canvas keeps the focus on the content. Lime is the single brand accent for actions and key words, Space Grotesk gives headlines a technical edge, and isometric line illustrations explain each concept.

  • Black

    Canvas

    #000000

  • Lime

    Actions & key words

    #D3EF89

  • White

    Headlines & body

    #FFFFFF

  • Space Grotesk

    Headlines and labels
    Bold, Medium

  • Inter

    Body copy and buttons
    Regular, Medium

  • Isometric line illustration for the ZK payment engine: stacked layers, towers and a vault
  • Isometric line illustration for the ITO node: a glowing amber cube in a hexagonal grid of nodes
  • Line illustration for Cosmos SDK: an atom inside a dotted sphere within a wireframe cube
  • Isometric line illustration of the WeFi ecosystem: a W-shaped structure with floating coins

04 · Detail

A colour for every product.

The ecosystem section uses tabs to switch between WeChain, the ITO platform and the WeFi Neobank. Each product gets its own accent and illustration colourway, so visitors always know where they are.

WeFi Ecosystem section with the WeChain tab active: teal accents, ZK Payment engine, Cosmos SDK and WEFI Token points beside an isometric illustrationWeFi Ecosystem section with the ITO platform tab active, in amberWeFi Ecosystem section with the WeFi Neobank tab active, in lavender
  • WeChain #B6E7E1
  • ITO platform #FFC955
  • WeFi Neobank #D6C9F9

05 · The page, section by section

From first scroll to buying a node.

  1. The hero

    Lead with the promise.

    A bold Space Grotesk headline states the product in one line, with a single Buy a Node action and trusted partners such as Cosmos and Ledger right underneath to build credibility.

    WeChain hero: “Enable ZK-Enhanced AI Nodes to Purify Big Data” with a Buy a Node button and Cosmos, Ledger and Block Gemini logos beside a lime dotted globe
  2. The mission

    A value you can read from across the room.

    "Ethics in Every Block" set at 120px in lime turns the brand's core value into a full-screen statement before any technical detail.

    Mission section: “Ethics in Every Block” in large lime capitals over flowing dotted lines
  3. ZK payment engine

    Explaining zero-knowledge, gently.

    An isometric illustration and a three-step explainer break a complex idea into an introduction, decentralised compliance and the role of nodes.

    ZK Payment engine section with an introduction, a three-step explainer and an isometric illustration
  4. Run ITO node

    From understanding to action.

    The ITO section pairs a glowing node illustration with a direct Buy ITO unit call to action, the commercial heart of the page.

    Run ITO Node section with a glowing amber node illustration and a Buy ITO unit button
  5. Cosmos & ecosystem

    One chain, a whole ecosystem.

    Cosmos SDK credentials build technical trust, then a tabbed ecosystem view shows how WeChain, the ITO platform and the Neobank connect.

    Powered by Cosmos SDK section above the tabbed WeFi Ecosystem view
  6. Community & footer

    Built for the community.

    Oversized link rows lead to Twitter, Discord, docs and the validator programme, followed by a simple email sign-up and a clean footer.

    Community links for Twitter, Discord, Blog, Running a Node, Becoming a Validator, Development Hub and Docs, an email sign-up and the footer

06 · Final design

The full page.

Six sections, one story: promise, mission, product, offer, ecosystem and community. The page reads top to bottom like a pitch, with a call to buy a node never more than a scroll away.

Navigation menu

Navigation menu: a lime panel listing Mission, ZK Engine, Ecosystem (WeChain, Neo Bank, ITO), Company and Knowledge base

Page structure

  1. 01 Hero
  2. 02 Mission
  3. 03 ZK payment engine
  4. 04 Run ITO Node
  5. 05 Cosmos & ecosystem
  6. 06 Community & footer
The full WeChain landing page from hero to footer: hero, mission, ZK payment engine, Run ITO Node, Cosmos SDK and ecosystem, community links and footer