ios | Case Study

Ink Tank App

Your new way to find tattoo and connect with an 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 the Perfect Tattoo

Create a user-friendly web app that offers professional guidance to help tattoo hunters find the perfect tattoo while comfortably exploring a range of possibilities.

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 directly with the right tattoo artist helps ensure that the user chooses a tattoo that suits their personality and needs.

DESIGN PROCESS

UCD for a Better Product

Ink tank app is a solo project from my Carrerfoundry UX Designer course. By infusing a user-centered design framework into my creative process, I was active at every level of creation, from research to the last iteration.

Research

Identifying Potential 26M Users

To better understand the user and create a product that suits user needs, I began my journey with solid research and a competitive analysis to learn more about the tattoo community and to understand the current market. Highlighting the following data, we get the scope of the market.

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

Competitive analysis

Can We 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 ambitions and an unclear business plan. They both share a common deficit that can lead to user frustration: They both lack 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:

The 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 desire tattoos.
  • • Understanding users fears and doubts when it comes to using online services
  • Uncovering user search habits when seeking general inspiration and when looking for a specific tattoo design
  • • 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 want to see a straightforward, step-by-step process of tattooing detailing all necessary information to help manage possible fears and misunderstandings.
  • Artist portfolio and presence on the Internet in forms of blog posts, videos, and multiple communication channels to artists so that they can build trust with users.
  • • Setting a health standard in an understandable format can help users overcome the fear of disease and infections.
  • • Users requer at least 2-3 type of communication channels to reach tattoo shops.
  • Users need to be able to locate the app and all related blog posts via a Google search.

User Personas

Meet Alex and Ashley

The challenge was to identify the user needs and to build my personas. The tattoo hunter was missing focus for inspiration,
and an app accommodates his lifestyle.
After consulting with my tutor and mentor, I reviewed interview notes and found the missing links to a successful tattoo search: collecting and showcasing tattoo images and sharing photos with a tattoo artist during communication. Later, those findings helped me craft the main features of the app.

Click on images to see more.

User Journey Map

Starting a Conversation

After revealing 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, I laid down the most critical scenario: Make his online communication with artists flexible and tell him what actions he needs to take in order to reach the right artist.

For Alex to start chatting with Ashley, we had to step back and allow Ashley to create an account and showcase her works within the app. As a content provider, Ashley's role is essential for the sustainability of the project. The most significant friction I noted in this first step was creating and presenting her work.

Click on images to see more.

User Flow

Creating an Inviting Environment

The fundamental issues I wanted to tackle within Alex's first flow was to create an inviting environment that allowed him to explore the app without signing in. By crafting his collection of images, Alex was able to form a starting point for communication with the artist that may help them mover forward to booking an appointment.

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

User Flow 3 - Tattoo Artist

The last user flow was reserved for Ashley to create an account and showcase her work. Acknowledging the pain points of a sign-in process, I wanted to create an easy-to-follow, step-by-step experience that accommodates­­­­­­­­­­­­­­ 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 derived from Alex's flow to reach the tattoo artist and schedule the appointment. To do this, he needed to go through the following steps: look for, search, connect and confirm. Those four steps that can intersect in action or can work independently. Keeping these thoughts in mind, I realized that the first three steps needed to represent the app's first tier as they will be functions that Alex will use the most.

Card sorting method helped me refine the initial version of the sitemap. Using the merge method, I analyzed the first and second tiers of the sitemap using clusters with more than 60 %. The title of the “Tattoo” category changed to “Search;” and “Connect” became a more-coherent “Messages.”

Low-Fidelity Prototyping

Shaping up Structure

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

The app's navigation structure ended up becoming an easy-to-use nav bar at the bottom of the screen with four main categories for the first tier.

Mid-Fidelity Prototyping

Optimizing Performances

Optimizing performances Having a conceptual framework, I switched from pen and pencil to mouse and trackpad to start to shaping each screen into a functional action chain, keeping in mind my four main features. This iteration brought screen number reduction by optimizing performance.  As always, I try to use a three-click rule 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 time for the moment of truth! I tested the mobile version of the app with 6 participants in person. I had a problem with scheduling the appoitments in the short timeframe. To solve the problem I set up a mobile testing lab and conducted tests in participants’ homes and offices. With this action, I created a comfortable environment allowing participants to relax and engage in the study.

The goal was for first-time users to evaluate the app’s main functions and to determine frictions that can affect the app’s usability.  

I used the Jakob Nielsen scale to determine 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 the app's UI.

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

Final Iteration

Interactive Prototype

By cliking on the screen and following the blue fields 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