InkTank | A UX Design Project

Tattoo Inspiration Application

InkTank application would help its users to find the tattoo artists/studios near by through its enhanced search feature. This app would allow users to browse through number of tattoo designs and would allow user to experience the AR (Augmented Reality) by checking how the design would look on their skin virtually. This app would provide users a platform to chat with artists before scheduling online appointments based on artist’s availability.

UX Design Process

How I altered the process for my case study:

Understanding the problem existence.
Research Phase
Analyzing the phase
Wireframes & Design
Visual Design & testing

The Process I have aligned can be put into many projects. Less see how I did it.

1. Understand the problem existence

Understanding the problem is the most important factor when coming to a meaningful, usable, understandable and discoverable product.As a UX person, you should be able to communicate back and forth with the client so you get an idea of what they are telling. You will be able to understand not only their main issue but the other issues which are related to the main issue.

So I did some research with already existing apps about tattoos and came up with list of possible problems and potential solutions that InkTank Application could solve.

List of possible problems

Insufficient information about the artist’s work, experience and their contact information.
Unable to know Artist’s availability and discuss with him about the designs, the duration and cost of getting it done.
Unable to share his/her own tattoo designs while discussing with artists and get suggestions from the artist whether it can be done or not.
Insufficient information about the tattoo studio.

The Problem Statement

A person who is getting tattooed for the first time or a person who is concerned about his tattoo size/location on him needs a way to find out how the tattoo design actually looks on his/her body because getting inked is permanent.

We will know this to be true when we observe users are using this app to try out the tattoo designs virtually to get insights of how the design looks on his/her body.

Potential Solutions

A way to find out how the design actually looks on the skin because getting inked is permanent.
A way to find out the availability and schedule appointments with artists online.
A way to search artists/studios near by and contact them.

2. Research Phase

