Back

CosmicSwap

BNB & Polygon dashboard rebrand

My Role

Brand & Product Designer — Bridge, Brand Design, Visuals, Prototyping, Modular Design


Team

1 Project Lead
1 Smart Contract Developer
1 Web Developer
1 Product Designer (Me)

Overview

When I joined Cosmic Swap, it was clear that the platform, a direct fork of PancakeSwap, lacked a distinctive identity and suffered from a poor user experience. The original interface was cluttered, uninspired, and frankly, unattractive.

I proposed a complete rebrand to the project lead, aiming to create a more engaging and usable experience that would not only enhance the visual appeal but also significantly improve the platform’s functionality across both mobile and desktop environments.

REBRANDING THE IDENTITY

Fresh restart for a new proposition

Enter the void 🌌

Breaking the habits

The first step was to reimagine Cosmic Swap’s brand identity.

The original design heavily borrowed from PancakeSwap, making it difficult for users to distinguish Cosmic Swap from other forks.

The color palette was drab and the logo was uninspired, failing to convey any sense of trust or excitement.

The brand closely resembled PancakeSwap, offering no distinctiveness to stand out.

The initial visuals were uninspired, failing to captivate or establish user trust.

A new transition

I developed a new brand identity that was both modern and visually striking. Drawing inspiration from the cosmic theme, I chose a deep space color palette dominated by dark purples and blues, accented with vibrant neon tones to create a sense of depth and energy.

The new logo featured a stylized, glowing comet, symbolizing speed and the infinite possibilities of the crypto space. This rebrand wasn’t just about aesthetics; it was about building a brand that users could trust and feel excited about.

DASHBOARD REDESING

Leaving the old fork behind

Break the standards

Overview

The original dashboard was a direct replica of PancakeSwap’s interface, which led to confusion and a poor user experience. Users found it difficult to navigate, and the staking and lottery features were buried under layers of unintuitive menus.

The redesigned dashboard featured intuitive navigation, making key functions easily accessible.

The new layout reduced clutter and improved usability, leading to faster task completion.

Previous Dashboard

The previous dashboard of Cosmic Swap was riddled with several usability issues. Its layout was cluttered and confusing, with important features like staking and the lottery buried deep within non-intuitive menus.

The lack of a clear navigation structure made it difficult for users to perform basic tasks, leading to frustration and decreased engagement. Additionally, the visual design was uninspired, borrowing heavily from PancakeSwap without offering any unique identity, which further contributed to the overall poor user experience.

User Research

I started by conducting a thorough UX audit, identifying key pain points in the user journey. The main issue was the complexity of accessing core features like staking and the lottery. My goal was to streamline these processes, making them easily accessible with just a few clicks. I designed a new, more intuitive dashboard layout, featuring clear, concise navigation with easy-to-understand icons and labels.

Ergonomics

To enhance usability, I introduced a modular design approach, allowing users to customize their dashboard experience. Whether a user was focused on staking, participating in the lottery, or using the bridge to transfer tokens from BNB to Polygon, they could now prioritize these features on their dashboard. The result was a much cleaner, user-friendly interface that significantly reduced the time needed to perform key tasks.

Usability Issues on Mobile

The mobile version of the previous Cosmic Swap dashboard struggled with significant usability issues. The interface wasn’t optimized for smaller screens, making it hard to navigate and interact with essential features. Buttons were too small, and key elements like the staking and lottery sections were hidden behind cumbersome dropdowns, requiring multiple taps to access.

Lack of Mobile Optimization

The design didn’t adapt well to mobile, leading to a frustrating experience for users who needed to perform quick transactions on the go. This lack of mobile optimization not only hindered user engagement but also limited the platform's accessibility for a broader audience.

BNB POLYGON BRIDGE

Implementing the Cross-Chain Bridge

Syncronizing cross-chain tokens

Overview

The implementation of a cross-chain bridge was a critical feature that set Cosmic Swap apart from its competitors. The bridge allowed users to transfer tokens seamlessly between the Binance Smart Chain (BNB) and Polygon networks. However, designing an intuitive and secure bridge feature presented significant challenges.

The bridge design focused on simplicity, ensuring even novice users could navigate the process effortlessly.

Users received instant transaction updates, enhancing transparency and confidence in the bridge’s functionality.

Usability Issues on Mobile

During the redesign of the bridge, one critical improvement was the integration of a step-by-step guide directly within the interface. This guide provided users with clear instructions at each stage of the token transfer process, reducing the risk of errors, especially for those unfamiliar with cross-chain transactions.

Additionally, we implemented a robust error-handling system that instantly notified users of any issues, such as network delays or incorrect wallet addresses, allowing them to take corrective action without disrupting the overall transaction flow. This practical enhancement significantly boosted user confidence and ensured a smoother, more reliable experience when using the bridge.

Result

The rebrand and redesign of Cosmic Swap were met with overwhelmingly positive feedback from the community. User engagement increased by 35%, and the platform saw a 50% increase in staking activity within the first month of the redesign.

The new brand identity not only distinguished Cosmic Swap from its competitors but also attracted a broader user base, including those who were previously hesitant to engage with the platform.

The implementation of the cross-chain bridge further solidified Cosmic Swap’s position in the market, providing users with a unique and valuable tool that enhanced their overall experience.

Do you want to see more about it? Feel free to browse the file here.