Taconomics

Figma Designs | Deployed site

A freelance UX/UI consulting and design project.

About Taconomics

Taconomics is meant to be a decentralized application (DApp) that seeks to create a launchpad so that latino artists can make themselves known through their digital art. In other words, it's an NFT art gallery where all the art exposed is in some way related to Tacos, since $TACO is the cryptocurrency used in this platform.

Platform's requirements

After talking to the client, who is the responsable and founder of Taconomics, I got a pretty good notion of what we needed to build. This notion arose from listing the requirements of the product, including its functional and non functional properties. Generally speaking, Taconomics needed to be a web application that allowed the user to:

• Explore and buy different digital art pieces.
• See the purchased pieces.
• Buy $TACO.
• Stake $Salsa (an alternative cryptocurrency used to buy unique art pieces) and obtain Lemons(the platform's main currency to buy art).
• Know more about the whole project and get information about the smart contracts.
• Communicate with the Taconomics team so people could enroll themselves as artists.

But that was not everything, because the platform was needed to built for artists too, so they could:

• Create their collections.
• Post their art.
• And claim their earnings from the NFTs sold.

User profiles

With that being said, I could get the answer to a very important question: "Who are we building this site for?"

Basically, there were 3 main user profiles that will use the platform:

• Collectors: people interested in buying digital art.
• Artists: people that want to publish and sell their art.
• Administrators: people that have permissions to edit the site's content.
• These types of users need to connect a wallet on the Ethereum network via Metamask to access all the functions of the platform. The last type of user is the one who is only "visiting" the platform and has permissions limited to read-only.

The site's architecture & User flow

Taking into account the different user types and the platform requirements, I came up with the platform's general user flow:

Wireframing

Main components

The slider

Originally, I proposed a simple hero page with a heading, an image, and a call-to-action button, but the client suggested a slider with the main actions that you can take in the platform and I thought it was a great idea so we went with it. The slider consisted in two slides, one for buying and the other one for selling art. These slides were meant to contain custom graphics for Taconomics, graphics which we will see later on the Style Guide section.

Card component

This component is meant to change state when hovered on to see a description of the artist and a link to see its collection in full detail.

Buy $TACO / Stake $Salsa Component

The client and I decided to put these components together in the same page because they are very related talking about functionality, because without $TACO and $Salsa you can not buy art on the platform. In order to change from one component to another smoothly I suggested a switch view.

The first component consists in a simple swap component that you can find in most of the cryptocurrency sites where you can buy of swap cryptos.

The second component is a little bit more complex, given that there are two ways in which you can make Salsa: the multi-asset or the single-asset way. In the first one, you use $TACO and WETH to create $Salsa, and in the second one you select either $TACO or WETH to make $SALSA.

To select either the multi-asset or the single asset way I suggested a select button so as not to spam the switch component. Once you select the multi-asset way, you have to choose again between $TACO and WETH, so I went with option buttons but designed in a way that doesn't feel like an option button.

Style Guide

Since the begging the client mentioned that Taconomics needed a logo and a little bit of branding and I was delighted to work on it. At first, I suggested going with a 3d-like concept that has become very popular since last year but the client said he had a more of a flat style in mind.

Choosing the typography

For me the typography you use in a product is a very important aspect of the design (and should for every company) because it helps a ton to build the product's image. Since we were building something flat and not that serious, I suggested 5 different fonts for the client to choose (it could be one or two).

Most of the designs contain Nunito, the Monserrat font was used very subtly in some UI elements.

Designing the Logo

For some reason, I couldn't picture anything but a Taco with a smile, so I did my best to meet the client's requirements. The design is also very cohesive with the chosen typography.

Fun fact / Note: In Mexico, it's very common to go to a Taco stand and when you are offered salsa, they put it in a bottle similar to the 'i' in Taconomics, that's why it looks like that.

SVG Assets

These handcrafted svg designs were created exclusively for the platform.

Color Palette

UI Components

Final Designs