A More Comfortable Approach to Tattooing —

Project

Tatt.ooo: a Quasi-Social Tattoo Platform

Direction

How might we streamline the experience of finding and building a trusting relationship with a tattoo artist?

Info

Mobile App
14 Weeks
Sept - December 2022
Solo Project

Tools

Figma
Adobe Illustrator
Adobe AfterEffects

Concise

To only see the highlights and most important information, keep the toggle ON. If you’d like to read about every step of the process, turn the toggle OFF.

How might we...

...streamline the experience of building a trusting relationship with a tattoo artist?

Centralize Resources into a Social Communication and Connection Platform

Tattoos are (mostly) a lifelong commitment, but Tatt.ooo simplifies the process, making it more accessible and less stressful for both first-timers and experienced enthusiasts. Tatt.ooo is a communication and search platform, with some social aspects, designed to streamline the connection between tattoo artists and their customers. This platform centralizes key resources and tools to facilitate an easier, more transparent interaction—from artist discovery to finished body art. Users can post their ideas, search for artists, explore flash art, and utilize an enhanced messaging system to discuss details and scheduling, ensuring all parties are aligned before the appointment.

A mockup of 2 phones showing 2 different screens from a mobile app; on the left is a home screen of a blue/white/gray app with a banner that says `Have an idea for a tattoo?` next to a button that says `Post it`; on the right is a screen showing a social media-like post with a description of a tattoo, an example image

Highlights

A mobile app home page with a banner that says `Have an idea for a tattoo?` next to a button to `Post it`. There are also buttons for Notifications, FAQs About Tattoos, Messages, and more.

Put everything in one place

So much of the friction from this process comes from the wide variety of touchpoints which are inconsistent between artists and studios. Why can’t we make all of this easier by putting it all in one platform? The artist can maintain a portfolio, post flash artwork, communicate with their customers, connect with potential customers, schedule appointments, and proof artwork using one service.

The Title bar of the app when using the messaging features. There's the name of the person you're messaging, a left-to-right check list with Basics, Design, Schedule, and Complete listed in order, and a button to go to the Project, so that the tattoo project can be tracked responsibly.

The text entry bar used in the messaging feature. Below the text entry box there are also features to add a link to something and start a new tattoo project, as well as disabled options to schedule an appointment, add an image, and more.

The artwork proofing page within the messaging feature, titled `Feedback Request`. The tattoo artwork is featured and there's a text entry tool to add comments and feedback onto the artwork.

Accountability & Additional Messaging Features

When artists and customers communicate, they can start a “New Tattoo” which will require certain information to be passed along, such as the idea, location, budget, style, and would require the art to be approved by the customer before scheduling an appointment. So often, the art isn’t seen until you show up to get the tattoo but, this way, customers get some assurance and can express their needs more reasonably without the same pressure.

A different screen of the app titled `Tattoo Ideas` with a slider to switch to `Flash Artwork` and social media-like posts with descriptions of tattoo ideas

Provide an alternative to the stress of approaching a tattoo artist

Instead of putting all of the responsibility on customers to approach tattoo artists to get the ball rolling, they can publicly post the tattoo that they want, with all of the details. This way, artists can look through the ideas they find interesting and work on the tattoos they’re passionate about.

Research & Prep

After competitive research and a short series of interviews, I mapped the customer journey and ended up with this series of pain points and opportunities. I was able to create a persona and start mapping out the customer experience which, in turn, helped me to figure out tasks and user flows. I spent several weeks working on the branding and logo design, then set about figuring out the visual design attributes.

Safety is something really big — and trust - is something really big for me to look for when it comes to artists.

An instrumental quote from one of my interviews. The participant who said this had several tattoos from multiple artists.

Pain Points

Lack of strong communication

Too much information about tattooing from too many different sources

Not seeing artwork until late in the process, often not until you show up for the tattoo

The artwork isn’t always what was expected

Opportunities

Improve and streamline the communication process

Provide helpful information and resources in a centralized platform

Help customers see the artwork early and the artists to get feedback

Provide helpful information and resources in a centralized platform

Persona

Jenny is the synthesis of all of my foundational research and journey maps. I was able to incorporate all of my insights and condense them down into some core needs:

Safety & security
Comfort & understanding
Good art
Seamless process

A visual called a persona, detailing a fictitious person named Jenny, a 22-year-old interested in getting tattoos. This visual includes a short bio and details her motivations, goals, frustrations, and needs.

Finalized Name & Logo

Simple, to-the-point, easy to remember, and with a tiny bit of design flair from the triple “o” resembling the dots of a tattoo line.

Visual Design Process

3 visual design explorations in a row, each one in the form of an iPhone mockup with several visual design elements, like buttons and text inputs, and typography explorations on the screen. Each phone is next to a color palette.

Style Tiles

I did 3 style explorations to test out different combinations of text, visual language, and color. Each one tries to relate to a different aspect of the platform.

The first exploration, on the left, is a more sterile design language with muted colors where the goal is to let the artists be the centerpiece.
The middle exploration is a calm, community-focused style with more friendly iconography and also using the opportunity to use the device default font, SF Pro, since I’m designing with an iPhone in mind.
The third exploration, on the right, is supposed to create a more accountable feeling with darker backgrounds since, when we talk about art, photos tend to display better on black/dark backgrounds.

