my|parlour
Eric Zirlinger
UX | UI Designer

my|parlour

Discover my tattoo style

35
Interviews
30
Usability Tests
12
Iterations
103
Iced Lattes

PROJECT INFORMATION

My Role

UX / UI | Competitive Analysis | Interviews | Surveys | Affinity Mapping | User Personas | Journey Maps | Content Auditing | User Flows | Sitemap | Low - Mid - High-Fidelity Wireframes | Prototypes | Mockups | Usability Testing

Tools

Sketch | Invision | Principle | After Effects | Optimal Sort | Google Drive | Photoshop | Realtime Board | Balsamiq | UsabilityHub

BACKGROUND

There are over 20 thousand tattoo parlors in the United States, alone.  

Tattoo regret is real - but has it been considered when creating a tattoo search experience? With all the noise and online information, choosing the proper artist for such an intimate, emotional, and permanent experience can feel overwhelming.  

my|parlour is the first application that empowers the user by personalizing the search as much as the tattoo itself. my|parlour aims at mitigating tattoo regret by making the user a more knowledgable consumer. It does so by identifying their tattoo style and connecting the user to local artists and tattoos based on that style.  

“I am a canvas of my experiences, my story is etched in lines and shading, and you can read it on my arms, my legs, my shoulders, and my stomach.”

Kat Von D

The Challenge

My goal with this project was simple - mitigate tattoo regret.  I believe this can be achieved by empowering the user to discover their style and personalizing the search experience based on that style with the intent of connecting the proper artist to the appropriate client, quickly.

My high-level goals were to:

  • Make it simple, fast, and not intimidating, to all users, everywhere.
  • Empower the user by helping them define their tattoo style.
  • Create a platform with a clear and simple focus.
  • Utilize the emotions associated with getting a tattoo to define the app style.

EXPLORE

Time to get lost and found.

Competitive Analysis Tools | Custom created UX Toolbox
Competitive Analysis Tools | Custom created UX Toolbox

Competitive Analysis

I gathered information about the competition to forecast the potential in the market. Several direct and analogous competitors were analyzed. Direct competitors included various existing mobile tattoo search engines, while the analogous competitors consisted of social media outlets (Instagram and Pinterest). 

Analysis methods:

  • Competitor Profile
  • Competitor Feature Matrix
  • SWOT Analysis
  • UX Analysis

Learnings

My analysis revealed potential opportunities in the demographic of first-time tattoo clients. Existing applications and websites are heavily focussed on the general culture of tattoos, but not on educating a new user based on their style. This lack of clear focus in existing tattoo search engines presents a unique opportunity.

In addition, I learned that certain apps currently functioning as a standalone service might be better and more valuable if incorporated into a broader (but still simple) solution.  

User Interview Tools | Custom created UX Toolbox
User Interview Tools | Custom created UX Toolbox

Interviews

During the exploration phase of my project, I conducted user interviews to get a better understanding of the problem. Also, exploration makes me sound so much cooler than I really am! I built off Jakob Nielsen's standards and the law of diminishing returns - choosing to complete no more than five individual moderated interviews.  All interviews were recorded with participant consent. Interviewees were recruited using a guerilla approach and received no incentive other than my wit and grace. Interviewees were selected if they had one visible tattoo.

Open-ended Interview Prompts:

  • When did you get your first tattoo?
  • Why did you decide to get a tattoo?
  • How did you select your tattoo?
  • What apps, website, or methods did you use to find tattoo inspiration?
  • How did you select the artist and shop?
  • Thinking about that first tattoo, please describe your tattoo style.
  • How did you feel when you got your first tattoo?
  • How do you feel about your first tattoo now?
  • Tell me about the interactions between you and that first tattoo artist?
  • If you could go back and give yourself advice when researching that first tattoo, what would it be and why?
  • Closed | Do you have any regrets?

Learnings

Interview results were organized utilizing affinity mapping. While not shown here - it is pretty awesome. Just take my word for it. 

Key takeaways from affinity mapping:

  • Friend referral and tattoo shop location are significant factors in artist selection.
  • "Rebellious" and "regret" were common words used to describe the experience.
  • Social media platforms played a significant role in tattoo inspiration.
  • All persons were not aware of the style of their first tattoo at the time they got it.
Persona Tools | Sketch
Persona Tools | Sketch

Personas

I created three personas using the interview results.  I referred to them throughout the entire product development process.  I admit that I also talked to my dog in the voice of the personas.  She loves it! 

Personas include the following sections: demographics, quotations, high-level theme, about, goals/needs, motivations, frustrations, personality, and favorite brands.

