2023 • Product Website Redesign
ChainPort is a Web3 bridge platform that enables users to securely transfer tokens across different blockchains, making cross-chain token transfers simple and secure.
As the ChainPort app grew, new features were added, requiring a more sophisticated approach to showcase the app's technological advancements and expanded functionality. However, the previous website struggled to effectively present these updates, making a redesign essential to reflect ChainPort’s innovation and versatility.
My Role: UI/UX Designer
Challenge: Presenting complex technology in a visually engaging way - using blockchain terminology for experts while remaining clear and accessible to a wider audience, all supported by an appealing design.
Target Audience: A diverse mix of users, including both new and long-term users.
ChainPort audience ranges from small projects and to larger, more established projects.
ChainPort website hero - before redesign
Diagrams
Crypto contracts and bridging methods involve multiple stages and complex processes, so using diagrams enhances clarity and understanding.
Show Variety
One of ChainPort’s major advantages is its wide range of supported methods, blockchains, and tokens. Creating a "one-stop shop" feel meets various user needs and emphasizes ChainPort’s versatility.
Security
In the Web3 world, security and verification are crucial. This needs to be one of the first things that catches user’s attention.
Distinctive
Create a unique, eye-catching, and memorable look that stands out.
.webp)
Visual inspiration - competitors analyze
Elements to be included in the new design:
Design Language
System of unique illustrations and animations
Clear diagrams
Preserving the abstract / outer space theme
Story Tell Keys
High secured app
Diversity of structures
Diversity of options
Design System
Elements | Bridging Methods
A key part of explaining how the ChainPort bridge works is showcasing the technologies we use. ChainPort leverages various protocols to enable as seamless and unrestricted bridging as possible.
The design language incorporates abstract animations of spheres to visually represent and characterize each bridging process.
Sphere animation
Elements | Supported Chains
.webp)
Supported chains- on hover
Elements | Unique Features Sections
Highlighting the top 3 unique features allows for a concise yet detailed explanation of any complex topic.
Features section for wrapped asset bridging - and set of icons
Elements | Diagrams
Demonstrate the bridging method with real use cases that can be tracked on a blockchain scanner.
Hybrid bridging - how it works
External bridge protocol - how it works
Whitlabel bridge - how it works
In redesigning the ChainPort website, our goal was to create a clear, user-friendly experience that effectively showcases the app's complex structures.
By emphasizing the top unique features and incorporating visual elements - such as abstract animations and real use cases, we aimed to simplify complex concepts and highlight ChainPort’s key advantages.
Explore my latest projects
