Metra is a prototype for an app that focuses on the sale of NFTs.
I co-designed this app for MICA's UX Design graduate program using a variety of UX strategies:
This case study will explore the prototyping process, highlighting design decisions we made along the way.
My project partner, Roshelle Patterson and I were tasked to design a content streaming experience.
We immediately struck upon our mutual interest in NFTs (Non-Fungible Tokens), and the art industry that is blossoming around them.
NFTs are unique digital tokens that cannot be replicated.
They exist on a blockchain, which is a chain of code that acts as an immutable record for transaction data.
Because the blockchain records each transaction in a way that can't be changed, when an NFT is bought or sold, you can be sure it's an original.
The process of creating an NFT on the blockchain is called 'minting'.
NFTs, though widely used for collectable art, are also being used in financial, medical and legal applications.
Lots of people are buying NFT art on marketplaces like OpenSea, SuperRare or Mintable, but many potential users just don't know where to start.
People don't know which marketplace to shop on
People don't want to create a bunch of different accounts for each marketplace
People want to be able to see lots of art options by lots of artists
SOLUTION: Create an integrated marketplace for browsing NFTs.
The Investor: interested in NFTs for financial reasons.
The Creative: interested in NFTs to inspire their own creativity.
The Collector: interested in NFTs as a hobby / social activity.
AKA The Crypto Bro
Lives in San Francisco, CA
Works full time at a tech company
USES APP TO TRACK NFT TRENDS, INVESTIGATE POTENTIAL PURCHASES, AND MANAGE NFT PORTFOLIO.
AKA The Inspo Seeker
Lives in Boulder, CO
Works a part-time retail job
In a relationship
Lives with roommates, interested in painting, printmaking and digital art
USES APP TO FOLLOW COOL DIGITAL ARTISTS, FIND INSPIRING ARTWORKS & RESEARCH SPECIFIC STYLES
AKA The Art Lover
Lives in Brooklyn, NY
Enjoys baking, gardening, spending time with friends & family
USES APP AS A WAY TO EXPAND & ORGANIZE ART COLLECTION, AND CONNECT WITH FAMILY AND FRIENDS.
We created these proto-personas to help humanize the users we're designing for.
User personas should not be used to make assumptions or stereotypes about users.
Only user research can validate the needs and goals of real users.
User flows precede the wireframing process, and help us understand the tasks that users will be accomplishing through the app. We created several user flows for each persona, but here's just a few:
Wireframes are low-fidelity mocks or sketches that capture basic product features and design layout.
They typically don't include color, images, or real text.
Wireframes are the basis of later higher-fidelity prototypes, but they are expected to change significantly over the course of the design process.
We created wireframes for each of our user flows, here's a few of them:
Navbar Location & Order
We chose to have our main navbar at the bottom (instead of hidden, or at the top) because:
these core pages need to be easily accessible
bottom is standard for most mobile streaming applications
We chose the order of navbar buttons to be (from left to right) Home, Search, Profile because:
users expect profile information to be on the right for social/streaming apps
users expect the home / dashboard to be on the left
Rounded corners draw the eye inwards toward the center of the container
Rounded corners are perceived as more soft, smooth, and inviting than sharp corners
Rounded corners suggest clickability, and as a whole, lead to a design that seems more interactive, intuitive, and usable.
While rounded corners are great for content and buttons, it's important not to use them for things that are not interactive, such as dividers or unclickable background images.
We chose to design the app with a primarily black background, for several reasons:
to prevent bright white edges from competing with complex images
to emphasize contrast, colors & images
black is percieved as sleek, sophistocated and cool
Negative text should not be used for applications that involve a lot of reading.
We wanted a simple, unique name relevant to art.
'Metra' has meaning forwards & backwards.
Metra's name tells you what it is:
an art-related pocket instrument
We experimented with several iterations of logos using the Metra color scheme before settling on the CMYK cube.
Combining the user flows, wireframes, and brand colors, we created the first iteration of our prototype.
Here's a bird's-eye of the whole thing, which is divided into home, search and profile.
Home page is an instagram-inspired feed, populated by content based on topics, artists, and genres the user is following
Clicking on a specific NFT pulls up 'Token Stats' page, with specific information about the NFT, including price, trends, marketplace, etc.
Artist profiles (i.e. all other profiles) show feed, likes and boards
We designed this page to be like an effortless art-viewing experience occuring in outerspace
The Search flow is for users who want to browse topics or genres, search for specific NFTs or artists, or find cool suggested content
The Search start page shows suggested content based on activity
When the search bar has been clicked, a catalog of keywords by topic is shown to help users find recent searches & new content
Users can select a keyword, or type in their own search terms
Results can be viewed as a gallery or feed, and have the same icon controls as posts in the Home feed
Profile page is divided into three sections- Activity, Likes, & Boards:
Activity shows interactions, liked or reshared posts, comment threads, etc. (preferences customizable in settings)
Likes are where a user's liked posts live- one can also view others' likes in the same spot on thier profile
Boards are collections of organized or curated NFTs created by users, similar to pinterest boards or spotify playlist
We conducted 2 rounds of User Testing, with each round testing 5 participants
We recruited friends, family and colleagues who matched elements of our user personas
View our full research plan & interview guide here
Typically, user research should not include friends, family, or colleagues.
To avoid biased feedback, perfect strangers make the perfect participants.
Here are some of the most significant insights from our user research:
We received tons of great feedback not included in the slides above, about direction, icons, features, etc.
We also had lots of wonderful feedback from our teacher, Nitin Sampathi throughout the design process
All of this feedback educated our design choices as we continued to develop the Metra prototype
We added and tweaked many elements to create this high-fidelity prototype.
Here are a few of the most significant changes:
we went through several iterations before settling on our final navbars
we eventually dropped the 'likes' tab in the profile navbar in favor of a default 'likes' board
we changed the 'boards' icon in the profile navbar to avoid confusion with similar 'copy' icon
we added black background behind all navbar buttons to help with scrolling issues
dashboard > feed
based on user testing, we decided a dashboard would be more useful than a home feed
scrollable feed browsing of NFTs is still available through search & profile flows
having these responsive metrics provides immediate value for new users, and encourages users to check the app regularly
having wallet monitoring & NFT browsing features in the same app encourages users to make new purchases
As the final step in our prototype development process, we designed an onboarding tour.
This tour helps new users understand Metra and the tools it offers.
use the arrows to view different parts of the onboarding tour
This project was an amazing opportunity to use UX design skills to create something engaging and applicable to people interested in NFTs.
My project partner, Roshelle Patterson , did a great job handling most of the user research (Research Plan & Interview Guide) while I did most of the work creating the UI in Figma. We worked together to complete the user personas, user flows, and wireframes. I couldn't have asked for a better partner!
We both agree that what started as a school project became something with real-world applications, and we're interested in pursuing opportunities to bring Metra to market. While we currently retain all rights our intellectual property, we are open to partnering with a company interested in commercializing our design and taking it to the next level.
To make an inquiry about Metra, please email me at firstname.lastname@example.org