Building a scalable design system for an NFT marketplace, ensuring consistency across the two sister brands
Crashr is a rising star in the NFT marketplace scene, revolutionizing how people buy, sell, and collect NFTs. Committed to offering a user-friendly platform for digital artists, collectors, and enthusiasts, Crashr aspires to leave a significant mark in the ever-evolving NFT landscape.
Their initial website launch, lacking user input, led to usability challenges and brand inconsistencies. They also had Bombers, an alternative community page with a contrasting aesthetic style. My main goal was with harmonizing their design system and revamping both mobile and desktop sites for Crashr and Bombers while keeping their separate identities.
How might we harmonize the design systems of Crashr and Bombers, enhancing the usability and visual cohesiveness of both the mobile and desktop websites, while preserving their distinct brand identities?
We conceptualized and designed a design system and created a strong foundation for the Crashr/Bombers brand.
Elsie Lee - Product Designer
Desktop Drafts for Crashr
Some test screens for testing out the design system
Mobile Drafts for Crashr
Some test screens for testing out the design system
Desktop Drafts for Bombers
Some test screens for testing out the design system
Mobile Drafts for Bombers
Some test screens for testing out the design system
Understanding the tone of the brand
I had to work with 2 brands. Crashr and Bombers. Bombers was the fun little brother of the main brand focussing more on NFT's. I conducted semi structured interviews with the team to understand the tone they wanted Crashr and Bombers to exude.
01
Professional
Given its aim to be a trusted NFT marketplace, professionalism is essential in all interactions and communications.
02
Innovative
As a tech-driven platform in the NFT space, Crashr should reflect a modern and innovative tone to stay current with industry trends.
03
Trustworthy
Users need to have confidence in Crashr's security and reliability, so the tone should convey trustworthiness.
04
Serious
Balances professionalism, particularly with valuable digital assets.
05
Engaging
Keeps users interested and active, especially with NFT artworks and community engagement.
Understanding the existing branding
I starterd by looking at the logos and the marketing material used over X (twitter) and Discord to see if its giving the desired tone.
The Crashr logo exudes movement and dynamism.
Red and black colors offer high-impact contrast: red grabs attention, black adds sophistication.
Minimalist design embodies Crashr's simplicity and elegance, aligning with brand identity.
Bombers logo is a contemporary and innovative design. It features a stylized, clean, and sleek visual representation.
The use of a light background puts the focus on the contents.
The use of white space and simple typography helps to create a clean and modern look.
The clean lines, simple typography, and bold colors create a stylish look.
Defining the basics Grid System
We started out by defining the grid system for desktop and mobile.
A 4 column grid layout
Used when designing large pages ie. homepages, landing pages, etc.
Used when designing more detailed pages with smaller items ie. lists
Use when you’re designing large pages ie. homepages, landing pages, etc.
Use when you’re designing more detailed pages with smaller items ie. lists
Typography
Keeping the brand identity in mind, we needed a type that was modern and futuristic. We decided to go with Inconsolata for heading font and Open Sans for body.
Inconsolata
It’s a monospaced typeface that gives a “techy” feeling
It has 8 weights and also variable version, leaving room for changes in the future
It’s open source.
It’s very readable
Open Sans
It has clean lines and well balanced proportions
It has a friendly but professional feel
It’s open source.
It’s very readable
Color
We wanted to avoid using the Crashr Red from the logo as much as possible. We decided to build a color pallet around the red and use it sparingly in background gradients and only in places extremely necessary.. For Bombers we used a contrasting color scheme. We avoided the reds completely and used the secondary color from Crashr as the Primary color.
Crashr
Bombers
Iconography
We decided to use HeroIcons as our icon library due to its large number of variant options.We also created specific icons that were needed.
Brand Logo icon Variants
Special Icons
Building the component library
We started out by creating the screens. We created components and modified them as and when required.
Balancing brand identity with design consistency
The successful development of a unified design system for Crashr and Bombers NFT marketplaces not only improved the overall user experience but also demonstrated the effectiveness of creating a cohesive design system for brands with contrasting visual identities. The project enabled efficient design and development processes while respecting the uniqueness of each brand.
01
Embrace Flexibility in Design Systems
I've learned that a successful design system should strike a balance between consistency and brand individuality. To accommodate contrasting brand identities like Crashr and Bombers, a design system must be flexible, allowing each brand to express its unique visual elements while maintaining a cohesive structure.
02
Collaboration Drives Success
Throughout this project, I realized the immense value of collaboration. Effective communication and collaboration between design, development, and marketing teams were vital to ensure the design system catered to the distinct needs of both brands, resulting in a harmonious yet unique user experience.
