wave.png
nft-horizontal-logo.png

NFT Art Mentor strives to provide an easy and functional application that allows users to learn basic content about non-fungible tokens, NFTs. This new technology is still very foreign to many people, but at the same time traditional artist are curious to learn more. NFT Art Mentor provides an easy to follow learning feature to help users with basic NFT knowledge, provide an array of highly rated NFT art mentors, guided steps to create needed accounts to sell an NFT, and a rich community of artist sharing experiences.

home.png

Application Overview

My Role

As the UX/UI designer I performed user research and competitive analysis, and created user personas, user flows, wireframes and prototype.

Sector

Web3, NFT Art

The Challenge

As the blockchain is becoming a revolutionary platform for artist to successfully and securely sell their artwork, it is also a very foreign concept to many people around the world. Many traditional artist are intrigued and curious to learn more about

this new platform but are easily intimidated by their lack of knowledge and difficulty in understanding this new concept. Artists are left unsatisfied and without any concrete guidance on how to start their own non-fungible token (NFT) on this new technology.

The Goal

Understand existing competitors' weaknesses and strengths along with a better understanding of who the target user is through the use of qualitative research. Design an application that provides an easy to follow learning feature, steps to create and or sell an NFT, connect with highly rated NFT mentors and a rich community of artists for support.

Methodology

I used the following stages from the Design Thinking Process as my framework:

design-thinking-process_all-colors.png
Adobe_XD_CC_icon.svg.png

XD

photoshop.png

Photoshop

Adobe-Illustrator-Logo-1024x998.png

Illustrator

zeplin.png

Zeplin

usability.png

Usability Hub

bal.png

Balsamiq

ow.png

Optimal Sort

Design Toolkit

Design Process

"I have to create something better!"

Once I identified the challenge at hand, I conducted research on four existing competitors and completed a heuristic

evaluation on NFT's usability. Having a good understanding about existing competitors in the industry is a crucial step for the direction

of my design solutions. My goal was to identify what type of design solutions already existed and to pinpoint strengths and weaknesses,

and finally to outperform those design solutions.

under-red.png
understandred.png
clarity.png
ja-logo-default.png
2560px-Quizlet_Logo.svg.png
nft-drop-logo.png
voc logo.jpeg
comp-anal.png

Key Insights

  • There aren't any mentor applications that currently exist with a learning feature. Most only provide mentor advice. To combine both learning and mentor features into one app can become very helpful for NFT beginners.

  • Mentors completed a rigorous verified mentor process without the user having any input after their session with a mentor. Providing the user the option to rate their mentor can be very beneficial. 

  • Mentor apps are not easily accessible unless you pay for subscription or receive a secure link through text. To allow the user to access all that it offers without restriction can increase the number of users.

  • There are all kinds of learners and it is vital to include a variety of learning options.

  • Allowing the user to receive personal notifications and a progress screen of their current learning is important for the user to feel accomplished and motivated to use the app. 

  • NFT apps are limited to selling and/or creating NFT art. Adding a learning feature will help the user from using multiple apps.

press to zoom

press to zoom

press to zoom

press to zoom
1/13
heuristic-eval.png

The goal of the heuristic evaluation early on this stage was to explore existing ideas of what makes the competitor apps usable. I evaluated the NFT app and below are my findings which I then took under consideration as I moved onto my next step.

press to zoom

press to zoom

press to zoom

press to zoom
1/11
observe-red.png

"Let's get to know our users!"

Next, I conducted user interviews and surveys to be able to understand potential users. I interviewed 3 participants

and 12 survey participants. All were traditional artist and either new nothing or very little about NFT art.

My goals going into this research are listed below.

observe-circle.png
user-int-surveys.png

Goals

  • I wanted to understand the users current knowledge of NFT art.

  • I wanted to understand the users desire and knowledge of selling artwork online.

  • I wanted to better understand user behavior when it comes to selling artwork.

press to zoom

press to zoom

press to zoom

press to zoom
1/16

High Level Takeaways

  • Artists want to feel connected and appreciated

  • They all want to sell their artwork but express it is complicated and a lot of work

  • They all want exposure, to sell their art and make money

  • They are all open to the idea of an easy to use app or website that helps then sell their artwork

  • Most artist have never heard of an NFT but all have heard about crypto currencies

  • Most are open to technology

user-research-analysis.png

Here I carefully reviewed all my notated and recorded qualitative data and started to organize it by participant

using 4 categories; behaviors/attitudes, needs/goals, frustrations and quotes/facts.

After thoroughly analyzing the participants data, I then created affinity maps that were categorized by

common interesting themes. This allowed me to discover common and important insights that would help shape my

design solutions. Below are my findings.

"I don't know anything about NFTs."

rj.png
jerry.png

