top of page
Untitled design (2).png

How might we connect the tattoo community and give them the resources they need?

Scope of Work

Why a tattoo app?

Group.png

Research

  • Competitive Analysis

  • User Interviews + Surveys

Group 2.png

Strategy

  • User Persona

  • User Journey Maps

  • User Flow

  • Sitemap

Group.png

UX Design

  • Wireframes

  • Prototype

  • Usability Testing

  • Affinity Mapping

Group 2.png

UI Design

  • Product Name + Logo

  • Style Guide

If you were to ask anyone close to me who would be the most likely to have a tattoo, they would surely say me. I'm the girl who spent all her free time sketching and doodling designs on my arms. But unfortunately, they would be wrong. I've never gotten a tattoo- but it's not for lack of trying. There always seemed to be some sort of barrier between me and making that final appointment. So when CareerFoundry gave me the opportunity to create an app for the tattoo community, I knew I had to take on the challenge. I had so many unanswered questions and I was eager to solve this connection problem. 

Key Design Decisions

With the tattoo industry being ripe for opportunity, we must harness the power of connection and trust between users and their tattoo artists. When designing this app, I focused on these three features with the aim of solving our problem:

Private Messaging

This helps build a bridge between user and artist. Before, getting a hold of an artist was a task in and of itself but now, you can communicate with an artist with a tap of a button.

Adding A Collaborator

Users can collaborate on tattoo ideas with their friends and artists by adding a collaborator to their album.

Booking An Appointment

Booking an appointment with an artist is now instantaneous. With its step by step layout, the user can pick a date from the artist’s schedule, tell them exactly what they need done and confirm their appointment.

Screen Shot 2021-02-24 at 7.08.27 PM.png
Floral Tattoo Album.png
XYZ Studio Messaging.png
Messages.png
Group.png

Research

Research

What does the current tattoo app market look like?

I wanted to understand how our target demographic approached finding a tattoo artist, what they were looking for once they were discovered and what contributed to the final decision of making an appointment. To answer these questions I measured quantitative and qualitative data and researched our competitors. From this, I would understand the kind of product we needed to design for our users.

Analyzing Our Competitors

The tattoo market is incredibly unique because it is one of the few markets left untouched by the digital world. That is unless you consider the niche app, Tattoodo. An app to connect tattoo enthusiasts with the world's top tattooists.

 

So what can we learn from Tattoodo?

swot-utopia.jpg

From my analysis, I began to conceptualize what my users might expect the app to offer in visual design, content, and structure. I also learned from their mistakes and from that could established our my design plans to offer superb SEO with a focus on the local artists. Ultimately, to solve the connection problem for my demographic, I would need to take a different approach than Tattoodo. While they made a product for the tattoo enthusiast seeking out tattoo's from the world top tattooists, I was creating an app for the user to connect with their local tattoo artist.

User Interviews & Surveys

Problem Statement:

Utopia Tattoo users needs to be able to browse through local, reputable artists and see the designs they specialize in. They also need to reaffirm their design decision with seeing similar tattoos with similar placement. This will ultimately lead them to getting a tattoo that they are confident about. We will know this to be true when we see users interacting with artists more, making the decision to get tattoos and leaving reviews.

Research Goals:

  • To better understand the behavior of a person who wants to get a tattoo.

  • To understand their decision making when choosing to get or not to get a tattoo.

  • Documenting current user pain points in the process of finding a tattoo artist.

  • Collecting data on what this target audience would describe as valuable features.

Insight:

  • Users find tattoo artists through word-of-mouth.

  • Users agreed that an artist must be transparent in their prices and policies to earn their trust.

  • The key to a great user experience is a personable and trustworthy artist.

 

Pain Points:

  • Trying to find a compatible artist, speak with them and then book an appointment was a difficult and sometimes fruitless process.

  • Accessing important information like pricing, portfolios, and sanitation information was very difficult for users.

  • Curated care ( ex: darker skin tones) is not easily accessed and most of the time, not offered at all.

 

