Hello world 👋,

Welcome to my design debut! This is a case study on the mobile app I designed for Moon NFT Marketplace (a fictional client) for Dribbble's 4-week UI Design Course.

Project Background

Moon, an up-and-coming NFT marketplace app that is looking to revolutionize the space, approached me to help them design their mobile app.

The Objective

Moon was looking to gain an edge over their competitors with a design-first approach and a deeply curated user experience. Not a simple undertaking given how competitive the NFT marketplace business has become over the years.

I agreed to help Moon with the following:

1. Lock a visual aesthetic

2. Scale the design on multiple screens

3. Build a UI library

4. Create a functional prototype

The Audience

Moon's target audience was tech-forward people who have already embraced the endless possibilities of digital art. These people tend to work in tech, believe in the digital currency revolution, own crypto assets, and have an interest in art. They are looking to create, buy and/or sell NFTs.

The Solution

An aesthetically pleasing user-friendly design that serves as the visual language for the Moon's app and future branding.

My approach to lock down Moon's final design and prototype was as follows:

Step One: Mood Board & Visual Exploration

I started by conducting research on (i) existing NFT marketplaces, (ii) best NFT art of all time, and (iii) NFT art trending today.

My findings on the aesthetics of NFT art were best summarized by this article. Ones that resonated were:

• Futuristic, retro and sci-fi themes are frequently explored and highly coveted by collectors

• “3D” art is the most viewed with higher selling points, perhaps reflecting a ‘medium’ specific to crypto art

• The average color palette of NFTs tends toward purple, reinforcing an aesthetics rooted in technostalgia

I created two design concepts to explore two design directions:

1. Dark & sleek

2. Light & stylish

Eventually, I decided to go with Light & stylish for Moon's app, but below is the thought process behind this decision.

Concept 01 - Dark & sleek

The Dark & sleek concept was inspired by "dark mode" that we often see in apps today. I really liked the way the orange and blue colors worked together, and how they really helped bring out the purple in the picture of the home screen.

To get to this version of concept 01, I put together a mood board, experimented with a few splash screen designs and then locked down the one you see above.

Concept 01 mood board

Concept 01 design options

Concept 02: Light & stylish

The light & stylish concept was inspired by a minimalistic design. The goal was to use only one color to draw user's attention to major messages or CTAs ensuring that the app design did not overpower the colors in the digital art displayed on the marketplace. I chose purple as this color as it aligned with my research on NFTs and digital art.

To get to this version of concept 02, I put together a mood board, experimented with a few splash screen designs and then locked down the one you see above.

Concept 02 mood board

Concept 02 design options

Step 02: Scale the design

After locking down "Light & Stylish" as the visual aesthetic for Moon's app, it was time to scale the design to multiple screens. Moon provided me with the wireframes they wanted me to use to scale the light and stylish design.

Wireframes

Using the above wireframes I scaled the design I created on the splash screen and home page to the final design below.

Final design

Step 03: Documenting the UI Library

While finalizing the design I documented the typography, color scheme, grid & margins, components and modules I used so that Moon can easily scale the design further going forward.

Below is the UI Library I used.

Typography

Colors

Grid & Margin

Components

Modules

Step 04: Final Prototype!

Below is a recording of the final working prototype. Click here if you want to check if out yourself!