Learnings

All designers get stuck. Having developed central characters in the story helps separate me (the designer) from the user while embracing empathy over bias.

These personas (Devon is the primary) acted as a source-of-truth that invariably impacted the design by mitigating my personal bias. It kept me connected to the target user.  The more detailed the persona and their story - the more user-centered I stay.   

Journey Maps

User personas were then used to create journey maps. The purpose of the journey maps was to truly empathize with how individual personas experience tangible scenarios. 

Learnings

While time-consuming, the journey maps offered insights into new opportunities that helped me further connect the product to the user.  A critical insight was the common ground of nervousness and shop selection based on location.  Identifying this early allowed me to shift focus from creating a clean search experience to a simple guided search experience.  I found myself asking - how can I make Drea feel more prepared and less nervous? 

Journey Map Tools | Sketch
Journey Map Tools | Sketch

BUILD

Creating an MVP like an MVP.

Card Sorting Tools | Optimal Sort
Card Sorting Tools | Optimal Sort

Card Sorting

I utilized Optimal Sort for remote card sorting sessions.  Optimal Sort organized results into a similarity matrix. This matrix shows the proportion of participants who grouped any two cards in the same category. For each pair of cards, the intersecting cell shows the percentage of participants who arranged these cards together.

Closely related pairings are clustered along the right edge of the table. The darker clusters act as a strong starting point to identify potential groupings.

Learnings

Clusters results revealed that I was heading in the proper direction. I know... I am impressed too!  Additional attention will be given to search features moving forward.    

Sitemap Tools | Sketch
Sitemap Tools | Sketch

User Flow | Sitemap

Card sorting helped me organize both user flows and the sitemap. When working alone, I have found that creating user flows combined with the sitemap reduces the risk of error between documentation.  Like all parts of this process, the user flows | sitemap are continually iterating based on the user needs. 

Learnings

V 1 - V 4 of the User flow | Sitemap was too lean.  Additional screens were added to account for Human Interface Guidelines.  Specifically, the concept of always providing a clear path was overshadowed by focusing on limited interactions. I opted to give a clear path with additional interactions to help the user more easily navigate.  

Wireframes

I created wireframes, ranging from sketches to high-fidelity, throughout the design progression.  Iterations were made along the way based on feedback from colleagues.

Design decisions were based on familiarity and simplicity.  I chose to utilize a neutral background to keep the focus on the tattoos and mitigate challenging color interactions between tattoo and background. 

Research showed that most users garnered inspiration from Instagram and Pinterest. As a result, I chose grid layouts and scrolling to mirror common social media platforms. 

The images below, from left to right, are progressive examples of my iterative process. 


my|parlour

MEASURE

Making the invisible visible.

Usability Testing

I very quickly created an initial prototype in Invision to start testing.  I moderated five usability tests, both in person and remote.  Included in my usability test script are demographic information, background, and the following scenario tasks:

  • You just started thinking about getting a tattoo and don’t even know where to begin. Using parlour, identify your tattoo style and tell me common body locations for that style.

  • You’re planning on getting your first tattoo and want to select the proper local artist for your tattoo vision. Using parlour, find a local artist’s shop address based on your style.
  • You haven’t decided on what exactly your first tattoo is going to be. Using parlour, find and save a tattoo. Then view all your saved tattoos.

For this project, I utilized several methods for testing.  I find that as a team of one, this is the best way to mitigate as much bias as possible.  

The following images outline the various methods:

  1. Usability Testing | Rainbow Spreadsheet | Severity Ratings - I used my custom UX toolbox to analyze test results with maximum accountability and transparency.  Actionable items are determined after affinity mapping analysis data is inputted into the Rainbow Spreadsheet. The information is pivoted and organized into the Nielsen Severity Ratings for Usability Problems scale (0 - 4). 

  2. Affinity Mapping - I utilized affinity mapping to help isolate concepts and organize information quickly.  This process helped me visualize and discover previously unseen patterns and hierarchies.

  3. Preference Testing - I created a preference test on UsabilityHub to further mitigate bias.  I tested a few screens with ten potential target users based on age range.  Also, I included a follow-up question of what did you prefer about this screen to gain further insights into user selection.


my|parlour
Usability Testing and Accessibility Tools | UsabilityHub & Stark
Usability Testing and Accessibility Tools | UsabilityHub & Stark

Usability Test Learnings

Usability test results revealed several ratings of 4 on the Severity Scale.  Issues consisted of accessibility issues (specifically with typography contrast) to learnability/recall of onboarding.  

