Provide an easy to use and understand tattoo social media web application for new tattoo clients, former tattoo enthusiasts, artist and tattoo studios.
Roles and Tools
The process of getting a tattoo can be intimidating, especially if it’s your first. We must do research, find pictures of the artwork we may want to put on our body, and imagine what they look like on any given part. New clients may be nervous about health and safety concerns. While seniors may want a new look or a new artist to get work from. Finally, after all this, we have to 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 just an AR function or a blogging/sharing artwork.
About the Project
Tattoo Hack is a web responsive app where tattoo enthusiasts and artists collide. The app engages users to be in a community while also gearing and assisting people in the tattooing process from finding art work to booking an appointment.
What is Tattoo Hack?
Finding the right tattoo shop
Issues with Inspiration
Where on the body to get the tattoo
Nervous about the needles and health concerns
Expressing what they want to the artist
Solutions / Features
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
Video chat or message chat with artists
Two known applications to compare are InkHunter and Tattoodo.
Inkhunter is an artificial reality tattoo app where a user can “try on” tattoos virtually. “Built to help tattoo artists and enthusiasts virtualize exact size and placement of any design anywhere on [their] body.
Tattoodo is a global booking platform for reputable shops. A global community for tattoo enthusiasts, artists, and newbies to tattoos. Follows trends, artists, and tattoo shops. Offers articles, videos, and communication platforms for new clients and artists to interact. Considers itself the premiere destination for tattoo culture and lifestyle”
“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.”
Having Linda here helped in creating a better understanding of who uses this app and why. From this point forward my designs were based on what Linda would want to see and do with a focus on her motivations and frustrations.
For the sake of understanding the app better, I decided to work on more personas for other possible aspects of Tattoo Hack. Feel free to view more user personas.
As my direct responsibility for this app was to work on the "shopper" or "tattoo enthusiast" side of the app, the upcoming Mental Models and Journey Maps will be based off of Linda.
For a more comprehensive look into some of the journey maps please feel free to download the PDF.
Initial Mid Fidelity Wire Frames
As one could guess there were many iterations but the images above show one of the primary iterations I worked on and continued using. As the assignment continued, mid-fidelity wireframes were created which allowed me to start user testing.
As user testing continued, there were more iterations. If interested in viewing the entire wireframing journey, please click below for the wireframe journey.
Low to High Fidelity - Artist Profile / Artist Gallery Page - Initial Iterations
• Keep a clean look and feel to the app
• Give quick view options of designs, reviews, and social media
• Have option to start chat and book chat or tattoo appointment directly from page
Initial change from low fidelity to mid was to add reviews and take away scrolling up and down for galleries. Instead one would click on a gallery type shown within the artist page.
If interested in viewing the entire wire framing journey, please click below.
Initial Low Fidelity Wire Frames
Initial sketches for the landing page and artists page can be viewed above.
For sketching these low fidelity designs I used a mobile-first approach. As one of the key features of this app is a possible AR feature to place a tattoo image anywhere on the body.
Note the initial name of the app was "Ink Tank".
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.
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.
• 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
• 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 having an option
Users were able to go through the app well until we arrived to 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.
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.
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.
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.
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.
As the process moved along, it was indicated that this website was in itself determined to become an app. The users found that the times they would be looking for designs would be more of a down time situation such as sitting on a train, while waiting for food to cook, and on break for lunch. A full website would be a waste of time, money, and resources for the company therefore it is determined that the original project will put its efforts on creating a full functioning app with the same ideas in mind.
Ink Tank then became Tattoo Hack. The name change came from the change from website to the app. It's an idea that a user is using technology to easily find artists, studios, and designs. The user has hacked the system for a smother process.
** Note; for a more detailed look at elements within the app and style guides feel free to download the pdf.
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.