Iconography

A few weeks into the project, as I explored the information architecture and user flows, I realized that this was going to be a complex system. As I worked on the visual design, I pretty quickly decided that I would need to find a fitting icon set as there simply wouldn’t be enough time to create all of the icons I would need, since that’s an undertaking of its own. I found Ankush Syal’s Xnix Icon Set on Figma’s Community pages and decided, for my purposes, the rounded shapes and line-based design are fitting and quite readable.

2 Color swatches, a calming blue and a darker blue, along with the cases where each color would be used.

2 Color swatches, pure black and white, along with the cases where each color would be used.

2 Color swatches, light grey and a coral red, along with the cases where each color would be used.

2 Color swatches, a light violet and a darker version, along with the cases where each color would be used.

Color Palette

I tried various combinations of these colors in place as the background, highlight, text, etc. The blue is meant to be a calming brand color, so I initially planned to use it as the primary background. However, it was a little overwhelmingly blue, so I replace it with a light gray and kept the blues as the primary highlight and brand color for calls to action, buttons, titles, etc.

Design System

Since I’d realized fairly early on that this would be a more complex platform than I’d first assumed, I approached the basic construction of Tatt.ooo’s design system from the viewpoint of having reusable components where small changes, like swapping out an icon, could make it easy to reuse or remix the pieces when adding a feature, function, or page.

Interface Elements

A title bar, which would go at the top of the app, containing the logotype on the left and 2 buttons, one to Create a Post and one for Notifications, on the right.

A title bar, which would go at the top of the app, with the same `Back` button but a username instead of page title, and the `Create a Post` and `Notification` buttons are back.

A title bar, which would go at the top of the app, that's similar to the previous, with a username at the top, but the right side now has a button to go to the current Project, and underneath the bar is a small, horizontal checklist with list items for Basics, Design, Schedule, and Complete, to track the current tattoo process.

Title & Tab Bars

Taking cues from Apple’s iOS design guidelines, there is a separate navigation bar at the top of the screen with different states to help users navigate between hierarchical content, while a tab bar persists [most of the time] at the bottom of the screen for primary page navigation.

I opted to lean more into the iOS design system because I wanted, as much as possible, to refrain from folding extra navigation options into a “more” or hamburger-type menu in the navigation.

A Search bar; contained inside, on the left, is a 'magnifying glass' icon and, on the right, is an icon of sliders to signify 'Filters'.

A slider component with 2 options to choose between, Ideas and Available Art, with Ideas being currently selected. To the right of the sliders is a button for 'Filters' and another of a 'Magnifying Glass'.

A Search bar; contained inside, on the left, is a 'magnifying glass' icon and, on the right, is an icon of sliders to signify 'Filters'. To the left of the Search bar is a 'Close' button.

Minor State Changes vs Page Movement

As much as possible, I tried to indicate with the visual design language a difference between elements which would lead to a minor state change (fully rounded elements) versus those which would lead to a separate page (rectangular elements). These search bars, for instance, are contextual and have multiple states. Interacting with these elements will open a keyboard, expand a dropdown, etc.

The only exceptions to these rules are social profile pictures, multi-line text entry fields, and one particular “More” button.

A Messaging Bar, like would be in a texting or messaging app, with a text-entry field sandwiched between a 'Plus' button' and a 'Send' button.

A Messaging Bar, like the previous one, but the 'Plus' button has changed to a 'Close' button and below the bar is a row of additional buttons, such as to add a link, image, etc.

A Messaging Bar, like the previous ones but, above the bar is now an example, additional form labeled 'Budget Request' with 2 entry fields labeled 'Low end' and 'High end'.

Familiar Design

I struggled with the messaging elements for a while. Eventually, I realized that some digital interactions are so engrained that they’re very difficult to change. Tatt.ooo isn’t meant to define a new way of operating digital experiences, so I tried to design these elements to feel familiar and relate to existing task flows.

A pop-up modal with an example of basic buttons. Below the title of the modal are 2 different, simple buttons for 'Cancel' and 'I`m Sure', with one being the primary (filled in with color) and the other being secondary (only outlined).

An expanded style button in the form of a full-width button, label on the left, with an 'arrow' on the right to continue to the labeled page.

An expanded style button in the form of a full-width button, label on the left, with an 'arrow' on the right to continue to the labeled page. This version has additional space to the left of the button for a smaller icon, in this case a 'Notification' icon.

Basic, Expanded, & Complex Buttons

Because there are multiple instances to highlight artists and studios, I wanted to create a kind of button style which can fulfill multiple roles depending on the context. Using the profile pictures as a basis, the complex button style has enough room for multiple text lines and a dedicated space for a contextual button. (This is the instance of a “More” button which doesn’t follow the previously mentioned minor state change logic.)

An example of a hero card style, with an image at the top and two buttons underneath, one primary and one secondary.

An example of a basic card style, with an image at the top and a Title/Label underneath.

