Designing the Tattoo App for the tattoo enthusiast community 

My Roles

UX Designer

UI Designer

UX Researcher

Tools

Figma

Adobe Illustrator

Marvel App

iphone-xs-mockup-perspective-style-right

About the Project

The process of getting a tattoo can be intimidating, especially if it’s your first. A user must do research on designs or styles, locate artists nearby, and find a tattoo studio to book appointments. The current websites and applications out there do not meet the needs of the user in totality. Most apps have an AR function or a blogging/sharing artwork capability. My task was to provide an easy-to-use and understand tattoo application for new tattoo clients, former tattoo enthusiasts, artists, and tattoo studios.

Possible Problems

“Our users need a way to go from choosing a tattoo to finding the right place to go for a tattoo with ease because although convinced already s/he wants a tattoo, the idea of doing something permanent is already an intense process physically and mentally.”

User Challenges

Solutions / Features

  • Finding the right tattoo shop

  • Issues with Inspiration

  • Where on the body to get the tattoo

  • Expressing what they want to the artist

  • Tattoo shop locator

  • Ideas from artists and other tattoo enthusiasts,

  • Possibly a questionnaires section

  • Upload photos of yourself and drag a tattoo

  • Training, literature, Information about process

  • AR Feature

  • Video chat or message chat with artists 

Research

Competitor Analysis

User Interviews

Site Maps

Card Sorts

Frame 2.png
Frame 1.png
Group 44.png
Group 49.png
Screen Shot 2020-10-05 at 9.16 1.png
Screen Shot 2020-10-05 at 8.11 1.png
Screen Shot 2020-10-05 at 8.18 1.png
Screen Shot 2020-10-05 at 8.17 1.png
Group%2048_edited.png
Group 47.png

Personas and Journey Maps

Frame 3.png
Frame 49.png

Wireframes 

Low Fidelity

Mid Fidelity

Paper Prototyping

WIREFRAMES.png
Frame 2.png

User Testing

The goal of this test is to assess the flow of Ink Tank and how the user responds. The user will be given tasks to complete to which they will be observed. Come the end of this study we hope to find what can be improved by the application or what needs to be added to better Ink Tank for users.

Test

Objectives

  • Easily access galleries and which way is best to access.

  • See if the user is able to schedule call and has enough information to schedule.

  • Determine if a user is comfortable enough to book a tattoo appointment.

  • Determine if trying on tattoos is best used in the app or both site and app.

Six interviews performed via skype or zoom with shared screens. Tasks were given to each participant and performed. While performing tasks the testers were encouraged to explain reasoning behind their choices.

Six participants for the voluntary testing of Ink Tank. Most participants had tattoos ranging from just one to more than they can count. Each participant was genuinely interested in the app and have said they would use such an app.

Methodology

Goals

PARTICPANTS

Observations

• Users spent time reading tutorials

• Moved through app easily

• Phone was up close to the users faces

• Several seemed excited to try a tattoo app

• All created accounts easily

Positive Feedback

• Log In and Sign In smooth and easy to maneuver

• Searching using topics for artists was interesting

• Loved AR feature idea

• Reviews on the main page it useful

• Onboarding was useful and appreciated options

Users were able to go through the app well until we arrived at the Artist Profile Page. Once there most had questions or concerns as well as comments at the end about this page. Because this is the page where all the features of the app are found, I chose this to adjust then work on the rest of the design from this point. As the process moved forward it became more apparent that this website should become an app rather than a responsive site alone which was determined after the excellent positive feedback about the AR feature and the search options.

Below you will find the high-fidelity artist page with the observations, errors, and feedback that were determined to be troublesome.

Group 218.png

Refining Design

With the information collected through observations and feedback as depicted within the rainbow spreadsheet I went to work on different iterations of the Artist Page. It came down to two options. I resent these two options for the artist page to the original six user testers using a simple A/B test.

Of them 5/6 chose option B while the 1/6 chose A simply because the tester liked the bigger picture of the artist but didn't particularly like the bottom half of the screen.

Group 219.png

Original Design

Option : A

Option : B

** Note; at this point in the design process color scheme had not been decided.

Onboarding / Tutorial Screens

With the positive reception of the onboarding/tutorial screens I set off to find different ways to portray the theme. Questions arose about the literalness of the onboarding.

In response, the onboarding was converted into simple illustrations. An AB test was used on instagram and completed after forty people voted. This vote came to 60% of 40 testers choosing the illustrations over the literal iphone shots.

Group 202.png

Final Iteration of Artist Page

Social Media buttons went from 4 to 2 with option for 3rd if Artist personally chooses. This sample shows Facebook and Instagram but other options are also available.

As mentioned above, one of the users enjoyed having a larger picture showing the artist. This gave me the idea of adding a banner option for both the artist page.

Artist full Gallery is shown directly on the main profile page with top tabs indicating different search results views including original search results. This option gave us a combo of the original wireframes showing the gallery on the artist page as well as gallery options.

ezgif-7-4363ba0c5e9e.gif

The chat feature and scheduling feature were moved to the main nav bar. These will only show up as available on an artist main page or an artists design page if the artist is available. On other screens a window will pop up with info if the user is or is not scheduled. (see final for details)

Reviews can be found on the main profile with a sliding tab left and right to switch between reviews and galleries. I wanted to make sure to keep these present because the whole purpose of the app is to find the right design or artist for the user and reviews often help users determine this which was positively accepted by user testers.

Final Iterations

FINAL.png

Thank you for taking the time to review Tattoo Hack and for viewing my portfolio. I cannot express the length it took to get to this part of my life but I am grateful to have had the chance to work on Tattoo Hack. The amount of knowledge I gained from this project from beginning to end is priceless. If you would like to know more about me please feel free to reach out.

  • LinkedIn
  • Instagram