METRA
INTRO
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:
User Personas
User Flows
Wire Frames
User Testing
High-Fidelity Prototype
This case study will explore the prototyping process, highlighting design decisions we made along the way.
CONCEPT
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.
Non-Fungible Tokens
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.
In discussing the difficulties of the industry, we discovered a crucial barrier-to-entry:
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.
USER PERSONAS
We conceived of 3 different user types, with varying purposes within the app:
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.
The Investor
AKA The Crypto Bro
Lives in San Francisco, CA
Works full time at a tech company
Single
College Educated; Social drinker; Wants to retire by 35
USES APP TO TRACK NFT TRENDS, INVESTIGATE POTENTIAL PURCHASES, AND MANAGE NFT PORTFOLIO.
The Creative
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
The Collector
AKA The Art Lover
Lives in Brooklyn, NY
Recently retired
Married
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
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
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
To understand why consistency with industry standards, i.e. designing things in familiar ways, is important, check out Jakob Neilson's 4th Usability Heuristic or Jakob's Law.
Rounded Corners
We decided very early to implement rounded corners throughout our design, because rounded corners create effective/interactive content containers:
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.
Black Background
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
Reading large blocks of white text on pure black screens can cause eye fatigue.
Negative text should not be used for applications that involve a lot of reading.
BRAND
NAME
![Metra met′ra, n. a pocket-instrument, combining the uses of thermometer, level, plummet, and lens. [Gr., pl. of metron, measure.] Artem Ars, artem, n. Art, skill, craft. [Lt ., acc. of ars, artis. ]](https://lh5.googleusercontent.com/aUSjxzf9wbZ8LYk7P6fSbmMdfu-l4i0N11d_X1U-3vu4M_vV6NcimTJtlKaPvh5ZaQtaK5fZJt09ThMJujjwAQpE17CDX1CT6IjetMxjyJcfuHHChWeDt9c2EVaHSvrlaw=w1280)
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
LOGOS
We experimented with several iterations of logos using the Metra color scheme before settling on the CMYK cube.
COLORS
We wanted a simple, joyful color scheme that promotes creativity, making users feel like artists.
We chose Cyan, Magenta & Yellow for their brightness, and because they are primary colors used for printing.
We later added Lime Green to use for certain action buttons and toggles.
Our secondary colors were lighter, pastel versions of our main colors, used for links and other instances of colored text on black background.
LOW-FIDELITY PROTOTYPE
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 flow
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
search flow
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 flow
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
USER TESTING
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
HIGH-FIDELITY PROTOTYPE
We added and tweaked many elements to create this high-fidelity prototype.
Here are a few of the most significant changes:
navbar evolution
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
profile controls
for the highest fidelity prototype, we built out some of the important profile controls
messaging feature helps users be social if they want to, or negotiate NFT-related deals
notifications help replace the lost home feed
gear icon on profile hides menu with important settings such as privacy, notifications, and log out
these pages would need to be built out further during development as individual UX flows
END RESULT
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
FINAL THOUGHTS
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 alaina.r.b@gmail.com