Penumbra.zone

Noctis

DeFi

explorer

Led the end-to-end design, translating a technical zero-knowledge data in to a user friendly blockchain explorer.

Atoms

Components

See Figma file

Penumbra.zone

Noctis

DeFi

explorer

Led the end-to-end design, translating a technical zero-knowledge data in to a user friendly blockchain explorer.

Atoms

Components

See Figma file

Penumbra.zone

Noctis

DeFi

explorer

Led the end-to-end design, translating a technical zero-knowledge data in to a user friendly blockchain explorer.

Atoms

Components

See Figma file

the_context

the_project

//the_UX_process//

01 > research

02 > define

03 > ideate

04 > test

05 > prototype

06 > deliver

outcomes

metrics

the_context

the_project

//the_UX_process//

01 > research

02 > define

03 > ideate

04 > test

05 > prototype

06 > deliver

outcomes

metrics

Back

Penumbra is the first fully end-to-end encrypted blockchain, Proof of stake and with a native DEX.

The vision:

“The electronic age should usher in a new wave of freedom. in its place, we have created tools through which we can be controlled, the vision has been lost, We can still yearn for freedom, We deserve to trade directly with those we encounter in the fertile soil of abundant internet, Penumbra is here to grant us that freedom, Penumbra comes from a glorious future to unlock our present.”

Penumbra is the first fully end-to-end encrypted blockchain, Proof of stake and with a native DEX.

The vision:

“The electronic age should usher in a new wave of freedom. in its place, we have created tools through which we can be controlled, the vision has been lost, We can still yearn for freedom, We deserve to trade directly with those we encounter in the fertile soil of abundant internet, Penumbra is here to grant us that freedom, Penumbra comes from a glorious future to unlock our present.”

Penumbra is the first fully end-to-end encrypted blockchain, Proof of stake and with a native DEX.

The vision:

“The electronic age should usher in a new wave of freedom. in its place, we have created tools through which we can be controlled, the vision has been lost, We can still yearn for freedom, We deserve to trade directly with those we encounter in the fertile soil of abundant internet, Penumbra is here to grant us that freedom, Penumbra comes from a glorious future to unlock our present.”

My

role

Led the end-to-end design of Noctis, a blockchain explorer, unifying fragmented important data into a single source for Penumbra, trough a design pipeline from research to developer handoff.

Wallet

DEX

Minifront

Insigths

Void.Vote

My

role

Led the end-to-end design of Noctis, a blockchain explorer, unifying fragmented important data into a single source for Penumbra, trough a design pipeline from research to developer handoff.

Wallet

DEX

Minifront

Insigths

Void.Vote

My

role

Led the end-to-end design of Noctis, a blockchain explorer, unifying fragmented important data into a single source for Penumbra, trough a design pipeline from research to developer handoff.

Wallet

DEX

Minifront

Insigths

Void.Vote

Blockchain Explorer, reveals Penumbra’s activity in transactions and and DeFi, Through zero-knowledge proofs, keeping all information private encrypted and secure.

Blockchain Explorer, reveals Penumbra’s activity in transactions and and DeFi, Through zero-knowledge proofs, keeping all information private encrypted and secure.

Blockchain Explorer, reveals Penumbra’s activity in transactions and and DeFi, Through zero-knowledge proofs, keeping all information private encrypted and secure.

User centered design sprints

Process presentation

Sharing a look into our design process to the discord communty, from early research and exploration, to prototyping, feedback, and refinement. Every step is about making Penumbra more intuitive, transparent, and aligned with the community’s needs.

Sharing a look into our design process to the discord communty, from early research and exploration, to prototyping, feedback, and refinement. Every step is about making Penumbra more intuitive, transparent, and aligned with the community’s needs.

Sharing a look into our design process to the discord communty, from early research and exploration, to prototyping, feedback, and refinement. Every step is about making Penumbra more intuitive, transparent, and aligned with the community’s needs.

UX
process

UX
process

UX
process

Trader persona

As a trader, I follow a cypherpunk ideology, I believe privacy is a fundamental right, not a privilege. I need a trading environment where my strategies are shielded, my data is mine, and fairness is guaranteed through cryptography, not trust.

Name

Name

Name

0x0031

Location

Location

Location

xxxxxxxxxxx

Role

Role

Role

Trader

Age

Age

Age

xxxxxxxxxxx