" Crypto currency is fascinating! I don't really understand them tho."

madison.png

"Yes, I feel like I am missing something when it comes to selling art."

The Problem

Artists need an accessible application that provides an easy to follow learning feature with basic NFT art content, an easy to follow guide to sell their NFT art, connect with highly rated NFT mentors and a rich community of users for support, so that they can become confident and successful selling their NFT art on the blockchain.

"Who am I designing for?" "How will I meet their needs?"

My next focus is on my target users and their needs. Some needs presented in my user research analysis are;

allowing the user to easily learn content about NFTs, provide a step by step feature to sell their NFTs online and provide an

array of qualified NFT mentors and a rich community to connect with. The personas below target these main features.

The user flows and sitemaps will map out how to help the user accomplish their goals.

ideate-red.png
ideate-circle.png
personas-and-journeys.png

press to zoom

press to zoom

press to zoom

press to zoom
1/6

These user personas and journeys are based on specific statistics and behaviors which allowed me to stay true to the user's goals throughout the entire design process. 

task-analy-and-user-flows.png

To begin helping the user meet their needs I conducted a task analysis and created user flows to help me map out how the user will complete a task and accomplish a goal.

press to zoom

press to zoom

press to zoom

press to zoom
1/6
sitemap-and-card-sorting.png

With my user flows mapped out, I could now focus on the architecture of the overall application. I started with my first sitemap below. I mapped out four main buttons on the navigation bar that would guide the user to complete tasks.

Initial Sitemap

Revised Sitemap.png

Open Card Sorting

Now I wanted to make sense of my users, to see how they understood and categorized content of the app. I went with Optimal Sort and chose an open card sort using 20 cards and a total of 5 participants who completed the task. Below are the different categories the participants categorized the given cards.

press to zoom

press to zoom

press to zoom

press to zoom
1/6

Take aways

After this research I learned I could minimize the main buttons for a better flow. I originally planned on having five main buttons on the dashboard, these included, home, learn, mentors, community and settings. After viewing and analyzing the results I decided to combine mentors and community into one button, Artist. I also decided to change the button's title from mentor to artist to appeal more to the traditional artist. Under the artist button I added the mentor and community buttons that the user can choose from. I also decided to add a third button to the Settings button. I added Appointments. Here the user will be able to access upcoming and past appointments and leave a review on past appointments. I also changed the flow of the options once the user selected the mentor. I gave them 2 options, two ways to communicate to a mentor, through posing a question or booking an appointment.

press to zoom

press to zoom
1/1

"How might I..."

Here my goal is to visually map out the structure and functionality of my user flows. Determining the overall functionality

that the target user will interact with to accomplish their desired task. Some of my main focus points for my wireframes are the

overall product structure, information hierarchy, behavior, navigation and the placement of content. I started to transform all my

research and ideas using low fidelity wireframes using pen and paper and then transitioned into Adobe XD.

red-wireframe-circle.png
red-prototype.png

8 key features for mobile and desktop

  • Onboarding

  • Sign up

  • Browse Mentors

  • Select mentor and pose a question

  • Select communication method

  • Select payment method/pay

  • Ask a question

  • Select learn feature and complete a lesson

lofo-half.png
lofi.png
pen-and-paper.png

press to zoom

press to zoom

press to zoom

press to zoom
1/12
adobe-xd.png

press to zoom

press to zoom

press to zoom

press to zoom
1/3

Mobile and desktop

  • Splash screen

  • Introduction screen

  • Onboarding

"How might I..."

It is time to sketch! Here I started to transform all my research and ideas into a blueprint of my product.

I started with lo-fi wireframes for both mobile and desktop that focused on eight main features using paper and pen,

then recreated them in XD and created lo-fi, mid-fi and hi-fi wireframes.

press to zoom

press to zoom

press to zoom

press to zoom
1/3
midfi.png
midfi.png
hifi.png
hifi_.png

"Time to uncover opportunities..."

Now it was time to get my prototype in the hands of the user and test my hard work. My goal going into usability

testing was to identify problems, uncover opportunities and learn about the target user a bit more.

test-red.png
test-circle.png

Goal

The goal of this study is to assess the learnability for new users interacting with the NFT Art Mentor application for the first time on a mobile device. I would like to observe and measure if users understand the app’s basic functions and navigation to access lessons, mentors/artists, connect to community, pose questions and sell nft art.

Test Objectives

  • Determine if participants understand what the app is about quickly and easily (i.e., an application for people interested in NFTs to learn about NFTs, connect to a mentor/artist and sell) through the use of onboarding.

  • Observe how easily users login/sign up

  • Observe how easily users can find, select, pay for advice and chat with mentor

  • Observe how easily users can access NFT lessons

Methodology

