Xhibit: NFT Marketplace App
Tools:?Figma?|?Timing:?September 2022 |?Role:?Sole UI Designer
Case Study Overview
As part of the Dribbble UI Design Course, my assignment was establish the visual language of a new NFT marketplace app. Using Figma, the project included building a UI Library and creating a functional prototype. Xhibit allows users to view a beautifully curated marketplace of NFTs where they can buy, sell, or create digital art.
Design brief
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.
Actions:
Create 2 moodboards
Design 2 visual explorations
Design 5 high-fidelity screens
Develop design system
Create an interactive prototype
User Persona
My user persona was based on the client's brief and the audience they are looking to serve.
Noah's motivations are built around embracing innovative tech in combination with his strong sense for visual aesthetic art. Noah is tech savvy and knows his way online and but is new to the world of crypto and NFT. He believes he should be able to buy, sell, and create digital art on a trustworthy and simple to use and understand platform.
Wireframes
After understanding the user, next came planning the splash screen, home search, bid, and user profile pages. How could I help users get to their art interests faster?
Figma Wireframes
Design screen considerations:
1. Splash Screen
2. Home Screen
3. Search
4. User Profile
5. Place a bid
I needed to reflect on what exactly users would be doing on each of these screens and what would be the hierarchy of importance. What information should stick out?
Visual Designs
Moodboards + Visual Exploration
My favorite concepts were fun, bright, and modern while allowing enough whitespace for interactive elements to breathe. To differentiate my app from other NFT apps, I chose to deviate from what you typically see in crypto or NFT designs and bring in a bolder, artistic feel.
Typography + Color Palette
To distinguish from the neon colors in dark mode that you typically see with NFT apps and concepts, I decided to go with red and pink with orange and beige accents. The interesting curves and criss-crossing found in the Raleway type face and clean typeface of Cabin, complement the soft graphic shapes, rounded button corners, and blurred gradients I included in my design. Together these elements create an artistic and modern visual identity.
Welcome to Xhibit
I named my app Xhibit?based on the idea around art exhibits and exhibitions. According to research, the art exhibition has played a crucial part in the market for new art since the 18th and 19th centuries. The goal of this app is to revolutionize digital art and therefore can act like an art exhibit or exhibition as the catalyst to bring digital art to the public in a more accessible way.
Splash screen?didn’t stray far from my original wireframe, but I did want to make sure to highlight beautiful pieces of art that were eye catching to entice the user to continue into the app.?
Home?aims to be a one-screen interface so users can easily browse through curated pieces of digital art before they decide to proceed further to purchase.
Explore?allows the user to with the search for specific artists, titles, categories, and tags.
User Profile?displays the user's collection of artwork and allows them to view who they may be following or who is following their artwork.
Place a bid?page has the option to directly place a bid on the artwork or to read more about the description and specs of the artwork.
Components and Modules
Buttons, headers, icons, and search?are standard interactable fields using the branded colors and typefaces.?
Artist cards?standardize the layouts for categorized NFTs, search results, and user collections while showcasing the art first and foremost.
Navigation bar?allows the user to toggle between the most informative views:
1. Home: highlighting live auctions, trending NFTs, and best sellers
2. Stats: showcases the users watchlist
3. Explore: allows the user to search NFTs whether by seller, name, or tags
4. Wallet: allows the user to easily see funds avail
5. Profile: the user can review their art collection and following
UI Library
I was able to then compile all my styles, components, and modules into Figma to create a document for the UI library or Design System. The UI library will serve as the heart of the design which will help to ensure a solid and consistent design for the project.
Prototype
I created a prototype in Figma applying what I learned and discovered more ways to create interactions using the UI Design.
Reflection + Results
I love being a UX designer, but there's something really special to me about being able to think about UI as well and bringing the whole experience to a user through function and aesthetics. As someone new to the crypto space and a lover of art, building clean, modern and simple interfaces sparked a special interest.
I enjoyed thinking about atomic design and how each piece builds on each other in order to create consistent designs. Not only that, it was much easier to tweak design choices across all the art boards to find the best visual display. This was a great project to exercise my UI skills and I can't wait to see how far I'll go from here!
Results:
Delivered designs on-time
Developed a persona
Created a new visual language
Designed high-fidelity UI screens
Created UI library with type styles, color palette, components, and modules
Created an interactive Figma prototype
Callout: NFT images not owned or created by me, but by really talented artists:
@pooyazi, @shirpakman, @Dean_Lanner, @Isayev_art, @cryptopunks, @Renga-inc, @L4artiste, @Doodles_LLC, @Conte_art, @samuelgrayart, @MeldaVNH, @boredapeYC, and others.
"Wow, I love it. I'd save this for inspo if I came across this! It's so beautiful. ??"
-Rebecca R., UX Designer, Former Graphic Designer