Patterns:

  • Users turned to Instagram, Pinterest, and Google to find an artist and get inspired.

  • The only way to get in touch with an artist was to go to their shop.

  • They would go to a shop that was recommended by their community.

  • All users had tattoos from traveling.

To view the entirety of my user interview research, click here.

Group 2.png
Strategy

Strategy

User Personas

By creating a user persona, it helped me to remember throughout the design process who I was designing the product for. By focusing on their goals and frustrations and by empathizing with them, I can design the right thing to fulfill their needs.

Kayla

The Connoisseur

Motivations: 

  • I want to express the love that I have for my child with a meaningful tattoo.

  • I want to have complete assurance in the tattoo artist before going to my appointment.

  • I want my tattoo artist to have a good rapport with my friends and family.

Frustrations:

  • I hate when I can’t look through examples of an artist’s work online.

  • I don’t like it when I can’t have help designing my tattoo from a professional.

  • I don't like being surprised by the artist with unexpected prices, techniques, or other involvement by other artists.

User's End Goal:

To book a reputable artist that will help her design a unique tattoo that represents the love she has for her child and execute it with perfection.

User's Scenario:

Since the birth of my first child, I have wanted to memorialize our special bond with a tattoo. In the past, I have only spontaneously decided to get a tattoo but I would like this time to be different since I am now focused on the quality. I lead a busy life as a mother, so I want information about the artist to be easily accessible and for them to be easy to reach. Ideally, I’ll find someone highly skilled in the style I want for a fair price.

Both user personas can be seen here.

User Journey Maps
User Journey Map.png

Scenario

Kayla is ready to start looking for a tattoo artist that checks all her boxes. As she has gotten a tattoo before, she knows exactly what she wants. Kayla wants to compare and contrast a couple of local artists to see which is most reputable in hopes of booking the perfect artist.

Goals & Expectations

  • Profiles to be complete with up-to-date portfolios, quality reviews, a detailed bio, and the artist’s contact information.

  • When chatting with the artist, she wants communication to be timely and efficient.

  • She wants prices to be transparent and easy to find.

How might we connect the tattoo community and give them the resources they need?

Building the Structure

Original Sitemap
Updated Sitemap

When approaching the original sitemap, I theorized what a user might expect when using our website. I also took inspiration from our competitors websites to see if what's working for them would work for our demographic, as well. To test my theory, I ran an open card sort and a closed card sort and I was shocked at the results.

 

While users generally agreed about the artists and studios categories, all other categories had little to no clear groupings. This could be because the cards were too ambiguous or because users expected something vastly different than what I had theorized. Surprised and thrilled at my new discovery, I set out to reiterate my sitemap in a way that made sense to my users.

To see the full card sort results, click here.

User Flows

From completing these user flows we envisioned what success looked like for my target demographic so I could design our product with the right features. Then, I mocked them up into low and mid-fidelity wireframes. Click here to see the task analysis and user flows.

Entry Point: Opening the browser/ Tapping a notification.

Success Criteria: Booking an appointment.

Entry Point: Opening the browser.

Success Criteria: Posting to "favorite" board.

User Flow #1
User Flow #2
Group.png
UX Design

UX Design

Wireframes

My research identified two major gaps in the tattoo market: communication and trust.

1. Private Messaging

Private messaging in my app is a crucial first step in establishing trust and transparency between customer and artist. It also serves the user as a direct line to the artist so the previous barriers between them and booking an appointment are now diminished.

Appointment Screen
Messages Screen
Direct Messaging

​This feature builds connection and trust by:

  • The opportunity of encouraging artists to reply in a certain matter of time will build trust and consistency with the user.

  • The private messaging feature allows user to have a record of all their chat history with the artist.

  • Users can upload photos to the chat to make the feature that much more dynamic.

Appointment Screen

Messages Screen

