Designing An Avatar Builder

Background

Cool Cats is a global character brand built around its beloved lead character “Blue Cat”, created by artist Colin Egan in 2013. Today, Cool Cats boasts a rich universe filled with captivating characters, comics, games, merchandise, and animations that are designed to deliver inclusive, impactful, and community-driven stories.

The Ask

As part of the NFT ecosystem, we wanted to create an avatar system that gives users the ability to shape and craft their own unique identity.

The Avatar System is designed to give users the tools and resources to customize their digital identity using Cool Cats digital collectibles. With this tool, users can personalize their backgrounds, borders, outfits including shoes, hats, and more.

Objective

Design an avatar system that gives users the ability to customize their own unique identity.

Final Designs

Research and Feature Requirements

I did a quick search on the app store to analyze UI patterns, icons, and style. Based on this research, I compiled a list of common features that could be on this Avatar system:

  • Reset

  • Save

  • Export

  • Undo

  • Redo

Furthermore, the product manager defined additional features and components that were required for the avatar system. I made sure to keep these features in mind as I was designing the visuals and UI:

  • Ability to sort by rarity

  • Background music

  • Instant update to Twitter profile photo

  • Marketplace for users to purchase digital items

Icons

The primary goal of the icons was to ensure they were simple enough to be recognizable when scaled down to a smaller size. I created a set of pixel-aligned icons that would work for this project. Every icon is set at a 2px stroke at 40x40 pixels.

Not just a new set of component

Not only was I designing new components, but it needed to address various "what if” roadblocks:

  • What if a user wants to identify an item’s rarity before making a purchase?

  • What if there’s a long card title that exceeds 1 line?

  • What if a user wants to see how much an item costs in Ethereum and fiat currency?

Iterations

After the avatar system beta launched, one of the problems we encountered was the lack of a rarity indicator, meaning it was not clear what the rarity of each item was. I revisited the design, proposing an update that included a colored frame and stars to better indicate an item's rarity.

Conclusion

The avatar system was well received by the team and community. My biggest learning was adding details to the UI required thoughtfulness and understanding that addresses “what if” scenarios. We have to be able to answer questions such as “How might a user determine an item’s rarity at first glance?” as well as “what if a user wants to know the currency conversion before making a purchase?” and being able to design in a way that is easy and intuitive. This experience gave me the opportunity to develop an intuitive eye for design rather than designing purely for aesthetics.