Client: InkMarket
Role: Lead UX/UI Designer
Team: UX Designers Jenny Lam and Catherine Galermo
Timeframe: 6 weeks
The onboarding and pre-launch site of an NFT platform for tattoo artists
The challenge
InkMarket is an NFT platform for tattoo artists to sell their original designs, or "flash” tattoos. The NFTs serve as a contract with their clients, who can then choose to have that tattoo inked.
Our team was asked to propose a redesign of the platform's landing page and onboarding flow with the goal to increase conversion rates.
InkMarket needs to recruit as many artists as possible and persuade those who may not know how this business paradigm could serve their practice.
The Process
-
User Interviews
Secondary Research
Affinity Mapping
Usability Test
Competitive Analysis
User Persona
Problem Statement
HMW Questions
-
Information Architecture
Service Blueprint
User Flows
Sketches
Wireframes
User Interface Design
Mid-fidelity Prototype
-
Usability Test
Design Iteration
High-fidelity Prototype
The outcome
The redesigned landing page introduces InkMarket's concept with clarity and transparency, while a simplified onboarding process makes it easier for new artists to sign up.
Research & Synthesize
Context
First things first… what is an NFT?
If you're like most people, you might have heard the term but aren't quite sure what an NFT is. Our team was in that same position, and we had to get up to speed before starting this project.
Here's a quick explanation:
An NFT or "non-fungible token" is a unique digital record that proves your ownership of an asset —i.e. digital art, videos, music, fragments of text, or experiences.
These tokens are publicly visible and verifiable on cryptocurrency blockchains. For this reason, they act as a "certificate of authenticity," which makes it possible to sell or trade digital or intangible assets just like any physical work of art.
Research methods
Diving into the world of tattoos and NFTs
During our Discovery phase, we:
Conducted 5 interviews, with 3 tattoo artists and 2 NFT creators.
Contrasted and validated our discoveries with secondary research, analyzing articles and YouTube videos.
Evaluated InkMarket's current content structure and conducted a usability test with 2 tattoo artists.
Analyzed direct and indirect competitors (3 tattoo NFT platforms, 2 tattoo booking apps and 3 NFT marketplaces).
Key Insights
Stepping into the tattoo artist's shoes
I like having full creative freedom and control over my tattoos.
I want my work to be original; I would never copy another artist's tattoos.
When I make a flash, I post the art on Instagram and handle customer's inquiries directly.
I'm excited about the world of crypto and NFTs but I don't know enough about it yet.
I would trust this model more if I saw big names in the industry getting involved.
Pain-Gain Map
What are an artist’s challenges (pains) and motivations (gains) when thinking about entering the NFT business?
User persona
Kim Harada
30 | San Francisco, CA | Tattoo artist, 10 years of experience
Wants to be valued as an artist, not just a tattoo "technician". She enjoys having full creative freedom and drawing her own designs.
Wants to find new ways to expand her business, earn more profits and grow her client base.
Gets frustrated when clients approach her without a real interest in booking her services. Wants an efficient process to take on new projects.
Is curious about about NFTs, but doesn't fully understand how they work, or how it could benefit her business.
Current site evaluation
1. Is this site up and running?
The first thing to note is that InkMarket is currently being developed. However, the way the content is structured appears as if it had already been launched.
Users said the featured artists pages would be the first place where they would click to see how this works. However, these pages are currently incomplete, which can cause confusion and diminish the user's trust.
2. Ready to sell?
Unlike most NFT platforms, InkMarket has not yet implemented payments in cryptocurrency. Despite it being a crucial aspect of the service, this is not explained anywhere on the site.
As part of the onboarding process, users are asked to upload a tattoo flash.
There is a mandatory field to set a price for the tattoo NFT, even though they lack information to make that kind of decision.
At the end of the signup the users first learn that they need to set up a Stipe account to receive payments in USD.
3. Where does the user go to learn more?
At first glance, InkMarket's concept seems straightforward. But as the user goes deeper, more questions start to emerge.
To answer these questions, they can click on:
"Learn more" or Blog tab, which takes them out of the page and into a Medium article. This poses the risk of the user not returning to the InkMarket site.
The FAQs.
The About page.
We noticed these last two could be improved applying visual design principles, such as spacing, alignment, and a shorter line-width, to improve legibility.
Competitive Analysis
All in due time
When looking at InkMarket's direct competitors, we noticed that All Our Best and Ethernaal are mostly informational websites focused on introducing the concept.
On these sites, there are no NFT pages yet, and the Featured Artist's section only links to their social media accounts.
On a YouTube interview, we learned that Ethernaal outlined a detailed plan to personally recruit and train 50 artists before launch.
The only competitor that does highlight NFTs is RareInk, which is in its post-launch stage.
Problem Statement
Tattoo artists who land on InkMarket's page are looking for opportunities to expand their business. They want to create an additional source of income that values their artistic expression as well as their technical abilities.
But they need to learn more about the NFT business, to overcome the uncertainty and trust this new model.
HMW Questions
How might we
... clearly communicate the value of NFTs and how it can benefit the tattoo artist's business?
... instill trust and a sense of inclusiveness in this new digital community?
... encourage artists to upload their work and address their needs as service providers?
Design & Prototype
Information Architecture
Introducing InkMarket
Our first solution was to restructure the Home page, making a distinction between a pre-launch and post-launch phase.
Since community is an important aspect, we decided to keep the Featured Artists section. Ideally, it would link to their filled-out profile pages. Alternatively, it could temporarily link to their social media.
The Featured NFTs section would be hidden until after launch, when artists had already uploaded their tattoos to sell.
Home Page Content Map
Task FLow
Reorganizing the steps in the signup flow
Analyzing best practices for onboarding flows, we realized it was important to lower the barriers for the user and ask from them as little as possible.
This was consistent with what we observed from an indirect competitor, IYNK, a tattoo booking app. In their onboarding, the tattoo artist was only asked to provide their basic profile information.
For this reason, we moved the step to Upload a tattoo NFT after the user had landed on their profile page.
User signup flow - Current
User signup flow - Redesign
Wireframes and Prototype
We designed a mid-fidelity prototype for our usability test.
The new Home page explains step by step how InkMarket works, and highlights the call to action for artists to sign up.
For the sake of transparency, we now mention upfront that payments are collected through Stripe instead of cryptocurrency.
The redesigned signup flow gives the users the option to upload a tattoo NFT once they land on their profile page.
Test & Iterate
Usability Test
Is the platform intuitive and informative enough?
We tested our mid-fidelity prototype with 1 tattoo artist, 2 NFT creators and 3 UX Designers.
Prompt: A friend recommended that you check out this website. Based on what you see here, can you explain to us what this platform is for?
4/6 users scrolled down to understand how the platform works.
2/6 users required further guidance.
Prompt: You still want to learn more about this platform, where would you click next?
5/6 clicked to the FAQs page and browsed through the content.
1/6 user clicked directly to sign up.
Prompt: Can you show us how you would create an artist account?
6/6 users completed the sign up process successfully.
Prompt: How would you upload a tattoo NFT?
6/6 users successfully uploaded a tattoo NFT, although 2/6 said the Upload button could be more prominent.
Design Iterations
While testing the prototype, users shared additional feedback and suggestions that helped us further improve our designs. We focused on the comments that best aligned with the project's goals.
Home page
In order to communicate InkMarket's concept as directly and concisely as possible, we:
Changed the original headline, to help users get the idea at first glance.
Reduced the scroll length, explaining the service in 3 steps rather than 4.
Changed the second CTA to sign up for email updates and moved it below the Featured Artist's section.
Signup process
To better guide the user, clarify the actions they needed to take and give them an easy option to skip ahead, we:
Highlighted the required fields.
Revised labels and added icons for the different steps.
Specified the purpose of signing up (selling and buying NFTs) and allowed to check both.
Added more options for links and social media.
User Profile and FAQs
To make the interface intuitive and informative, we:
Made Upload more visible and added new features, i.e. the option to create a collection.
Added clarification next to item Status, and an info button for guidance in Description and Terms & Conditions.
Simplified the layout of FAQs page to make it easier to scan.
Design System
When redesigning InkMarket's visual style, we added an accent color and gradients to the original black and white color scheme. This would increase contrast and highlight the main CTAs throughout the site. We also created a textured background with the "Tamar" brush on Procreate.
The original site used Roboto and Montserrat fonts, which we re-styled to use in paragraphs and links. However, we considered the headlines and logotype deserved a more distinctive typeface, for which we chose Oxanium a “square, futuristic” display font.
Hi-fi Prototype
With our final result, InkMarket's website addresses upfront the main questions and concerns that the tattoo artists might have.
The redesigned onboarding process encourages the user to upload their tattoo NFTs after they become more familiar with the interface.
Other insights and next steps
It is always important to communicate with clarity and transparency, but when trying to sell a novel concept surrounded by uncertainty, it becomes indispensable.
As one of our interviewees said it:
"If you want people to join it needs to be crystal clear how this works and what they're getting from it"
Through this lens, we would recommend further testing the design, and we gathered a list of additional ideas that might support InkMarket in this early stage:
For clarity and transparency
Implementing crypto-currency payment or communicating rationale behind the decision to use Stripe for now.
Considering announcing launch dates or roadmaps.
Introducing the concept with mockups or explainer videos.
Bringing out more elements of the potential terms and conditions into the interface itself (i.e. easy select if a tattoo cannot be inked by any other artist, or if it can only be applied to specific parts of the body).
For community building
Offering training efficiently with materials or webinars.
Building hype on social media.
Thinking about a special benefit or perk to join early.
Reaching out to "big names” in the industry, for other artists to follow suit.