Lower ratings consisted of quick fixes such as linking tattoo shop name in artist profile to external tattoo shop website to minor cosmetic inconsistencies.  Next steps and solutions were organized and prioritized for the next prototype iteration. 

Preference testing favored screen Intro 2 (white background) over IntroScreenV2 2 (full image background) by 70 percent. Specific feedback from testers included "full image feels less professional" and "the graphics and smaller image combined look more refined."

Solutions

  • Ownership - Several users commented on how they enjoyed that the app was personal to them.  They specifically mentioned the title of my style in the nav.  To build on this feeling, and considering SEO, I decided to change the name from parlour to myparlour.  Bolding the my to add additional emphasis to the idea of ownership.
  • Accessibility - Contrast was checked using the Stark plugin in Sketch.  Both AA and AAA standards were satisfied after the changes were made.
  • Learnability | Recall - Transitioned from a single onboarding screen to progressive onboarding to reduce cognitive load. 
  • UI - Created several quick iterations based on the feedback from preference testing that added graphical elements and reduced image size.  


Build | Measure | Learn

Several more rounds of testing and iterating occurred. All tests were moderated and included groups of no less than five users in the target range.  I continued to measure error severity using a 0 - 4 scale.  As testing continued, additional insights rose to the surface.  Quantitative results from preference tests that were statistically significant were addressed.  Qualitative results that scored >= 3 on the rating scale were addressed.

INTRODUCING

my|parlour

Welcome to my|parlour...

my custom tattoo search experience.  my|parlour helps you discover your tattoo style, empowers you with tattoo knowledge, and cuts through the noise of random searching by creating a search with purpose.

Let's see how my|parlour simplifies and personalizes the tattoo search.

my|parlour

Intro Screens

The images on the intro screens are meant to represent a diverse group of users.  I focussed on using large photos to make the experience feel more personal and intimate.  Each screen has a different message that clarifies the app's intent as well as to empower the user. I placed a strong emphasis on the word my. Testing revealed that this created a sense of ownership for the user. 

The messages are:

  • discover my tattoo style
  • my custom tattoo search experience
  • find local artists based on my style
  • my body. my story.


my|parlour

Discover My Tattoo Style

The heart of my|parlour is the DISCOVER MY TATTOO STYLE feature.  The user is prompted to quickly select images that inspire them from a long curated list that is tagged based on style and color.  When the user clicks Done, the app customizes the tattoo and artist search experience based on the previous images selected and shows the user their tattoo style, history of the form, example tattoos, and their color preferences. The new knowledge empowers the user by making them more informed and adds weight and meaning to their tattoo search.

my|parlour

Tattoos in my style

The user now sees a personalized list of tattoos based on the results of DISCOVER MY TATTOO STYLE.  Users can favorite tattoos for quick recall.  Images are full bleed to allow for as much of the tattoo to show as possible.

my|parlour

Artists in my style

I learned from my research that users often select a shop entirely based on location and not based on expertise or style. Here a user is shown both local and highly-rated artists in the user's style.  This approach embraces the natural user tendency of shop selection based on proximity and makes the results relevant. From here, the user can quickly access needed information, review large pieces of work, and navigate to the shop website for more details.

my|parlour

Didn't find anything in your style

Sometimes we need to think outside of the box.  The user style does not constrain the search feature. As such, if the user does not discover an artist or tattoo in their defined style, they can search without limitations.  Search results can be quickly organized through the defined filters of shops, artists, and tattoos.  

LEARNINGS

Time to look inside.

What have I learned from this project?

Developing my|parlour was both a professional and personal journey.  As a person with several tattoos, I needed to be mindful that I wasn't creating the product for me. I continually went back to the personas to remove myself from the process.   In addition to the personas, I leveraged feedback from other designers not attached to the project.  Their insights challenged my perceptions and resulted in a better and still developing result. After all, no one summits the mountain alone.

A personal victory was eliminating a service that didn't add anything to the MVP. I scrapped an augmented reality feature and opted for a more targeted and straightforward product.  While the addition of the service would have been great, the ability to maintain it would have proven challenging. This service also would have overshadowed the heart of the product.  

Specific areas of growth:

  • Remember the goal of each design phase and work on not getting caught up in the details too early.
  • Embrace that a Design System is a living breathing document.
  • Fail fast, often, and early.
  • Establish the grid very early.
  • Take a step back so I can see more clearly.
  • Don't lose my buy ten and get one free coffee card!  That one was tough.

GRATITUDE & CREDIT

Thank you...

  • Lucia Ferreira for providing daily support, guidance, and inspiration.
  • Skye Selbiger for connecting all the dots that I couldn't see.