This study was conducted in both a moderated-remote and moderated-in-person and was held at the user's work space and or home. This was a recorded moderated test. The test included a short briefing, task performance with NFT Art Mentor conducted on a mobile app, and a debriefing.

Participants

The study tested a total of 6 participants who were recruited through my contact list of colleagues and friends. They were screened beforehand for basic demographics to make sure they match the user persona for NFT Art Mentor.

Usability Test Plan

part1.png

21, Grocery Worker

part3.png

50, Art Teacher

part4.png

52, Software Engineer

part6.png

28, Student

part5.png

45, Art Teacher

part2.png

37, Hospitality

part1.png

21, Grocery Worker

part4.png

52, Software Engineer

With my initial high fidelity prototype ready to test, I began with my first 2 participants. My plan was to test all 6 participants, but realized after the second that I had a lot of confusion and uncertainty about being able to complete certain tasks successfully. Below are my 2 participants' observations and feedback.

Participant 1 - Moderated - Remotely

Age: 21

Occupation: Grocery worker

Test Notes:

  • Has heard about NFTs but doesn’t really understand them.

  • The introduction screen was a bit questionable with all the information available.

  • Stated the create account process was pretty easy

  • Couldn’t go back to the introduction screen and wanted to

  • He found the learning feature questionable. He wasn’t sure if he found it. He suggested add a word with icon

  • Found the 3 buttons (search, learn and sell) on top confusing

  • Found the community button easily. Posted easily on feed. Simple and easy to navigate.

  • Couldn’t find the mentor button. 

  • Was confused with the combination of NFT artist and mentors on the community screen

  • He clicked on the book now instead of the chat icon. 

  • He really liked the navigation bar, easy to navigate and understandable

testing-begins.png
Screen Shot 2022-03-26 at 2.03.47 PM.png

Clickable Prototype

Participant 2- Moderated - Remotely

Age: 52

Occupation: Software Engineer

Test Notes:

  • Add a click me button to start onboarding. 

  • Found the introduction screen a bit confusing due to all the information provided

  • He found the introduction page and sign up screens confusing

  • Felt the word on top was out of place, suggested to place it at the bottom

  • He was confused with the home page. Not sure what to do.

  • The provided terms were cool.

  • Was confused with the main lesson screen, and wasn't sure where to start.

  • He liked the profile screen

  • Suggested to move the add post icon. Seemed out of place.

  • Finding a mentor was confusing

interations.png

After I concluded my first two tests I decided to analyze my results before I proceeded with more testing. My first two users really had a difficult time completing very important features, like finding the learn and mentor buttons, so I made the crucial decision to revisit my user flows and reconsider the structure. Below are the two main issues, suggested changes and the evidence.

Issue 1: Nft community and mentors were confusing to find on the community screen. Both mentors and community shared a screen and did not have appropriate labeling or titles to be able to find mentors or artists within the community. (High) 

 

Suggested Change: Separate the two using 2 different buttons in the main navigation bar and provide their own separate screens.

 

Evidence: 100% (2 of 2 participants tested on 1st prototype) of participants were confused finding the mentors in the community screen. The titles and icons used on the community screen were not clear enough.

Issue 1 - Before

Issue 1 - After - Mentor & Community Separated

Screen Shot 2022-03-26 at 3.24.46 PM.png
Screen Shot 2022-03-26 at 3.24.54 PM.png
Screen Shot 2022-03-26 at 3.24.54 PM.png

On the before screen you can see I had one button that was for community. Once clicked you would see the mentors section divided by the medium of art at the top and the community at the bottom.

Here I separated the community and mentor features. They each have their own button on the navigation bar below. I also added text. They each have their screen as well.

 

Issue 2: The introduction/onboarding screen was too confusing. Participants stated there was too much information being provided. (High) 

 

Suggested Change: Use a more traditional onboarding and sign up process. A total of 4 screens will be used to displace the initial logo screen, 2 onboarding screens and 1 sign up screen.

 

Evidence: 100% (2 of 2 participants tested on 1st prototype) of participants were confused with the single screen introduction/onboarding. They were stuck on the screen for far too long.

More Traditional Onboarding

On the before introduction/onboarding screen I had too much in one screen that made it confusing.

On the after introduction/onboarding screen I decided to separate the information and remove some. I created 2 screens that highlight what the app provides.

Issue 2 - Before

Screen Shot 2022-03-26 at 3.35.17 PM.png
Screen Shot 2022-03-26 at 3.35.17 PM.png
Screen Shot 2022-03-26 at 3.35.27 PM.png
Screen Shot 2022-03-26 at 3.35.27 PM.png
Screen Shot 2022-03-26 at 3.35.27 PM.png

Issue 2 - After - Traditional Onboarding