Goals

  • Protect trading strategies from being copied, frontrun, or exploited.

  • Privately provide liquidity without exposing portfolio size.

  • Execute cross-chain swaps seamlessly while maintaining privacy.

  • Ensure governance participation without risking coercion or reputational exposure.

  • Ensure governance participation without risking coercion or reputational exposure.

  • Ensure governance participation without risking coercion or reputational exposure.

  • Trade with confidence in a fair market environment.

  • Trade with confidence in a fair market environment.

  • Trade with confidence in a fair market environment.

Frustrations

  • On transparent chains, competitors and bots exploit mempool visibility.

  • On transparent chains, competitors and bots exploit mempool visibility.

  • On transparent chains, competitors and bots exploit mempool visibility.

  • Every transaction exposes wallet balances and trading history.

  • Every transaction exposes wallet balances and trading history.

  • Every transaction exposes wallet balances and trading history.

  • Providing liquidity openly attracts copy-trading and arbitrage attacks.

  • Providing liquidity openly attracts copy-trading and arbitrage attacks.

  • Providing liquidity openly attracts copy-trading and arbitrage attacks.

  • Existing explorers reveal too much information, destroying strategic advantage.

  • Existing explorers reveal too much information, destroying strategic advantage.

  • Existing explorers reveal too much information, destroying strategic advantage.

  • Lack of tools that respect both privacy and usability.

  • Lack of tools that respect both privacy and usability.

  • Lack of tools that respect both privacy and usability.

Delegator persona

As a delegator, I believe privacy is a cornerstone of financial freedom, a cypherpunk principle that ensures my wealth, strategies, and governance choices remain mine alone, protected by cryptography rather than trust.

Name

Name

Name

dimi 🦙

Location

Location

Location

xxxxxxxxxxx

Role

Role

Role

Crypto Investor / Delegator

Age

Age

Age

xx

Goals

  • Earn reliable staking rewards without exposing his portfolio size.

  • Support trusted validators while keeping his financial activity private.

  • Participate in governance securely, with the freedom to vote without external pressure.

  • Diversify staking across validators without making strategies visible.

  • Diversify staking across validators without making strategies visible.

  • Diversify staking across validators without making strategies visible.

  • Access a single source of truth to monitor rewards and validator performance.

  • Access a single source of truth to monitor rewards and validator performance.

  • Access a single source of truth to monitor rewards and validator performance.

Frustrations

  • On transparent chains, delegations reveal wallet size and wealth concentration → makes him a target.

  • On transparent chains, delegations reveal wallet size and wealth concentration → makes him a target.

  • On transparent chains, delegations reveal wallet size and wealth concentration → makes him a target.

  • Public governance votes expose his stance, opening the door to coercion or reputational risk.

  • Public governance votes expose his stance, opening the door to coercion or reputational risk.

  • Public governance votes expose his stance, opening the door to coercion or reputational risk.

  • Hard to track validator reliability across fragmented tools.

  • Hard to track validator reliability across fragmented tools.

  • Hard to track validator reliability across fragmented tools.

  • Worries about frontrunning or strategic exploitation if his staking moves are visible.

  • Worries about frontrunning or strategic exploitation if his staking moves are visible.

  • Worries about frontrunning or strategic exploitation if his staking moves are visible.

Validator persona

As owner of a validation company, I need transparent insights into network performance, staking, and governance while preserving user privacy, so I can secure the protocol, maintain trust, and operate fairly without exposing sensitive data.

Name

Name

Name

Leo Nakamoto

Location

Location

Location

Berlin, Germany

Role

Role

Role

Vailidator

Age

Age

Age

33

33

Goals

  • Monitor validators performance, delegation rewards, and network status.

  • Track transactions, swaps, and liquidity positions performance.

  • Participate in governance via stake-based voting with full visibility into proposals and outcomes.

  • Visualization of network health metrics: block times, epoch durations, validator status.

  • Visualization of network health metrics: block times, epoch durations, validator status.

  • Visualization of network health metrics: block times, epoch durations, validator status.

  • Governance proposals data with possible changes in the protocol, downtimes etc.

  • Governance proposals data with possible changes in the protocol, downtimes etc.

  • Governance proposals data with possible changes in the protocol, downtimes etc.

Frustrations

  • Lack of validator metrics across epochs (e.g., APR, downtime, missed blocks).

  • Lack of validator metrics across epochs (e.g., APR, downtime, missed blocks).

  • Lack of validator metrics across epochs (e.g., APR, downtime, missed blocks).

  • Insufficient historical context in many explorers: no trends, no deltas, only snapshots.

  • Insufficient historical context in many explorers: no trends, no deltas, only snapshots.

  • Insufficient historical context in many explorers: no trends, no deltas, only snapshots.

  • Traditional explorers don’t have info about zero-knowledge-based networks.

  • Traditional explorers don’t have info about zero-knowledge-based networks.

  • Traditional explorers don’t have info about zero-knowledge-based networks.

  • Long registration processes for each app depending of the charger

  • Long registration processes for each app depending of the charger

  • Long registration processes for each app depending of the charger

