InkTank
Find the right tattoo for you!
Project Overview
This was a course project completed during my CareerFoundry bootcamp.
Problem
How might we address the complexity and emotional element of finding the right tattoo design and artist?
Solution
A mobile app that combines the ability to explore tattoo designs according to preferences such as style, artist, and studios with the use of augmented reality (AR) to view the design on the body.
My Role
• User Interviews
• Information Architecture
• Wireframing
• Prototyping
• User Testing
• UI Design
Duration
• August 2020- January 2021
Tools
• Figma
• Usability Hub
• Balsamiq
• Survey Monkey • Optimal Sort
Project Plan
Inspiration
Competitive Analysis
Two competitors, InkHunter and Tattoodo, were selected to better understand the competition for tattoo apps.
This led to important findings:
Minimal focus on building technology to assist users in their search for the right tattoo. At the time of research, there weren’t many competitors to choose from. InkHunter and Tattoodo were the two highest ranking apps in the the App Store.
Augmented Reality can play a huge role in the success. Reviews of InkHunter revealed that users loved the idea of using augmented reality to visualize the design and make their decision easier.
Simple and easy to use navigation will provide InkTank with an edge over competitors.
Competitors don’t directly connect the artist with the user.
User Interviews
I conducted remote moderated interviews with 3 participants from the target audience over zoom to better understand the process of getting a tattoo.
These are the findings:
Pinterest and Instagram are used for browsing tattoo designs and not a tattoo specific app.
Working alongside the artist to develop the design was important for participants to feel comfortable with the design and confident that both are on the same page.
There is a need for a “one-stop-shop” app where a user can find the design and locate an artist or a studio in one place to make the experience less stressful.
Safety and hygiene of the studio is important to the participants when they select a location. Even before the COVID pandemic.
Participants spent months just trying to find designs and even more time convincing themselves that the design they chose is the right one. This is especially true when they are looking to get a design that represents an important person or event.
Poor organization when saving designs was a frustration mentioned by all participants regarding the use of their current apps. Making it more difficult for them to feel confident.
InkTank users need a way to be inspired by designs, feel confident in their design choice, easily locate artists and studios, and know that the artist or studio will provide great work.
“My least favorite part about choosing an artist is being constrained to local studios because of the fear of committing to traveling to a shop and not liking the design or finding out its not sanitary.”
-Kendall
“Communication with the artist is imperative to ensure that you know exactly what you’re getting when you walk in the door.”
-Sandy
“The lack of available information and organization within the apps I currently use, makes it difficult to compare designs and refer back to a one that I liked.”
-Denali
Conceptualization
User Personas
To stay focused on solving this problem, two porto-personas were created to represent the needs, goals, behaviors, fears, and emotions of the potential InkTank users.
Becky represents users looking to add to their existing tattoo collection. She has recently moved and is wanting to get a tattoo that represents her 3 children. Becky is searching for a new artist she can trust and needs to ensure this design will look great around her other tattoos.
Sara represents users who are looking to get their first tattoo. Her grandparents have recently died and she is wanting to get a tattoo to honor their memory. Sara wants to feel confident in her design selection and work with the artist of her choice to make it the exact design she wants.
Journey Maps
To better represent the emotional experience a person goes through when finding a design and artist, journey maps were created. Using the Proto-Persona Becky as an example, we can learn from her emotional experience.
Becky is HAPPY to be using an app that places all of her needs for finding a tattoo in one place. InkTank can build upon this by customizing a personalized experience for each user.
Becky gets OVERWHELMED when she tries to locate an artist or studio because she recently moved to a new city and doesn’t have a location she can trust. InkTank will improve upon this by providing her with reviews on each artist and studio, ability to view previous work of the artist, and a list of artists who work at each studio.
Becky is ANXIOUS that she will not be able to get in touch with a new artist. InkTank will address this by providing a way for the user to chat with artists to check availability and work out payment for consultation services.
Becky is EXCITED to be able to visualize the design on her body with her other tattoos. InkTank will build upon this by making the use of the augmented reality feature simple, easy to learn, and accurate.
User Flows
Using what I learned from the Journey Maps, I began building User Flows to show how users will navigate through the core functions of the app.
The following flow represents the path a user would take to search for either a design, artist, or studio.
The challenge I faced with this user flow was combining the search feature with the ability of the user to browse on their own to each screen for tattoos, artists, and studios while keeping the overall navigation simple.
I solved this by making the home screen a browsing area for tattoos and created a segmented navigation to include the artists and studios with each page including a search icon so the user can browse or search based on tattoos, artists, or studios.
This next flow demonstrates navigating to the augmented reality feature from the home page.
The challenge I faced with this user flow was taking a relatively complex task in augmented reality and turning it into a simple and accessible process for the user to understand.
I solved this by using marker based augmented reality where the camera detects an object (in this case a triangle) and overlays the design. To make it accessible for all I included a toggle switch to turn off the marker based AR which overlays the design automatically on the camera to appear in the middle of the screen.
Card Sorting
In order to generate more ideas on the information architecture, I conducted an open digital card sort via Optimal Sort to see how users would organize content topics into categories.
The following image is a similarity matrix that identifies strong card pairings and potential groupings based on the results of the sort.
I learned that participants want to view their followed artists and studios under their respective “artists” and “studios” tabs. (I had originally planned to locate the following lists within the profile.)
Grouped the Augmented Reality topics into a category named “Visualize.”
Sitemap
Using the results from the card sort, I created a sitemap for InkTank to show the information architecture of how pages are laid out and connected.
Iteration
Wireframes
With the information architecture and navigation of the app complete, it was time to begin drawing out the first wireframes. I began sketching low fidelity wireframes by hand and when I felt confident in a basic functionality I used Balsamiq to produce mid fidelity wireframes and then Figma to produce a high fidelity prototype.
Usability Testing
To ensure that I had the proper design and functionality, I conducted a Moderated Remote Usability Test of the prototype with 6 participants via Zoom & Skype.
Test Objectives:
Observe if the participants are able to locate and use certain features of the app such as Augmented Reality
Measure the ease at which a participant can browse a tattoo design, save it, and then locate that saved design in the future.
Evaluate if the participant can search for a studio into their area and understand how to filter the results.
Results
I created a rainbow spreadsheet and an affinity map using the results of the tests to isolate information and organize it into visual patterns across multiple participants.
The Affinity Map and Rainbow Spreadsheet brought to my attention the following issues:
PROBLEM: Participants were skipping coach marks when using the Augmented Reality feature for the first time.
SOLUTION: I added a help button so users always had a way to view the coach marks if they needed to access them.
Before
After
PROBLEM: Participants had a hard time identifying the AR icon.
SOLUTION: Added the AR icon to the “Visualize” onboarding screen so users could begin to recognize the icon
Before
After
PROBLEM: They were unsure if the heart icon represented the action of saving to a board or liking an image.
SOLUTION: Added text with icons to make the design more accessible and recognizable for everyone
Before
After
“I wish this was an app I could download and use today!”
“I could open this up for the first time and know how to use it.”
“I like this a lot, the augmented reality feature is really cool!”
Final Prototype
Reflection
Learnings
Test the product with users as early and as often as possible. In this case, I only tested with a high fidelity prototype and found myself spending a lot of my time refining and making changes in high fidelity after the user testing. I believe if I spent time testing with mid fidelity wireframes then I would have been able to work out the issues in a timely manner.
Marker-based Augmented Reality will provide the best experience for the InkTank user. By having the user draw a “marker” on their skin that the camera can recognize, InkTank can accurately place the design in the location the user wants it.
So much communication can take place between an artist and customer to find the right design. As someone who doesn’t have a tattoo, I had to learn about the experience of getting a tattoo from start to finish.
Future Iterations
Refine the “creator” section of the app to make it intuitive and as easy to use as possible by conducting moderated tests with artists and studios to improve design. I would also work with the marketing team to increase the interest in InkTank with artists and studios in hopes of growing popularity.
Conduct ethnographic research with the artists and studios while they are conducting their day-to-day business operations to improve the overall design.
Implement a booking feature through the app so the users can book appointments with artists and studios.