second-half.png
Screen Shot 2022-03-26 at 3.53.06 PM.png

50, Art Teacher

part3.png
part5.png

45, Art Teacher

28, Student

part6.png
part2.png

37, Hospitality

With the improved navigation bar, features, flow and much more simplified design I completed the last four usability tests to see how well I did with my new iterations. 

Below is all the remaining qualitative research I gathered with the usability testing and organized it using affinity maps, rainbow spreadsheet and my possible solutions and next steps.

Clickable Prototype

press to zoom

press to zoom

press to zoom

press to zoom
1/5

press to zoom

press to zoom

press to zoom

press to zoom
1/4

Usability Test Reflection

Usability Test Report

More important improvements were needed after the usability testing. Below you will find the next round of iterations.

Learn Feature

Issue 3: Users had trouble starting lesson 1 from the learn screen. Severity: (High)

 

Suggested Change: 30% of participants were confused on how to find and start lesson 1.

 

Evidence: I will add visible titles “Lesson 1, etc” to the Title of lesson one. I will also make the titles of each lesson clickable along with the arrow.

Issue 3 - Before

Issue 3 - After - Traditional Onboarding

Screen Shot 2022-03-27 at 7.32.30 AM.png
Screen Shot 2022-03-27 at 7.33.16 AM.png
Screen Shot 2022-03-27 at 7.33.16 AM.png
Screen Shot 2022-03-27 at 7.33.16 AM.png

On the before lessons screen users would be confused how to find lesson 1 and how to start it.

On the after lesson screens I decided to add a welcome screen with an introduction/overview screen. On the lesson screen I added the appropriate title "Lesson 1" for users to find the lesson quickly and removed the circle from the arrow.

more-iterations.png

Home Screen

Issue 4: Users were confused with the home screen. Severity: (Medium)

Suggested Change: Reorganize the features and options on the home screen. Simplify the design more.

 

Evidence: 100% (2 of 2 participants tested on 1st prototype) of participants were confused on the home screen of prototype 1.

Issue 4 - Before

Issue 4 - After - Traditional Onboarding

Screen Shot 2022-03-27 at 7.48.06 AM.png
Screen Shot 2022-03-27 at 7.48.06 AM.png

On the before home screen users were confused with all the features provided and questioned the navigation buttons.

On the after home screen I decided to remove any features that were unnecessary.

Take aways

Many iterations took place at this point. Refining the flow of tasks, updating all the errors found by the users and simplifying the overall design. Overall, I felt I started with too much clutter on my interfaces and too many features for the user to decipher. I am a lot happier with the overall iterations and where it has brought my design.

preference-test.png

Introduction:  A preference test was conducted to compare the different design versions of the navigation bar and to learn which of the two designs participants preferred.

Participants:  A Total of 16 participants participated in the test on the 4th of March.

 

Methodology:  The study was conducted remotely using UsabilityHub.com. Participants were presented with 2 design versions of the navigation bar. Screen A had the titles of each button and screen B only had icons.They selected their preference of design and left their reasoning why.

 

Goal:  The goal for the preference test was to discover which onboarding design they were drawn to more.

Results

Screen A performed better, and the difference is 99.0% likely to be statistically significant.

Screen A - 88%

Screen B - 13%

Screen Shot 2022-03-27 at 8.08.32 AM.png
Screen Shot 2022-03-27 at 8.08.07 AM.png

I participated in a peer collaboration where the goal was to share prototypes, give as well as receive valuable feedback for our next iterations. A total of 3 peers were needed but I decided to go a little further and complete 4. Below is the feedback and my iterations in the PDF file. I also list feedback I disagreed with and my reasoning why I did not make the changes.

Design Collaboration

design-collaboration.png
access.png

Before I finalized my final prototype and implemented improvements in accessibility. Below you will find the completed PDF file with my findings and how I iterated my improvements.

Accessibility Improvements

The decisions for my overall UI design involved research of my current competitors, NFT apps and web3. I took under consideration how a lot of the web3 interfaces use color schemes using pinks, purples, blues and yellows. Web3 UI tends to have this futuristic feel and look, which is what I wanted to achieve as well. The following is a design language document for project NFT Art Mentor to ensure continuity throughout the product's design. It aims to keep a solid immersive experience for users. 

design-lang-system.png

Design Language System

final-screen-for-display.jpg
nft-horizontal-logo.png
home.png
walk-through.png
my-learning-ex.png

This project has been a huge undertaking and a great teaching experience for me as a designer. Not only have I learned an enormous amount of information about the entire Design Thinking Process but I also got to see the scope of what a ux designer undertakes to start and complete an interactive design. I realized that a product can never stop evolving. It can always be improved. 

I hope you have enjoyed viewing this project as much as I enjoyed creating it! Thank you!