Overview
Statecraft is a Web3 project that lets you create and run “network states” from a single platform, including mobile apps. You can build any governance structure you like, using blockchain voting for full transparency.
The system even tracks checks and balances, so you can recreate existing governments or invent new ones in a simple, flexible way.
Our vision was to accommodate sophisticated structures while preserving an intuitive, user-friendly experience, ideally via a no-code builder. The earliest prototypes took shape like this:
Dashboard Space expands (templates, drafts)
More space -> More Scannability
Flexibility
Cons
Too Flexible --> High entry threshold
Too many entities for attention to process
Difficult to scale a system without losing focus.
I joined the project at that point.
My task was to create a design that’s intuitive and easy to learn.
I analyzed all the entities involved in working with a virtual state.
and identified two main categories:
Bodies/Actors and Processes.
Bodies/Actors are participants in the virtual state (individuals, committees, or organizations with roles and responsibilities).
Processes are the procedures for interaction and decision-making.
After reorganizing the entities into a modular structure, it now functions like a builder. Users can pick and combine components to construct their own virtual state and see how each part fits.
Relations
Function
You can combine these builder parts to create several variations.
A body is an entity that brings together members, other bodies, and powers. These powers can include drafting documents (petitions, laws, resolutions) or carrying out actions like impeachment, removals, appointments, and creating sub-bodies. Here’s how this evolves.
Each entity was managed through a sidebar, and placement on the canvas was tested. It felt a bit redundant, and some information was duplicated.
...so I decided to streamline everything into a more compact format.
I also prepared a set of filters to quickly visualize how bodies interact with each other.
It’s just a dashboard. :)
Once the user finalizes their netstate settings, it’s prepared for deployment and the user is redirected to the mobile version. After unpacking, they can invite members.
This is where life begins.
Citizen App
Each individual now carries a Network State in their pocket. Citizens participate in governance, decision-making, structural development, and more.
Elect representatives
A modular voting system allows users to elect representatives for any key role, supporting complex election structures with full transparency.
Make decisions securely
Users can vote on any initiative with confidence. The system ensures anonymity through secret ballots while maintaining vote uniqueness and verifiability on the blockchain.
Build together
Together, users nominate candidates, propose initiatives, and engage in open discussions. They make collective decisions without imposed limits and shape their Network State as a community.
I had to quickly redesign the primary screens. The logic was confusing, the entities were inconsistent, and the focus was scattered. It was hard for the eye to navigate such a page.
I identified the main inconsistencies, broke them down into components, and started the redesign.
One of the tasks was designing the Netstate structure screen, which lets users see how people join the state or a governing body, view all existing bodies within the Netstate, and explore their available powers.
The immersion followed a cascade: searching for states, entering a state, transitioning into the state’s structure, then moving into the bodies and sub-bodies. The structures are fractal, meaning there can be an infinite number of sub-bodies.
Voting and decision-making lie at the heart of the entire project. It was crucial to guarantee both transparency and anonymity. Configuration options must be adaptable, capable of handling proposals of any length or complexity. Additionally, the system needs to support secret voting and incorporate Proof of Personhood.
Voting step
Voting timeline
Discussion
Info
An Info block can be a description of the vote. Or it can be an attribute for a proposal, indicating the creator, and containing a long text.
Discussion is key to any vote. People often decide or pick a side during debate. We’ve made discussion part of the voting process, placing it right after the vote or law text.
This section shows the current voting step, including its duration, turnout, and final winner.
This section handles all voting actions: you can pick nominees, sign for candidates, and choose one or more finalists. For petitions or laws, sign to support or oppose. Many more options are also available.
The timeline shows all the steps needed to complete a vote. Clicking on a step reveals its details. This helps you track the progress and duration of the voting process. In the results section, you can watch the vote unfold live.
After the first releases, I collected user feedback and discovered there was too much focus on governance and not enough on interaction. Many users wanted to spend most of their time in a single state, with the option to switch to others without it being a big deal. So I built a new version that focuses on bringing people back to the app and boosting social features.
Since governance is the main feature, it still takes up most of the main screen when it appears. Clicking a state’s avatar takes you into its internal structure and powers.
To bring users back, I added a feed. The state uses it to communicate with citizens, give feedback on initiatives, and show real actions after votes. People can post topics for discussion, and it also highlights current votes and Netstate events. This makes governance feel alive and socially meaningful.
Netstate creators needed an events feature. It shows important Netstate-wide events and lets any citizen create their own and invite others.
Of course, there are many more screens. We create citizen passports, perform proof-based verification for secret votes, offer a full chat, redesigned navigation and proposal creation, and much more. I’ll skip the details to keep this case study concise.
Work on this case study is ongoing. You’ve only seen the first version. A UI kit, token integration, and design system components are also coming. Check back over time.