Obol

Infrastructure and ecosystem for distributed Ethereum validator technology.
DeFi
Branding & Visual Identity

Branding workshops, visual identity design, user experience & visual design, user research, component library;

Delivered in 6 weeks.

The challenge

HMW build a modern, modular, evolving brand?
HMW convey trust, trustworthiness and security?
HMW add a personality to something super technical?

The process

The branding workshops started with alignment excercises that focus on the identity of the brand:

  • 20 year roadmap to create a rough outline of future development.
  • What-Why-How? is a simple exercise popularised by Simon Sinek to categorise and understand the core values/why's.
  • Top three values focuses on finding the right language for the values, that will later contribute to external communication.
  • Top three audiences is a first step towards defining who should interact with the brand and where marketing efforts should be placed.
  • Personality sliders to define brand attributes that will make it easier to compare to other projects in the space.
  • Comparative landscape to make it visually clear where the project is currently positioned in the space.

All of the work above was summarised into a succinct mission statement.

From the contextual definitions of the brand, we researched suitable visual representations. These are colors, fonts, websites images and similar visual artefacts.

These visual artefacts were compiled into a clear stylescape, defining the visual identity. Simultaneously, we worked on the logo.

The branding work is the basis for all externally facing material. In a consecutive workshop, we sketched a user journey and outline for a landing page.

Each team member sketched their own version, which were then collectively reviewed and silently voted on.

The best ideas from the concepts made it into the storyboard. Here, everyone aligned on the exact layout and content of the website.

Our team designed the prototype which has been shown to several users from the web3 community. They provided constructive feedback on how to improve the interface and described to us what they felt happy about.

We thoroughly reviewed the feedback and agreed on design changes.

After all changes on the website have been made, we finalised the brand guidelines and summarised everything into a coherent overview.

Desktop design

screenshot of product design for obol
screenshot of product design for obol
No items found.

Desktop design

Mobile design

No items found.

Some of the design decisions we’ve made in order to help to improve the experience for the users:

Introducing the term “cluster” and consistently using it gave users an understanding of the core value proposition of Obol.
Celebrating a successful completion of a user journey lets users leave the platform with a positive memory.
Educational elements and avoiding acronyms made less experienced users feel confident.

User research findings

1.

Building trust and educating users is key to ensuring comfort in staking, regardless of the amount.

2.

Unambiguous articulation of terms is important especially at moments where configuration is required.

3.

People might drop off to double check something, and be more prepared for the flow but not always.

4.

Users always appreciate clear statements about what they are about to commit to.

5.

Even if a product is aimed at knowledgeable users, always address insecurities of casual stakers.

Component library

Deliverables

  • Desktop prototype
  • User testing reports
  • Mobile designs
  • Team alignment
  • Design system
  • Brand guidelines

Team

Justina Cukini

Creative Direction

Facilitation

Daniel Urquhart

Product Design

Dawid

User Research

Boyana Mecheva

User Research

Jesse Martin Szepieniec

Facilitation

Hazem Mustafa

Tester Recruiter

2 projects for

Obol

Infrastructure and ecosystem for distributed Ethereum validator technology.
DeFi
Branding & Visual Identity

Branding workshops, visual identity design, user experience & visual design, user research, component library;

Delivered in 6 weeks.

Part I: Ethereum 2.0 Launchpad

Part I: Ethereum 2.0 Launchpad
The Ethereum 2.0 Launchpad helps anyone become a validator in the network. Validators are key to the more secure, scalable, and sustainable Ethereum ecosystem.
Product Design: Essentials
User experience & visual design, user testing;

Delivered in 1 week.

The challenge

How might we communicate hold/cold key management?
How might we have one single source of truth?
How might we educate on the underlying economics?

The process

We facilitated 3 days of collaborative workshops over Zoom & Miro, involving a diverse team contributiors from the Ethereum ecosystem.

Our designer and facilitator guided the team along the most important UX and UI considerations.

We discussed the biggest challenges, prioritised goals and sketched a user journey together.
Each team member created an individual hypothetical solution for a user interface with the to-be-designed Ethereum 2.0 Launchpad.
Upon review of the best ideas from the sketches, we together designed and designed the wireframes.

Desktop designs

Some of the design decisions we’ve made in order to help to improve the experience for the users:

Descriptive infograhpics set the right expectations in digestible bits of information
Illustrations and a casual tone reinforce a delightful experience
“Deliberate friction” in UX slows users down where important actions are taken

User research findings

1.
Users were interested in following how deposits progress. So we added a timeline.
2.
Users were able to learn why deposits only in 32 ETH increments are possible.
3.
Describing how to generate the keystore files in a simple language made ETH staking accessible also for novices.
4.
Non-technical users appreciated the educational material and guidance.

Deliverables

  • Desktop prototype
  • User testing reports
  • Mobile designs
  • Team alignment
  • Design system
  • Brand guidelines
  • Desktop prototype
  • Team alignment
  • User testing report

Team

picture of Andrej - Creative Director
Andrej Berlin
Creative Direction
Facilitation
picture of Charlie - Creative Director
Charlie Ellington
Product Design
Georgia Rakusen
User Research

Part II: Ethereum — Public Identity

Part I: Ethereum 2.0 Launchpad
Ethereum as a network and an ecosystem of developers is separate from the Ethereum Foundation. Together with representatives from the Ethereum community, we explored the public perception of Ethereum as a “product”.
Branding and Visual Identity
Branding workshops and Visual Identity design.

Delivered in 2 weeks.

What, how, why?

Ethereum is seen as an open, scalable, decentralized, and extensible platform that provides 100% uptime, censorship resistence, and unparalleled network effects thus serving as the backbone of the decentralized internet.
It consists of decentralized tools and protocols that enable the individual and the collective to enter into new, positive-sum interactions.
To disrupt the current catastrophic trajectory of technology in society to find a more fair and open equilibrium that benefits both the individual and society as a whole.

The process

Two two-hour workshops to align on a common vision, purpse, values, audiences etc. helped us narrow down the public perception and personality of Ethereum as a product.
The team also explored different use cases and definitions for Ethereum, which increased overall clarity and alignment among participants.
Consequently, we facilitated a follow-up workshop to sketch how to visually communicate the public perception of Ethereum.

Desktop designs

Deliverables

  • Desktop prototype
  • User testing reports
  • Mobile designs
  • Team alignment
  • Design system
  • Brand guidelines
  • Desktop prototype
  • Components library
  • Brand and Identity Workshops

Team

picture of Andrej - Creative Director
Andrej Berlin
Creative Direction
Facilitation
Rob Hamblen
Facilitation
picture of Charlie - Creative Director
Charlie Ellington
Product Design

Having a similar design challenge in mind?

Let’s work together
Product and Brand Design

Let's talk