Case Study Overview



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.

Objective

Establish 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 from the client. Build a UI Library of the final UI and create a functional prototype.

Audience

The audience of this project is all those people that are embracing and following, in a way or another the world of NFT and digital art. We’re talking mainly about tech savvy people that know their way online and in the world of crypto and NFT, with also a strong sense for visual aesthetic and art, they value curated and beatiful experiences as much as they do with the digital art that they create, buy and/or sell.

Role

Lead UI Designer

Tools

Figma

Adobe Photoshop CC

Adobe Illustrator CC

Project Duration

April 15, 2023 - May 15, 2023

Goals

New visual language for Dig/Art.

Fully designed flow in High Fidelity.

UI library.

Functional Figma Prototype.

Wireframes

Wireframes were provided by the client as they had the layout determined and simply wanted a visual design and language.

Problem/Solution

Moon wanted a persuasive design language created for their app. Research indicated that perspective customers wanted an NFT marketplace that felt solid, stable, and dependable. Therefore, the design language was chosen to more closely match a natural aesthetic rather than the typical bright, neon, NFT-associated colors. Still, the design was kept bold and colorful. The challenge included framing the NFT art in order to highlight the art without detracting but still remaining strong in design language.

Moodboards

Two moodboards were created to capture an aesthetic to follow for the project. Our work tended toward two themes. After testing, users navigated toward the first moodboard and we chose that one to move forward with.

Visual Direction

We tested two competing looks from which to move forward and finalize. The two designs were put head to head and the first design came out the winner as it felt more inviting and accessible, and less like other NFT marketplace apps.

UI Library

We created a UI Library consisting of the elements that made up our design. This library has references to the color palette, typography, grids and columns, components, and modules of the design. To view the UI Library for this project, please visit: https://bit.ly/uidesignlibrary

Finalizing Design

Once we'd decided on the color palette and typography, the different elements were populated into the wireframe provided and the design came to life.

Outcome

The Intro to UI Design course provided a good challenge and I learned about the many aspects to successful UI design.

Prototype

To view the app prototype, please visit: https://bit.ly/introtouidesignappprototype