top of page
Intro Img_edited.jpg

P R O J E C T :

UI Library and Figma Prototype

In a world of instant accessibility, people have become more and more expectant of trying the next best thing. As the saying goes, out with the old, in with the new. In the case of NFTs, non-fungible tokens on the internet, users have caught on to the prestige that comes with having full ownership of an individual existence of digital art and are vigilant about choosing a marketplace that catches their eye. To stand out among the ever-existing marketplaces, I partnered up with hypothetical client Moon during Dribbble's UI Design course to deliver a new UI library and prototype in four weeks. 

Figma Prototype

CLIENT

dribbble

Moon

DATE CREATED

September 2022

TOOLS

Figma

After Effects

Photoshop

PROJECT TYPE

UI Library

Figma Prototype

Dribbble Case Study

NFT example Pak's the Merge from Dexerto_edited.jpg

Pak’s ‘The Merge’ — $91.8m, DEXERTO

HOW WE
GOT HERE

Following the brief from client Moon, my initial thought process began with, "What is an NFT?".

 

After an evaluation of the landscape (people bid HOW MUCH?!), I began to discover insight into the mindset of our buying audience — creative, fast-learning humans that tend to lead trends, and pride themselves on discovering "it" first. With these attributes in mind, it made sense why Moon's marketplace competitors were popularly using dark, sleek, gradients to exude an underground, insider feel.

 

While the black tones seem to dominate the marketplace, this audience's never settle mentality based on what's new inspired me to also go an alternative path. A lighter, cleaner and bold path that would make searches for the "it" NFT more intuitive and streamline their purchasing path.

 

Just like the Moon in the sky, I wanted Moon to stand out in a sea of sameness.

moodboards

Inspired by space elements that sparkle, I found inspiration from the sheen of an astronaut’s helmet as well as luxury brands using glow and metallic in their typography. This style followed the black and gradient tones common within this industry.

Considering the audience of curious-minded individuals wanting to best new NFT, I was inspired by the clean and lighter white hues that showcase the art without overpowering the design-first marketplace.

Case Study - Visual Exploration.png

visual exploration

Concept 2 was the team's favorite, chosen for its light background and the 3D effect of the drop shadow and gradients. Presenting a modern, clean design helped to differentiate from the dark, futuristic themes seen across several competitor NFT marketplaces.

 

Over the next week, I polished and scaled this design across the provided wireframes and also developed Moon’s new Design System inclusive of Moon’s typography set, colors, components and modules.

scaling the design and
ui library

Portfolio - UI Library.png
Portfolio - UI Library 2.png
Screens - Splash.png
Screens - Home.png
Screens - Profile.png

final thoughts

Upon completing the four-week project assigned by Moon and the Dribbble team, I can genuinely express my enthusiasm for the final product!

 

As a designer without previous experience with Figma, learning and doing was quite the challenge. While several sleepless nights tinkering with the UI library and prototypes were had, the end result was well worth the work. Thank you to Moon, Dribbble, my mentor and peers for seeing me through to the finish line!

IMG_8598.JPG
SEE NEXT PROJECT
bottom of page