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.