Callenges

One of the challenges during research was respecting participants’ privacy, which meant we couldn’t collect demographic information.

One of the challenges during research was respecting participants’ privacy, which meant we couldn’t collect demographic information.

One of the challenges during research was respecting participants’ privacy, which meant we couldn’t collect demographic information.

Key product research

Wireframes iterations, surveys, afinity mapping, and prioritization workshops, where part of the design process for each use case.

Discord community

70.000 users

Customer Journey from HOLDR to Validator.

The goal of this customer journey is to analize how Noctis is positioned in to the ecosystem.

Life cycle of 3 Personas:

First-Time Visitor / Holder – Newcomer curious about validators and decentralization.

Delegator (Staker) – Has delegated tokens, monitoring returns & performance.

Validator – Runs infrastructure, monitors performance, attracts delegators participate in governance.

Awareness

First-Time Visitor / Holder or Trader

Touchpoints

  • Marketing page

  • Token price

  • DEX (Decentralized exchange)

  • Wallet

  • Explorer (Validators, IBC)

Actions

  • Browses validator list

  • Checks decentralization stats

  • Searches names

  • Checks liquidity

  • Documentation

Thoughts

“What is this Blockchain about?”

“How the protocol works”

“It has DeFi?”

“What is the token price?”

Emotions

🤔 Curious

😟 cautious

😏 skeptical

Painpoints

  • Lack of data, makes hard to judge trustworthiness

  • Different touch points in different urls hard to figure out all the parts of the ecosystem

  • Branding and naming of the platform is inconsistent, not sure if is the same chain

  • Branding deep web concept can look a little scary

Opportunities

  • Unify branding and naming

  • Unify all the platforms under one single url and link to all features in one single place

Consideration

Thinking to Delegate (Staking)

Touchpoints

Touchpoints

  • Validator rankings

  • Calculate APR

  • Governance history

Actions

Actions

  • Compares validators based on performance

  • APR %

  • Uptime

  • Commissions

  • Missed blocks

Thoughts

Thoughts

“I want good rewards but also a trustworthy validator.”






“I want good rewards but also a trustworthy validator.”

Emotions

Emotions

📊 Analytical

😬 anxious

🙂 hopeful

Painpoints

Painpoints

  • Hard to balance yield vs. decentralizationz

Opportunities

Opportunities

  • Provide a validator performance page

  • Provide uptime warnings and charts

Purchase

Delegator / Stake

Touchpoints

Touchpoints

  • Wallet staking UI

  • Validators page

Actions

Actions

  • Delegates tokens

  • Selects validator

  • Confirms transaction

Thoughts

Thoughts

“I hope my rewards are worth it, and I can relegate later if needed..”






“I hope my rewards are worth it, and I can relegate later if needed..”

Emotions

Emotions

😰 Nervous

🤞 optimistic

🙌 committed

Painpoints

  • Confusing unbonding delays

  • Unclear slashing risks

  • No APR and Commission information

Opportunities

Opportunities

  • Provide unbonding data,

  • APR

  • Commission

Engagement

Active Delegator

Touchpoints

Touchpoints

  • Wallet delegator rewards

  • Delegator dashboard

  • Governance

  • Validator metrics

Actions

Actions

  • Tracks rewards

  • Monitors uptime

  • Votes on proposals

Thoughts

“Am I maximizing rewards? Is my validator reliable?”

Emotions

Emotions

😌 Confident

🤝 engaged

😤 frustrated if validator fails

Painpoints

  • Difficult to track multiple validators

  • Missed governance reminders

Opportunities

Opportunities

  • Push notifications

  • Performance alerts

  • Governance nudges

Retention

Delegator running a node

Touchpoints

Touchpoints

  • Documentation Node setup guides

  • CLI tools

  • Testnets

  • Monitoring dashboards

Actions

Actions

  • Sets up full node,

  • Learns monitoring,

  • Syncs chain

  • Tests uptime


Thoughts

Thoughts

“Can I manage uptime and ops before applying as validator?”

Emotions

Emotions

💪 Determined

😵 overwhelmed

😌 proud when successful

Painpoints

Painpoints

  • Technical complexity

  • Server costs

  • High uptime requirements

Opportunities

Opportunities

  • Offer node-running tutorials

  • Incentivized testnets

  • Lightweight monitoring

