Client and Objective

The client is Moon, they are 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 the users.

The objective is to establish the visual language of this new NFT marketplace app that is ready to revolutionize the digital art scene. Lock a visual aesthetic and then scale the design on multiple screens, based on the wireframes and the flow that is provided by the client. Build a UI Library of the final UI and create a functional prototype.

Design Process

The design process involves the following key stages:

1. Research & Moodboards

2. Visual Exploration & Experimentation

3. Locking & Scaling Design

4. Design System & Components

1. Research & Moodboards

The first step, as in any creative process, is to do some market research and get familiar with the subject, which is the world of NFTs in this case. While researching, I collected images, textures, icons, etc. that caught my attention and could be used as inspiration for exploring the visual direction for the app.

The first moodboard concept was minimal with bold type and accent colors while the second one was dark mode with contrasting colors.

Wireframes

The following wireframes were the roadmap for the five final NFT marketplace screens and were provided beforehand. These screens presented a basic outline of potential elements to include in each section.

2. Visual Exploration

With some research and inspiration collected for my moodboards, it was time to kick off the visual design exploration. Using the wireframes provided by the client Moon, I started off with designing splash screens exploring typography, colors, and an overall visual aesthetic. The idea is to experiment, mix-and-match different directions and see what works best for the app.

3. Locking & Scaling Design

Between the two concepts explored in the previous stage, I chose to go with concept #1 as I felt the sleek and simple aesthetic with moody grey backgrounds would be an interesting direction for the NFT marketplace as opposed to the dark theme.

I created initial screens for all the wireframes and refined them until I was happy with the end result while scaling the design in a simple and efficient way.

4. Design System & Components

With a couple of screens designed and locking on a visual language, it was time to bring together our styles, components, and modules into a document that is for our UI library or Design System.

A UI Library is usually a lighter version of a Design System.

It contains colors, text styles, reusable components/modules and is key to executing a consistent and cohesive experience.

Final Screens

After a couple of tweaks here and there, here are the final screens for the NFT marketplace startup Moon - ready to revolutionize the digital space!

Prototype live here. Try it out!

Takeaways

Through this case study I learnt a lot about User Interface design and UI fundamentals. From approaching a design process at the initial phase of benchmarking to competitor analysis to exploring Figma. It was a really good insight into creating beautiful and functional digital experiences.

This was created as part of Dribbble's Intro to UI Design Course — with Daniele Buffa, who is an excellent teacher. I'd also like to thank my group mentor Nadya Santapaga and other mentees for their continued support throughout.

Thank you!