Commander DeFi

Main screen

Role

  • User Experience Design
  • Visual Designer
  • Information Architecture
  • Eleventy Development

Team

  • Luis Martinez (Me)
  • Commander DeFi's Teams

Client

The Client

Commander DeFi is the first community-run project in the BSC ecosystem. They are located all around the globe with people from the USA, Argentina, and Europe. The project started in 2020 but was finally made public at the end of 2021.

The Challenge

Commander DeFi needed a website that made waves within the crypto crowd. However, as it is a community-led project with no clear boundaries, the primary challenge was to explain clearly what Commander DeFi is.

A secondary challenge was to enable the pre-sale and eventual sale of $COMFI, Commander's proprietary token.

This website needs to grow as more products are added to the Commander umbrella.

The Solution

For this project, I collaborated closely with the current members of the Commander initiative. The team behind Commander had already chosen a few design elements - but it was mostly a blank canvas.

I started with a competitive analysis to find the strengths and low-hanging differentiators. We also conducted small user research to see the most attractive for future investors.

I created a mood board to help as inspiration. We were able to find modern examples that followed the aesthetics we were aiming for. The Commander must look like a current version of the '80s.

The Process

The team behind Commander DeFi contacted me to be the initial web designer. I was commissioned to design the overall experience from the first visit to the site to the buying of $COMFI (CommanderDeFi's property crypto coin).

Starting strong

The main goal of CommanderDeFi's website design was to make the coin and community known. Unfortunately, there is too much noise on the web3 and crypto space, so we needed to stand out from the rest.

One of the biggest problems with Web3, in general, is that most users don't understand what it is all about. For that reason, our first task was to make an easy-to-understand statement of what makes Commander different from other coins.

We looked at what other crypto ecosystems were offering and noticed that our greatest strength was community-led. There are bigger and smaller, simpler and more complex ecosystems, but none is community-based.

We arrived at our slogan/elevator pitch: "The most fun and engaging community project on the BSC."

The purpose of this mantra is not to be a static, never-changing phrase. On the contrary, the unique selling point (USP) will change as the community grows in strength, members, and scope. But it serves as a starting line so that the current members know what they are signing in to.

Look and feel

The team member of Commander DeFi loosely defined the branding of Commander. They had only chosen what the first NFT would eventually look like and a few logo elements.

The brand designer did not set up typefaces, colors, and design systems.

Moodboards

We had an overall look and feel. However, we were not sure about some details. We used these mockups to reach a final color palette (shown with the star).

I used the competition research from the step above to understand the common aesthetic elements. While we want to be unique, we want to attract the same people who are already investing in current similar technologies.

Moodboards

During our initial interview, one thing mentioned was that Commander draws inspiration from 80s geek culture. In other words, Commander looks like 80s comics, retro-futurism, synth-wave aesthetics, the early internet, Tron, etc.

I created a mood board based on this information.

I discovered many 80s properties that have been brought to the present, like:

While they all have unique visual elements, they also provide a roadmap to modernize the 80s aesthetic without losing its essence.

Homepage design

After the initial interviews, I started designing the website.

Moodboards

We didn't have enough written information at the time of the first design as the project is meant to grow with the community,

We used the StoryBrand Formula to create an engaging website with enough information to get our users excited and engaged.

Early in the design, we created a one-pager with the essential information. Other sections, like terms of service, privacy policy, and the blog, while important, are not the reason why someone would visit the site.

So, the navigation to these sections is relegated to the footer.

The site's primary goal is to get people to sign up to the discord server and buy $COMFI. Therefore, I gave these goals a prominent placing to make them noticeable.

I created some essential components to serve as the basis for new sections as the site grows.

Conclusion

Working on this project has been eye-opening. I needed to learn many new things to understand what I was designing for and for whom.

While web3 has been around for at least a decade, most of us are just learning about it.

Contrary to other projects, this one is constantly growing, which is a challenge in itself. Whatever I design today might not reflect the most critical aspects of tomorrow. Trying to future-proof something that is still not wholly defined is a challenge like I've never had before.

Understanding what Commander is about in itself was challenging, considering that not all the current members were in for the same reason.

Moodboards Go to Live Site