Its important to look into other players in the market and understand products we are about to compete with. We have looked into two main competitors. Tattoodo (https://www.tattoodo.com/) and InkHunter (http://inkhunter.tattoo/).

UX Competitive Analysis - Ink Hunter

SWOT Profile – Both competitors still leave market opportunities for connecting local tattoo artists through messaging and images of their work on a more personal level, allowing users build a sense of trust with their potential tattoo artist.

InkTank SWOT Profile

User interviews were conducted to find out user’s habits, needs, and pain points. The insights gathered were arranged in an affinity map before consolidating it into two user personas.

User Interview Questions

Inspirations for getting tattooed

– As a person who has interest in tattoos, tell me about yourself.

– Have you ever been inked? If yes how may? If No, do you have intention of getting inked?

– What was your inspiration to get tattooed?

Online Apps

– Did you ever use a tattoo app for designs or artists. How was your experience?

Communication with the Tattoo Artists

– How did you find the artist / how far did you have to travel to get the particular art?

– Were you able to communicate with the artist ahead before getting inked?

– How did you communicate with your artist?

– How did you schedule an appointment with the artist? Was it difficult for you?

Search for Artists

– How long did it take to search for the designs you want to get tattooed?

– Were there any situations where you were confused about what to get tattooed?

– Was it easy to find an artist near by?

– What are your concerns when searching for designs or artists?

Confusions

– Did you ever regret getting a particular design inked ?

– Did you face any difficulties in selecting the tattoo artist?

3. Analyzing the Phase

Personas – To develop reliable and realistic reference representations of essential user groups, data was used from in-person interviews, remote interviews, and online surveys of six people between the ages of 20 and 50 who are either looking to get a tattoo or are interested in tattooing.

User Flow – User flows were designed to visualize the processes a user goes through to accomplish their goal.

4. Wireframes & Design

Refining the Sitemap with Card Sorting – I used Optimal Workshop to do online card sorting tests. Most of the participants grouped according to sitemap. According to the card sorting conducted, most of the content in the previous sitemap remains same and more content is added to the Settings and Contact & Help Tab.

The next challenge was to convert the complex workflow into functional wireframes. So At first, I created sketches that include app’s three core features, experience that tattoo design virtually on the skin using Augmented Reality, Contact artists through messages and scheduling an appointment with artists.

Then I took my low-fidelity sketches and moved over to the rapid wireframing tool Balsamiq to generate a mid-fi wireframe mockup.

High-Fidelity Mockups

With my wireframe in place, I took to giving the pages color, style, and grid. I implemented the newly Augmented feature to experience the designs on the skin more clearly.

Visual Design

Design Language Systems – The Ink Tank responsive web page is the place for people who are looking for inspiration for their first, or next tattoo. Users could experience the new feature ‘AR’ (Augmented Reality) that would allow user to know how the design would look on their skin virtually. Users would be able to find inspirational tattoo imagery and talented local tattoo artists and studios. Users can contact local artists and studios through chat and schedule in-person appointments through the app. All of the elements listed in the Design Language System are designed to support the modern, fresh, and vibrant look of this product. They are also intended to ease any pain points users may have in the navigation of this product and to enhance their experience.

5. Usability testing

The initial hypothesis was tested on the most critical features and functionality for the following Objectives.

Observe the physical expressions of the users while going through the app to watch out for any pain points or frustrations.
Check if the user can easily navigate through the app.
Check if the user could understand about different features and its uses.

Tests were moderated by remote user testing was conducted Aug 17 to Aug 20, 2018. The six participants’ tasks on the InVision prototype were recorded by computer using Skype and iPhone recording app. The participants consisted of men and women ranging in age from 25-35. Five out of the six have one or more tattoos. All of them are looking to get more soon.

Tasks assigned for Usability Tests

You are planning to get tattooed soon. But you would want to how the design looks on your skin. Using InkTank app, select a tattoo design and try out the tattoo design using the new Augmented Reality (AR) feature.
You have already selected the designs you would like to get tattooed. You would like to search for artists near by and chat with them regarding your designs, their experience and price ranges. Using InkTank app, search for an artist near by and chat with the artist.
Imagine that you have chatted with the selected artist and would like to move forward by scheduling an appointment with the artist. Using InkTank app, Schedule an appointment with the selected artist.
You would want to search tattoo studios near by to check upon the artists and other information. Using InkTank app, search for the tattoo studios near by and contact them.

InkTank Usability Test

Top 3 issues in levels of severity and proposed solutions.

EDIT PAGE

Issue – Two out of six participants felt that a standard front camera icon should be used.

Solution – After usability testing, we discovered that users got confused with the camera icon. They thought they would be able to take a photo of the design on their skin. But they got confused when they asked for the access to the camera after taking a picture. So I re-arranged the screens such that the app would ask for camera access when the user clicks on the AR button. And the coach mark is added for the camera icon so that it would be helpful for the user to understand.

Augmented Reality (AR) Page

Issue – Three out of six participants got confused with the order of the screens.

Solution – After usability testing, we discovered that users got confused with the camera icon. They thought they would be able to take a photo of the design on their skin. But they got confused when they asked for the access to the camera after taking a picture. So I re-arranged the screens such that the app would ask for camera access when the user clicks on the AR button. And the coach mark is added for the camera icon so that it would be helpful for the user to understand.

On-boarding Pages

Issue – Two out of six participants felt that information about the Augmented reality should be first as its the new feature.

Solution – From the usability testing, we came to know that the participants were not that pleased with the on-boarding screens and the sign up process. They wanted the Augmented Reality information to be the first screen as it is completely new and would attract user’s attention. More over, they were searching for the sign in/sign up options right on the on-boarding screens itself.

Polishing the Design

I got help from three fellow students and participants. Most of the changes are found in the labeling, with minor adjustments to the menu, homepage, and the artists and studios listing page. This was especially valuable to see how other individuals working on the same type of application would approach and solve the design challenges.
From concept to developer ready files, the UX/UI designs are continuously being improved. The following shows the process so far.

FINAL DESIGN

Integrating iOS Human Interface Guidelines, accessibility and feedback from fellow designers, I have created the final design for the InkTank Tattoo inspiration application.