InkTank
I created InkTank as my course project for CareerFoundry’s UX Immersion course. I wanted to create a platform where users can search for tattoo inspiration, connect with artists, and educate themselves on the process of tattooing.
role
UX Researcher
UX Designer
UI Designer
tools
Figma
Miro
Research
Understanding the Problem
Where to start?
Whether it’s your first tattoo, or your tenth, where to begin the process can be extremely overwhelming. You’re tasked with choosing the design, picking the right artist, taking care of your brand new tattoo afterwards. And let’s not forget about the emotional aspects of getting inked, are you ready for this commitment? It’s easy to feel like you don’t know what you don’t know.
What are we missing?
Many of these questions are getting answered as you nervously enter the tattoo shop or as you’re looking at your new tattoo in the mirror for the first time. With a decision as lasting as tattoo, isn’t there a better way? In one study, out of 600 participants, as many as 75% of people regretted at least one of there tattoos. There seemed to be a pretty clear correlation between tattoo regret and a lack of planning, and all that gets thought through in this crucial step.
A solution
Current methods used to find a tattoo seem to neglect the planning and reflection aspect of the process. I wanted to create a central platform where people can store tattoo inspiration, contact artists, and explore the many aspects of tattooing—both emotional and logistical. Before that, I wanted to conduct my own first hand research to understand tattooing.
interviews
Method
Remote video call
20 minutes each
Participants
4 participants
Each had between 4 to 6 tattoos
Research Goals
Learn about their current methods for finding tattoo designs and artists.
Why they get tattoos.
How they decide on a specific design or artist.
Identify frustrations in the process that InkTank can solve.
Notable quotes
Takeaways
logistical Obstacles
Time, money, and compatibility with an artist can all be barriers that stand between a client and their next tattoo. Imagine emailing, DM’ing, or calling numerous tattoo artists only to get a few responses and realize they’re out of your price point, you don’t love their work, or they’re too far to travel to. How can InkTank streamline this process by prioritizing client preferences?
Artist collab.
No amount of previous experience a client has can replace meaningful and effective communication with an artist. With there being so much to ask, sometimes not even knowing what to ask can be an obstacle for first time clients. How can InkTank act as a bridge for artist and client conversation?
idea compilation
Let’s say someone is set on getting a pineapple for their next tattoo. There can be an almost infinite iterations of the same pineapple, not to mention how specific artists may add their own style. How can brainstorming and gathering designs be done in an organized way with InkTank?
user persona
I decided to design with people like Claire in mind. While InkTank is meant to serve everyone whether it is their first tattoo or their fifth, I wanted to make sure that InkTank can be used by first time clients to establish good and sound tattooing habits from the beginning. I figured that by designing for inexperienced clients first, I could also meet the basic needs of experienced clients as well who may already have their preferred tattooing system in place. My goal for InkTank was to guide first time clients while also enriching the tattooing experience of more seasoned clients.
Experience Mapping
Basic considerations when planning for a tattoo are listed at the top. Below is the expected thought process of a first time client as they navigate these important questions. Next is their feelings charted to demonstrate areas that cause excitement, overwhelm, and everything in between. Lastly, a list of potential features and solutions that InkTank can offer to mediate some of these concerns.
Since InkTank is meant to solve logistical challenges of getting a tattoo while also considering the emotional aspect of the process, designing without understanding the step by step thought process of the persona wouldn’t be helpful.
Site Maps
After identifying pain points in the tattooing process through the interviews I conducted and the experience mapping I did, I was able to begin brainstorming InkTank features that could potentially solve some of the frustrations users would be feeling. Below you’ll find the original and revised versions of how I decided to organize InkTank.
Original
Revised
Wireframes & testing
paper wireframes
image feed
artist search
contacting artists
Low Fidelity
I translated my paper sketches to digital wireframes to serve as a foundation for my higher fidelity versions.
mid Fidelity
I polished the designs of some UI elements and also experimented with using colors to help with navigation and other functions. Much of the red seen in this version was eventually changed to black or grey, keeping in mind that red is a particularly strong color capable of stirring up strong subconscious emotions from users. Later in the design process I figured out a way to highlight functions and icons throughout my app without having to rely so heavily on the color red.
high Fidelity
While not always customary, I wanted to include actual tattoo images in my high fidelity wireframes. I did so to ensure that my designs did not take away from the images in any way. This proved to be useful when I saw the accessibility issues caused by some elements in my design for users with vision impairments. Some elements lacked the necessary contrast to be visible to all users. This issue along with others were highlighted during usability testing, and their solutions are detailed in the next section.
Usability Testing
Method
Remote, moderated tests
6 participants
20 minute Zoom call
Screen recorded
Success evaluated through 5 criteria.
Test objectives
Does the onboarding prepare users?
Is it easy for users to filter images?
Is liking and saving images to collections intuitive?
Is it easy for users to filter artists?
Are there any issues when trying to contact an artist?
Take aways
Errors and confusion
Two common frustrations I identified were that the onboarding and navigation bar of the app were confusing to almost everyone. The original onboarding linked here confused people into thinking that they were clicking through the actual app. Some even commented that if they had to provide personal info upfront or swipe through these informational screens they’d probably quit the app altogether. Another common issue had to do with the navigation bar. When I asked users to navigate to the artist search page they would click almost any other icon except for the one I intended for them to click. The solution to this and other issues are outlined in the next section.
Negatives
The onboarding and navigation issues were the most pressing in my original design, but I identified another area where InkTank could improve. One of the characteristics that sets InkTank apart from other sites is its mission to educate users in tattooing so that they can make more informed and lasting tattoo decisions. I realized that InkTank wasn’t doing that in the best way it could be. Even participants who had extensive tattooing experience were asking questions like “What do these tattoo style names mean?“. This demonstrated that InkTank should work to anticipate when users might need certain information as they navigate through the app and provide it to them in real time so that they could answer their questions as they come up.
Positives
Some positive comments from participants include:
“It’s a really unintimidating way to talk to a tattoo artist.“
“Submitting the brief was easier than back and forth emails.“
“This seems much more professional.“
“It’s like online dating for tattoo artists!”
“It’s helpful being able to gauge how an artist is with clients by being able to message them before meeting to determine if they’re a good fit or not.“
iterations & Improvements
onboarding
One of the biggest frustrations revealed during testing was the confusion the original onboarding design caused. There was a sign up/log in screen followed by “swipe through“ informational screens on the apps important features. Many people thought the onboarding was the actual app and really didn’t like that they had to provide their personal information upfront. They normally prefer to see what they can get out of an app before signing up for an account.
I changed the onboarding to this simple pop up that appears when an unregistered user tries to complete a task such as liking an image or contacting an artist. This way they can explore the app then decide if they want to sign up.
I provided some context as to why InkTank was asking for a user’s personal information. By requiring an account to be made to complete tasks on the app, they inherently understand the benefits of signing up and are more likely to do it. I wanted to gain users’ confidence before assuming they’d want to make an account.
I wanted to make it as easy as possible for users to make an account so that they’re more likely to do it, so I provided the option to link external accounts in order to sign up.
Tooltips
By eliminating my original onboarding I was also eliminating the opportunity to educate users on the best features InkTank has to offer. I relied on tooltips explain what certain features were as well as point users in the direction of educational resources.
Using tool tips to explain what features did in real time makes it more likely that a user will remember what it does rather than being given all that information at once in the beginning and risk forgetting it.
True to InkTank’s goal of educating, I wanted to anticipate where questions on tattooing might arise during a user’s experience and provide access to that information.
Navigation
Several changes were made to the navigation of InkTank in order to alleviate the confusion it caused during testing. The changes detailed below make the navigation more universally understood.
This screen is the messaging center of InkTank and a new addition to the navigation bar after testing. Messaging artists is an essential part of the app’s experience so its original placement on the user’s profile page didn’t make sense. I wanted to provide easy access to this page by adding it front and center to the navigation bar so that users never miss when they have a new message.
Some of the original navigational icons were swapped for more universally understood versions. For example, the image feed which serves as the starting point when you first open the app can now be found under the traditional “home“ icon. All the icons are now by default rendered as outlines rather than filled in. When user’s are on a certain page, that icon will become filled in. This indicates where the user is in the app at any given time. This alternative was meant to replace the heavy use of red throughout the app.
To further eliminate navigation confusion, I added labels to each icon so that it was as clear as possible where everything was located.
Redirect dead ends
Some feedback I received was that users wanted the ability to discover similar content to what they were seeing. My original design lacked this aspect so while redesigning I wanted to make sure that users had easy access to relative information so that they could just keep clicking, exploring, and never reach a dead end.
I added a link to the artist who uploaded this photo. That way users can potentially contact this artist directly or simply explore their profile and find additional inspiration that will inform their future tattoo.
One user brought up the possibility of taking a “style finder quiz“. I’m not sure the majority of users would take such a quiz, but I wanted to provide the ability for InkTank to recognize user preferences and suggest similar images based on that information.
Accessibility
As I was finalizing my designs, I noticed there were several accessibility issues throughout InkTank that had relatively easy fixes.
The contrast on the word “search“ in the search bar is not enough for users with visual impairments. I wanted to keep the design on this element minimalistic, but also communicate to this group of users what its function was. I kept the word “search” the same, but made the universally understood magnifying glass black in order to provide the necessary contrast.
The original heart buttons to like images were a thin white outline. I changed that to a version that was filled in and white to provide more contrast against the image. It’s visible against most images, but in the cases where it is not I kept its position on the upper right corner consistent. So for any reason it’s not visible, users can still expect where to find it.
I made sure any auditory content included subtitles for users with hearing impairments.
Learnings
Here are some takeaways I learned after my first comprehensive UX project.
Research. Research. Research.
I realized how tempting it was to conduct all this user research at the beginning of the project and just completely forget about it as your iterating designs. Sometimes when I was stuck on finding a design solution, the answer I was looking for ended up being a quote I gathered at the very beginning of the process. Constantly going back to your research helps make sure you’re keeping user’s needs at the center of everything you do.
Start Small
As a new designer, it’s tempting to dream about all the cool things your product can be and forget about the not so cool things that make it functional and pleasant to use. I learned this early on this process. Make sure your priorities remain clear and add on to those once your foundation for a good design is set.
Done is better than Perfect
Design can easily make you into a perfectionist. I learned the importance of quantity over quality in design. You want to focus on iterating many times in order to eventually get to the quality of work you want. I also learned not to sweat the small details until the end, because as they say the last 10% ends up taking 90% of the time.
Prototype & dem0
Try InkTank
Explore images, contact artists, and learn about tattoos.
Please note that this prototype only represents the core features of InkTank and is not a fully developed product. So when filling out certain fields, predetermined entries will be displayed. If for any reason you get stuck, click anywhere on the prototype and where you’re supposed to click will be highlighted in blue.