An example of a basic card style, with an image at the top and a checkbox and Label underneath.

Card Styles

Because tattoos (as visual art) necessitate imagery, working with cards is also a necessity.

Complex Cards

I was originally trying to carry the small card styles through to the complex card styles, with a hero image at the top of the card. However, I realized that my concept, at its core, would keep open the possibility of having posts without images. Therefore, I wanted the titles, text, and images to have similar levels of visual hierarchy.

Since these two card styles can appear next to each other within the app, I wanted some visual consistency in their design language. This solution not only allows for that visual consistency, it also carries the styling from the previous complex button styles.

A mockup showing the visual design of `complex cards` which include a variety of different elements on them, such as a title, copy text, smaller buttons, images, and more. This complex card is a post style, with a title at the top followed by a description, then thumbnail images, and at the bottom are hashtag-style pills.

Prototyping

Prototyping is really where I started to work out the kinks. Some pages and flows worked out without issue once I figured out the correct starting point. Other issues needed a little more finessing and iteration.

However, one of my beliefs is to test early and test often, so when I had one version ready to go, I tested the working prototype and ran it by some of my associates for their thoughts.

Iteration & High Fidelity

A series of low fidelity wireframes going page by page through a multi-page form. Everything is filler content, with gray rectangles instead of buttons, words in place of icons, and a black 'X' in place of each image.

A series of high fidelity wireframes going page by page through a multi-page form. The grays have all been filled in with the white, blue, and gray color palette, icons have been put in place, and image spaces have been filled in.

Bringing Wireframes into High Fidelity

As mentioned, some of my flows were worked out pretty well by the time I moved to prototyping in high fidelity. This is one of the tasks that moved into high fidelity fairly easily. The initial concept, a one-page form, was way off target. Iterating on that concept from the jump meant a more fleshed out flow and easier time moving into high fidelity.

A page showing the beginning of the 'Artwork Feedback' Request process. In the messaging space, the screen has been grayed out and a pop-up modal is above everything. The title on the pop-up says 'Feedback', an image is below it, and there's a text entry field under that.

Restricted Space

Limited Visibility

Interrupts Workflow

Clunky Interaction

This was the original concept to provide feedback on artwork from a tattoo artist: a modal comes up over the messaging interface.

A page showing the beginning of the 'Artwork Feedback' Request process. Instead of a pop-up modal, the keyboard and messages have disappeared and the title 'Feedback Request' is now at the top of the screen, under the username being messaged, and the image takes up most of the space on the page, with the text entry box below it still.

Enhanced Visibility

Improved Workflow

Streamlined

More User Friendly

The solution is to replace the messaging space by a new feedback space and hide the keyboard away until it’s needed.

In Context

A series of screens showing a user flow starting from a pop-up notification.

Start & End Points

I wouldn’t normally work on a prototype with a pop-up notification as a starting point for a task flow. However, in this case, I think its important for real-world context and processes to show how the app operates within a busy lifestyle and also to highlight how it function from the mobile app perspective.

A series of text boxes running through a text-based scenario depicting several situations of a customer using the app to communicate with a tattoo artist and get a tattoo.

Putting Everything in Context

Taking those task flows, journey maps, and the persona from earlier, I put them into the context of what a real user experience could look like. I broke every step and touchpoint down into steps to get a better picture of how the actual app should operate. Essentially it becomes a story to help understand the value of these tasks and how to accomplish them in Tatt.ooo.

A series of roughly sketched storyboards running through a visual scenario depicting several situations of a customer using the app to communicate with a tattoo artist and get a tattoo.

Visualize

I was working on a video to help explain the value of Tatt.ooo, so I took that story from earlier and turned it into a storyboard.

Adding a Few Things

From that storyboard I made, I realized there were a few things to add. (Actually, from that first story there was a lot to add, like the feedback and review system, but that’s for another time.) I added some screens to animate for use in the video I was working on.

Introducing

Some designs continued to be worked on after this video was rendered so they may not be an exact match for some of the images you see elsewhere on the page.

Final Thoughts & Next Steps

Tatt.ooo wasn’t designed for people who go and get tattoos on a whim. It was designed around tattoo enthusiasts and hopefuls who need some time to think about it beforehand. (That’s not to say there’s anything wrong with people who just want to go to a shop and pick a cute flash tattoo, this app just wasn't designed around those needs.) On the other hand, although I tried to make this a thoughtful experience for customers, there isn’t a truly compelling reason for artists to use this service, as it creates more work for them than simply posting to their existing social media and/or other page(s). The features to help create accountability and improve communication for customers could also prove to be hurdles for artists who don’t want to be constrained in such ways or on stricter schedules.

Although I return to this Figma prototype now and then to make design changes, to truly iterate on this concept I would need to do additional research with tattoo artists. There’s a level of balance and appeal that Tatt.ooo still needs to reach, otherwise its like ordering a pizza from a restaurant that doesn’t exist. It's a good lesson that just solving around one group's need doesn't always mean a service will succeed.

A mockup of 3 different screens in the Messaging process, while proofing artwork from an artist, side by side.

More —

UX Design for the Apple Car