ink Tank: An App that Links Tattoo Artists and Clients

Building an App: From Business Goals to Prototype

Posted on August 28th, 2018

Where is the best place to begin the process of building a digital product? Easy, let's start with the problem you need to solve and create a hypothesis. For ink Tank, our problem is as follows:

"A person wanting a tattoo needs to easily find an artist that practices a style they want for a fair price. Because, if they do not find those qualities they may regret the experience. They may feel ripped off, or remorseful of a permanent decision regarding their body and appearance. We will know this to be true when we see people wanting a tattoo and tattoo artists connect through the app and are satisfied with their appointments/tattoos."

This hypothesis is rather broad but it does help us highlight a few issues:

Finding a style: Many times users who want a tattoo have trouble ideating their tattoos and finding exactly what they want. This can lead to regret and the time-consuming process of looking through flash at the tattoo parlor.

Finding a (local) artist: Finding an artist correlates with finding a style, many times a person wanting a tattoo may find a great style but certain artists do not exactly do tattoos in that manner. It is also imperative to allow consumers to find artists in their area that have a style/design they want; if not, the costs of getting a tattoo increase as well as the overall price for travel. Also, some users enjoy traveling to find the perfect artist and design, so it is imperative that the product is not limited to local only.

Finding the right price: This issue is problematic for the artist and customer, if an artist is not transparent with their price a customer can become upset and disgruntled. Also, the artist may have to negotiate and lower their base price based on the customer’s budget, leading to both an upset customer and artist.

Finding an ideal time to receive a tattoo: It is always difficult for a customer to find a perfect time for a tattoo; it is even more difficult to schedule an immediate appointment if the customer has an impromptu idea they want done as soon as possible. Tattoo artists also have trouble balancing their schedules; potential customers can cancel appointments or the artist can be accidentally overbooked.

Although these are quite a few problems, a possible solutions is creating a social media app that outlines the preliminary process of getting a tattoo. That includes the process for both the tattoo artist and the “tattooee.” For the tattooee, they flow through tattoo-style options in their area that are correlated to the tattoo artists in the app. The tattoo designs would have a price correlated with them as well. For the tattoo artists, they could set up a profile with their various styles and prices. They would also be able to set their available schedules within the app or integrate with another schedule app via API.


User Personas, Journey Maps, and Flows

Now that the problems and solution are evident it is time to start formulating what type of users would be attracted to the app. I conducted multiple rounds of interviews with my ideal demographic to begin the development of user personas.

Let's take a look at a couple user personas below:

Markus_UserPersona Markus_UserPersona Markus_UserPersona

Now that we have a better idea of our audience, let's take a look at a few of the ideal user journeys that our users could follow.

Markus_Journey Markus_Journey Markus_Journey

These journey maps can help us formulate real user flows that will eventually lead to our preliminary wireframes. These flows will be the basis of the entire app.

Markus_UserFlow Jimmy_UserFlow Zeb_UserFlow Markus_UserFlow2

Low Fidelity Wireframes

If the user flows give us the basis of our app, the wireframes build out the main functionality. These wireframes are meant to show us how users will navigate through each feature of the app.

LF_Onboarding LF_ReqAppt LF Search LF_Messages

User Testing Process and Results

Wouldn't it be nice if we could just call it a day and start building out each screen from here? Sadly, we can't! It's time to make sure what we are building actually works for our users. I started by building ink Tank's usability plan and usability script. Adhering to a plan and script will help you get the most out of your usability tests.

I found the following results from my usability test:

Profile Before and After The original profile screen (left) and the revised profile screen (right).

Issue 1
Users can’t distinguish between “My Profile” and “Artist’s Profile”

Some users are having trouble getting in contact with an artist because they believe that the “My Profile” tab is actually another artist. The best fix for this is rebuilding the “My Profile” tab without sotkc/default photos. This should immediately notify the user that this tab is indeed their profile and not someone else’s.

Search Before and After The original search screen (left) and the revised search screen (right).

Issue 2
Users have trouble understanding and entering text in search

Some users feel limited by search and become frustrated by not being able to enter a search string. Fixing the language on the search bar and realigning the hotspots should better alleviate this problem. This is the best solution since the prototype is currently static.

Notification Before and After The original notification screen (left) and the revised notification screen (right).

Issue 3
A user bypassed the initial screens in the “Schedule Appointment” flow

A user skipped the “Request Appointment” button and stumbled into notifications, which allowed them to successfully schedule an appointment. I need to create another notifications screen, so the user can ONLY access the “Schedule Now” screen after they have “Requested Appointment.”

Calendar Before and After The original calendar screen (left), the revised search screen (middle), and an additional calendar option (right).

Issue 4
Users struggle with limited calendar functionality

Users had accidentally skipped choosing a time by swiping right to try and see more dates. I will add a screen with more dates when a user scrolls right, this will allow them to see more options and not break the “schedule appointment” flow.

Onboarding Before and After The original "Find Inspiration" onboarding screen (left) and the revised version (right).

Issue 5
Users complain of vague and misleading onboarding screens

Users complained of the “Make Friends” and “Find Inspiration” onboarding screens. “Make Friends” did not offer the user any information, this could be replaced with an onboarding screen discussing the “My Profile” tab to help alleviate issue 1. The “Find Inspiration” confused one user because he thought the app was focused around exercise, not tattoos, due to the image. This image can confuse first time users. The image will be replaced with an artist tattooing to make sure first time users understand what the app is focused on. This image has been lightened to make sure the contrast is not overwhelming and all additional elements are visible.


Refining the Design

Now that data has been collected on what was wrong with the app. It's time to refine the design. I implemented a small style guide and readjusted each screen to adhere to an 8-column grid. These implementations bring about a more structured design.

Style Guide - Color and UI Elements Style Guide - Type and Icon Elements Style Guide - Type and Icon Elements Notice the explicit margins on the revised image (right).

High Fidelity Mockups

Now that ink Tank has the structure in place to design future aspects of the product. I can create the most in-depth designs for the product. Take a look at some of the final screens below.

High Fidelity UI

For a final look at the app mock up. Take a look at the ink Tank Prototype


Conclusion

In conclusion, my overall takeaways from this project were:

  • Defining a real-world problem. Without a problem. there is no need for a solution, and if there is no solution, there is no need for a product.
  • The importance of good research. The user interviews and user personas' brought out the real problems facing the tattoo community today. Without those interviews, ink Tank would have no basis to actually exist in the marketplace.
  • Constant testing is imperative to a product's growth and success. Testing should be repeated throughout the product's life cycle, even as it matures.

This project really showed me the entire process of UX and for that I am extremely grateful.

TL;DR Here is a demo of the ink Tank app