Advocacy

Validator

Touchpoints

Touchpoints

  • Validator analytics

  • Promotional tools

  • Governance portal

Actions

Actions

  • Monitors own validator performance

  • Engages delegators

  • Submits proposals

Thoughts

Thoughts

“I need to maintain uptime & reputation to attract delegators.”

Emotions

Emotions

🏆 Competitive

🚀 ambitious

⭐ reputation-driven

Painpoints

  • Hard to stand out in crowded validator set

Opportunities

Opportunities

  • Validator badges (uptime, governance),

  • Delegator communication tools

User story

As a delegator, I want to monitor validator performance and track through the explorer, without revealing my portfolio size or validator choices, so I can make informed delegation decisions while keeping my financial activity private

As a delegator, I want to monitor validator performance and track through the explorer, without revealing my portfolio size or validator choices, so I can make informed delegation decisions while keeping my financial activity private

As a delegator, I want to monitor validator performance and track through the explorer, without revealing my portfolio size or validator choices, so I can make informed delegation decisions while keeping my financial activity private

The

wireframes

First iteration

Second iteration

Third iteration

Proposal passed

Propossal failed quorum

Test On discord

I visited multiple EV charging points and had brief conversations with users to gather their opinions about existing charger-finding apps.

I visited multiple EV charging points and had brief conversations with users to gather their opinions about existing charger-finding apps.

“Where I see if the proposal is active”

Maria

“Where I see if the proposal is active”

Maria

“Where I see if the proposal is active”

Maria

The

design

Validator performance metrics to guide staking decisions.

Validator details metrics

Governance proposals status

Governance active voting proposal

DEX liquidity positions and Swap executions

File organization

Each wireframe iteration is progressively goal-driven, moving from initial concepts to data alignment. The emphasis of this stage is on data and schematic composition guided by user journeys, without the distractions of visual design.

Prototype

Design file

File organization

Each wireframe iteration is progressively goal-driven, moving from initial concepts to data alignment. The emphasis of this stage is on data and schematic composition guided by user journeys, without the distractions of visual design.

Prototype

Design file

File organization

Each wireframe iteration is progressively goal-driven, moving from initial concepts to data alignment. The emphasis of this stage is on data and schematic composition guided by user journeys, without the distractions of visual design.

Prototype

Design file

Design system

The screen designs for development were created using the Penumbra design system components and style guide.

Design system

The screen designs for development were created using the Penumbra design system components and style guide.

Design system

The screen designs for development were created using the Penumbra design system components and style guide.

The heartbeat

Since real-time data is the foundation of a blockchain protocol, I designed microinteractions in the explorer to convey the feeling of a live, constantly updating system.

The Outcome

The Noctis blockchain explorer successfully unified Penumbra’s fragmented data into a single, privacy-aware platform.


By making validator performance, governance participation, and DEX activity accessible in a clear and intuitive way, it empowered users to make informed decisions while respecting the protocol’s zero-knowledge principles.


Bridging the gap between complex cryptographic systems and everyday usability.

+0%

Retention rate 30D August

+0%

Transactions per day After explorer visibility

+0%

SesLiquidity positions After DEX pools visibilitysion frequency and duration

+0%

Retention rate 30D August

+0%

Transactions per day After explorer visibility

+0%

SesLiquidity positions After DEX pools visibilitysion frequency and duration

+0%

Retention rate 30D August

+0%

Transactions per day After explorer visibility

+0%

SesLiquidity positions After DEX pools visibilitysion frequency and duration

Validator performance metrics to guide staking decisions.

Validator performance metrics to guide staking decisions.

Validator details metrics

Validator details metrics

Governance proposals status

Governance proposals status

Governance active voting proposal

Governance active voting proposal

DEX liquidity positions and Swap executions

DEX liquidity positions and Swap executions

Governance tally and vote information

Governance tally and vote information

Validator performance metrics to guide staking decisions.

Validator performance metrics to guide staking decisions.

Validator details metrics

Validator details metrics

Governance proposals status

Governance proposals status

Governance active voting proposal

Governance active voting proposal

DEX liquidity positions and Swap executions

DEX liquidity positions and Swap executions

Governance tally and vote information

Governance tally and vote information

the design

The

wireframes

First iteration

Second iteration

Third iteration

The

wireframes

First iteration

Second iteration

Third iteration

The

wireframes

First iteration

Second iteration

Third iteration

Proposal passed

Propossal failed quorum

The

wireframes

First iteration

Second iteration

Third iteration

Proposal passed

Propossal failed quorum