Direct Messaging XYZ Studio

2. Booking an Artist

A major pain point I saw in my research was the complexity of booking an appointment with an artist that met our qualifications. In my studio bio, we answer all of the user's questions about the artist. There are ratings, portfolios, and employees to scroll through to make them feel as secure as possible. In addition, there is a 1-Click "book" button to make booking an appointment as simple as possible for the user.

XYZ Studio Bio

XYZ Studio Bio

Appointment Form

Appointment Form

Set A Date

Set a Date

Confirm Appointment

Confirm Appointment

Appointment Confirmed

Appointment Confirmed

​This feature builds connection and trust by:

  • This feature acts as a one - stop - shop for booking an appointment. Here, the user can fill out all the details of the appointment, choose a date from the artist's calendar and confirm the appointment.

  • In the appointment form, users can upload photos and other files to the document so that artist's can see exactly what their customers want in a tattoo.

3. Collaborating on a User Board

Collaborating on a user board solves the problem of connection for our user. Most users wanted to connect with the tattoo community and this is a simple way to do that. A user board consists of favorite tattoo's from the app's gallery and it features the function to add a friend to collaborate on a user board with you. This is a fantastic way to share ideas and get inspired with friends.

2021 Tattoo User Board

2021 Tattoo
User Board

Add A Collaborator

Add A Collaborator

Invitation Confirmation

Invitation Confirmation

​This feature builds connection and trust by:

  • Allowing users to connect and share ideas through their user boards is vital to Utopia Tattoo feeling like a community which breeds trust and connection.

To begin prepping for usability tests, it was important to elevate my wireframes from mid-fidelity to high-fidelity. The high-fidelity wireframes were kept in grey scale to keep the users focused on form and function while providing the user with more context than the mid-fidelity wireframes alone.

Mid-Fidelity

Mid-Fidelity Wireframe
Mid-Fidelity Wireframe
Mid-Fidelity Wireframe

Mid-Fidelity Iterations

1. Appointment Screen.png
Messages.png
Screen Shot 2021-01-18 At 8.29.05 AM.png

Usability Tests

Usability testing provided invaluable information on how the app was received by our demographic. While some loved the overall idea of it, others had trouble with basic functionality in the app. Overall, I learned that the messaging function was too hard to find, using the term "user board" was too ambiguous, and that users preferred to look for artists rather than studios. Excited to have the answers I needed, it was time for another iteration.

"You building this app could open the doors to professionalism for actual, motivated artists."
"This app is perfect, like, I wish I had this app!"
"Adding a collaborator was so easy and it is such a good idea."
Group 2.png
UI Design

UI Design

Final Iteration and Visuals

The final product was made up of many iterations from our usability testing, peer feedback and accessibility standards. These iterations were invaluable and taught me how to take design to the next level in usability. For the visuals, I used Google's Material Design UI kit and all photography was from Unsplash.com.

Studios.png
Artists Screen.png
Landing Screen.png
XYZ Studio Bio.png
Sign Up.png
Floral Tattoo Album.png
Appointment Form-3.png
Filter.png
Artist Bio.png
XYZ Studio Messaging.png
Hamburger Menu.png
Appointment Form-4.png
User Bio.png
Messages.png
Appointment Form.png
Screen Shot 2021-02-24 at 7.08.27 PM.png
Gallery.png
Appointment Screen-2.png

Final Thoughts

Through researching our users, I understood that I wasn't alone and that a lot of people had similar stories to mine. Lack of connection and trust in this industry was universal. Building a bridge between users and artists through focusing on the key drivers brought about groundbreaking features like booking an appointment, adding a collaborator and private messaging an artist that helped establish that connection and trust our users were eager for. Our users guided our design from the beginning and helped us reiterate along the way and the ultimate product is one that I am proud of. Utopia Tattoo is what the tattoo industry has been looking for and who knows, maybe i'll finally book my first tattoo appointment.

bottom of page