UI Redesign for NFT Marketplace: This is one of the biggest design projects I've worked on. I collaborated with Stakeholders to align on a vision, and then built the Design System from the ground up. 
  

Project background

I was brought into work on Odisea May of 2023. There had been a previous attempt at coming up with branding and a visual language for Odisea, an NFT Aggrigator/Marketplace. But things had stalled out and I was tapped to come up with a fresh approach. 

I began by reaching out to the 2 main stakeholders, Julie Skrein the Founder of Odisea, and her Head of Development/Project Manager Nick Demarco. We met via Zoom and aligned on an overall vision for the UI, as well as a few key style elements when establishing the visual language for Odisea.

When I dug down for some Key Style Indicators, these terms came to mind:
- Retro
- Futuristic
- Bloomberg Terminal
- The Matrix 
- Hacker Culture
- Video Game

Colors:
- Neon Green
- Purple
- Dark Neutrals

No:
- No rounded edges
- Avoid gradients

Vision and Key Style Indicators

Right off the bat, my stakeholders explained that Odisea is different from other NFT Aggrigators and Marketplaces because Odisea serves as both. You can use Odisea like you would the most well-known example of a Marketplace, i.e. OpenSea. But Odisea also functions as an Aggrigator (Blur, LooksRare, NFTCoPilot, etc.) Not only can you buy/sell/trade NFTs listed on Odisea, but you can also tap NFTs listed on other Marketplaces. This would help to define our functionality. 

Where the last attempt at designing the UI fell short was connecting with Julie's vision of the brand. The designs were very bright, punchy and modern. The target persona for Odisea is a Daytrader in their mid 30's, typically male (78%), who uses the platform for 40-60 hours a week. Power users. Julie and Nick envisioned Odisea's branding connecting with that demographic.
 

Style Probes and Iteration

The concept of a Bloomberg Terminal was paramount. Daytraders want to see everything on one screen. So right off the bat, we avoid scrolling down as much as possible. All information and interactions laid out in front of you. 

Odisea featured a social component with a Leaderboard and Season structure. These are great tools for engagement. I played around with the concept of an anime narritive being suggested at in the marketing for this feature. I also suggested we only use purple in our color scheme when it pertains to the Season. 

I leveraged my skill with AI generated images to compile a series of anime-style images that gestured to a larger story. Eventually, these images became the touchstones for the Odisea brand.

Julie and Nick were blown away with the style probes I presented and with some slight tweaks we had a green light. My team - Alejandro, Liz and an incredible freelancer by the name of Martina were all onboard and ready to roll.

Design System

I began building out the Design System in Figma. Our Design System would effectively be the backbone of every page we'd create. Color and Typography systems. Components and variants. 

Colors

The original creating of the Odisea brand featured purple and white. But with dark mode as the default for the MVP, the purple would get lost in the background. There wasn't enough contrast and it was an Accessibility issue. 

I felt we were going to need a strong neon green to really anchor each screen in that "computer terminal" motif. This moved the purple to a secondary role as neon green became our feature color. 

Typography

I presented my team with 4 or 5 font pairings that demonstrated our specified traits; Seriff. Retro. Renegade. Something that would be on a computer screen in an 80's action movie. Okay, I added that last one. 

We decided on IBM Plex for headlines and Roboto Mono for paragraphs. We were rolling. 

I began wireframing Odisea using Iconify for all iconography. It's just so high quality and there are so many options. I highly recommend for anyone using Figma.

I was able to tap our in-house illustrator for anything that required her skillset. I tasked her with recreating my Iconify suite with a custom icon suite, but with our newly selected Odisea aesthetic. Straight lines. Sharp edges. Avoid stroke. As always, she delivered. 

Custom Iconography By Martina Gonzalez Benegas