Moon: NFT Marketplace
Overview
Background
Moon is a fictional project of a NFT marketplace mobile app.
Client
Moon is a new up and coming startup with the goal of revolutionizing the NFT marketplace business with a design-first approach and a deeply curated experience for their users.
Objective
Establish visual language of this new NFT marketplace app
Lock a visual aesthetic and then scale the design on multiple screens
Build a UI Library of the final UI and create a functional prototype
Timeline
3 weeks
Audience
The audience is people that embrace and follow the world of NFT and digital art. We’re talking mainly about tech savvy people who:
Know their way online and in the world of crypto and NFT
Have strong sense for visual aesthetic and art
Value curated and beautiful experiences as much as they do with the digital art that they create, buy and/or sell
Deliverables
New visual language
High Fidelity screens
UI library
Functional Figma Prototype
Moodboard & Visual Exploration
Moodboard
To establish visual language, I referred to Dribbble and Pinterest to find designs for direction and inspiration. After exploration, I categorized the designs I found into 2 separate groups:
Edgy & Bold
Elegant & Modern
Afterwards, I narrowed down the designs I liked the most into finalized mood boards to use as reference.
Visual Exploration
With the aid of my mood boards, I experimented different visual directions to generate ideas of what the app would look like. For efficiency and consistency, I designed the same 2 of the 5 key screens (Splash and Home) per visual aesthetic, which I created two of them for each mood board style.
I decided to go with the first aesthetic/direction since it resembles an art gallery and allows content to stand out the most with a simple color palette and minimalistic approach.
Polish & Scale Design
Splash & Home Screen Redesign
Although I already designed the splash and home screen, I wanted to solidify a concrete visual aesthetic with a quick redesign before starting on other screens.
Final Design
Once the aesthetic was established, I designed the rest of the key screens: Search, Profile, and NFT. Here is the final design for all of the key screens below:
UI Library & Prototype
UI Library
For consistency and branding purposes, I created a UI library to setup:
Typography
Colors
Grid & Margin
Components & Modules
Prototype
Finally, here is a quick prototype I made on Figma. The most fun and challenging animation/interaction was the card swiping on the home page.