OpenIBC

May 21, 2023
3 minutes read

OpenIBC Case Study

OpenIBC Logo
Year
2024
My Role
Designer, Creative Director
Industry
Blockchain
Timeframe
8 weeks

Overview

OpenIBC is a novel secure, open and permission-less interoperability protocol and set of standards built on Cosmos. It establishes a unified transport layer allowing for innovation at the application and state layers.

Results

The team has contributed in two major open-source set of standards on the blockchain ecosystem:

  1. ICS: Interchain Standards for the Cosmos network & interchain ecosystem
  2. IBC: Inter-Blockchain Communication Protocol implementation in Golang

These repositories have gained significant adoption across Cosmos, with multiple networks implementing the protocol and actively contributing to its development.

Brand Identity

The OpenIBC brand identity was designed to convey trust, innovation, and global connectivity. The visual language combines geometric precision with organic elements that represent the flow of information across blockchains.

OpenIBC Illustration System
Illustration system showcasing the data transport metaphor through geometric patterns

Our illustration system envisions a data superhighway that pierces through the cosmos, creating direct pathways between distant protocols. Like cosmic bridges spanning vast distances, these connections enable seamless data flow across different blockchain ecosystems. The visual metaphors emphasize both the technical precision required for secure data transport and the grand scale of connecting entire blockchain universes.

OpenIBC Brand Applications
Brand applications across various touchpoints and mediums

Website Design

The website serves as the primary touchpoint for developers and enterprises looking to implement OpenIBC. We focused on clear information hierarchy and intuitive navigation to help users quickly find the resources they need.

Website mockup showcasing the homepage and key features

The homepage immediately communicates OpenIBC's value proposition and directs different user personas to customized journeys through the site.

OpenIBC Website Homepage
Homepage design highlighting key features and user journeys

The Protocol Architecture

The protocol consists of three distinct layers, each represented through the metaphor of a ship's components:

  1. The Cockpit (Application Layer): Where end users interact with the blockchain. This is the control center that defines how data packets should be packaged and interpreted by sending and receiving chains.

  2. The Frame (Transport Layer - TAO): The container that transports and encodes data. Like a ship's cargo hold, it ensures data is both private and universally understandable by all receiving blockchains.

  3. The Engine (State Layer): The power system that proves data validity between chains. Like a ship's engine room, it supports various propulsion methods including consensus mechanisms, zero-knowledge proofs, and optimistic rollups.

Ship architecture animation showing the three layers of the protocol
Ship Technical Diagram
Technical diagram illustrating the ship's components and their blockchain analogies

The motion design of the ship was meticulously crafted, featuring subtle rotations that emphasize its dimensional presence. We employed mixed media techniques to create authentic shadows and dynamic effects, particularly in the engine's propulsion system, which combines 3D rendering with practical lighting effects.

Ship Motion Design Details
Detailed view of the ship's motion design and lighting effects

Mobile Experience

For on-the-go developers and project managers, we created a companion mobile app that offers documentation access, status monitoring, and quick deployment options.

Mobile app walkthrough showcasing key features and interactions

The mobile interface prioritizes essential functions while maintaining the visual language established in the desktop experience.

OpenIBC Mobile Interface
Mobile interface design showcasing key features and navigation
OpenIBC Mobile Features
Cool mockup of a bomber jacket

Credits

Agency: Wonderstruck
Development: Drip
About··Email me