ios | Case Study

Ink Tank App

Your new way to find tattoo and connect with a artist in your area.

Project type

Solo project - Concept

Duration/time

Six month - Sumer / Fall 2018

Role

It's a solo project that I researched, ideated and prototyped the entire user flow and interface

THE CHALLENGE

Find a Perfect Tattoo

Create a user-friendly web app to help tattoo hunters find a perfect tattoo while comfortable exploring different possibilities with the guidance from professionals.

POTENTIAL SOLUTION

Connect with the Community

The app should provide the complete experience for every tattoo hunter in their search for a new tattoo. The flexibility of connecting and communicating with the right tattoo artist needs to ensure user's decision for getting the right tattoo.

DESIGN PROCESS

UCD for a Better Product

Ink tank app is a solo project that I worked on during my Carrerfoundry UX Designer course. Implementing the user-centered design framework to my creative process, I was actively participating from research to the last iteration.

Research

Identifying Potential 26M Users

To better understand the user and make a product that will suit the user needs I started my journey with good-old research and competitive analysis to learn more about the tattoo community and to understand the current market. Highlighting the following data, we can get the scope of the market.

38%
18-25-year-old have at least one tattoo in the US
40%
26-40-year-old have at least one tattoo in the US
32%
of tattooed people thinks that they are addicited
17%
partially regrets getting a tattoo
$ 1.65 billion
annually on tattoos in the United States alone
18-40
year old is our target audience
26M
potentional users just in the US

Competitive analysis

I would like to talk?

In my competitive studies, I focused on two companies that are currently on the market: Tattoodo and Ink Hunter.  While Tattoodo is a well-oiled business that is rapidly expanding, Ink Hunter is a startup company with big ambition and unclear business plan. They bought have one big gap in common that can lead to user frustration: an easy way to communicate with tattoo artists.

Tattoodo
S.W.A.T Profile
Ink Hunter UI
Ink Hunter
UX Analysis
Click to see more:

Next step was to conduct the in-person user interviews to gain a better understanding of their behavior and needs with a focus on:

  • • Discovering why users want to have tattoos and how they came to realize it.
  • • Understanding users fears and doubts when it comes to using online services
  • • Finding the user habits in search for inspiration in general and specifically looking for a tattoo.
  • • Discovering users communication habits, what is the most useful way of communicating with strangers and business.

Users Interviews + Affinity mapping

Fears, inspirations and trusting

Using an affinity mapping process, I analyzed the data and identified findings and dived into a user inside:

  • • Users need to have a straightforward step by step process of tattooing where they will get all the necessary information to avoid possible fears and misunderstandings.
  • • Artist portfolio and presents on the internet in forms of blog posts, videos, and multiple communication channels on how to reach him/here can create trust with users.
  • • Setting a health standard in an understandable form can help them overcome the fear of disease and infections.
  • • Users need to have at least 2-3 type of communication channels to reach tattoo shops.
  • • Users need to be able to find the app and all the blog posts searching on Google.

User Personas

Meet Alex and Ashley

The challenge was to identify the user needs and to shape up my personas due to my lack of experience. The tattoo hunter was missing a focus on how he is getting inspiration and how the app can fit his life.
After consulting with my tutor and mentor, I reviewed interview notes and found a missing link: collect and showcase tattoo images,  share the photos with a tattoo artist while communicating. Later, those findings help me craft the main features of the app.

Click on images to see more.

User Journey Map

Starting a conversation

Having a reviling understanding of users needs and goals I wanted to create a more substantial narrative.  
Whit Alex, I tried to lay down the most critical scenario for Alex: make his online communication with the artists flexible and what actions he needs to take to get to the right artist.
For Alex to start chatting with Ashley, we need to step back and allow Ashley to create an account and showcase here works within the app. As a content provider, Ashley's role is essential for the sustainability of the project. The most significant friction I saw is at the first step, creating and presenting her work.

Click on images to see more.

User Flow

Creating an inviting environment

The problem I wanted to tackle within Alex's first flow was to create an inviting environment allowing him to explore the app without signing in. By crafting his collection of images, Alex will form a starting point for communication with the artist that can help moving forward with booking the appointment.

Using AR technology as an assistant, we can give users the option to visualize the end product and feel its impact. With second flow I wanted to eliminate the potential fears and regrets that we saw in user research.

User Flow 3 - Tattoo Artist

Last user flow is reserved for Ashley to create an account and showcase here work. Knowing the pain points of a sign-in process I wanted to create easy to follow step by step experience to fit artists of all digital literacy. Sharing the profile on social media, I intended to create an emotional stage of gratification by bringing the process to completion.

User Flow 1 - Tattoo Hunter
User Flow 2 - Tattoo Hunter

Sitemap

Structuring the environment

The initial idea for constructing the app's IA I found in Alex's flow to reach the tattoo artist and schedule the appointment. To do this, he needs to go over following steps:  look for, search, connect and confirm. Those four steps that can be interlaces in action or independent.  Keeping last thoughts in mind, I realized that the first three steps need to represent the app's first tier as they will be functions that Alex will use the most.

Card sorting method helped me refine my initial version of the sitemap. Using the merge method, I analyzed first and second tears of the sitemap using clusters with more than 60 %. Tattoo category becomes Search and Connect got a more coherent name- Messages.

Low-Fidelity Prototyping

Shaping up the Structure

Even though I was focusing on structuring app's navigation system, I lay down four feature: checking daily feed and saving images to My Boards; searching for an artist; connecting with the artist; scheduling the appointment + onboard and sign in as app's starting point.

App's navigation structure ended up to follow easy to use nav bar on a bottom with four main categories for the first tier and top navigation for navigating inside the group.

Mid-Fidelity Prototyping

Optimizing Performances

Having a conceptual framework, I was time to switch pen and pencils with mouse and trackpad and start to shape screen by the screen into a functional action chain, keeping in mind my four main features. This iteration brought screen number reduction by optimizing the performances. I try to use three click rules when refining each function in this iteration.

Usability Tests

Finding Frictions

After updating the mid-fidelity prototype with images and creating a usability plan and a script it was a time to face the truth! 
I tested the mobile version of the app with 6 participants in person. I was having a problem with the scheduling and short time frame, to solved that problem I set up a mobile testing lab and conducted tests in participants homes and offices. With this decision, I was able to set up the mood that helped participants relax and engage in the study
The goal was to evaluate app’s main functions by the app’s first-time users and to determine frictions that can affect the app’s usability. I was using the Jakob Nielsen scale to determine the flaws within the experience and product.

Refining the design

App’s UI

With knowledge of usability testing and collected feedback from my fellow designer, I stepped into the last phase of creating the design language system to be in-line with the iOS Human Interface Design and iterate app's UI.

You can find the app’s complete Design language document on the link below.

Final Iteration

Interactive Prototype

On the final prototype you can test 4 main app feature:
Login
• Save a image to a new board
• Find the artist near you and send him/her a message
• Schedule the appointment from them message

© 2019 Davor Anic All rights reserved