Project Overview

InkTank is a mobile application designed to help people get inspired, find talented tattoo artists that match their style, and review nearby tattoo studios. It is a unique application for tattoo enthusiasts to easily search for tattoo inspiration, quality artists, and learn about the tattoo process all in one place.

The Process

The process started by understanding business needs and user goals, developing the content, and building an information architecture. I used wireframes and low-fidelity prototypes to test ideas and support quick iterations, then I created the mid/high fidelity prototypes to add more details. I tested my design decisions and created the final product. 

Goal

The initial goal was to produce a ready to publish MVP application solving the problems associated with getting a tattoo.

The Problem Statement: 

14% of the US population (around 45 million people) have at least one tattoo. 49% of people with tattoos require trusting their tattoo parlor/artist as the most important factor of deciding whether they will or will not get a tattoo, and they are having difficulty finding places they trust. There are only a few applications that provide features to build that trust.

Research Plan

With the hypothesis in mind, the competitive research was conducted to determine what other applications do and why they don't solve this problem today. The focus was to figure out what their strengths and weaknesses were to determine the opportunities for developing this product.

InkTank's BRD (business requirements document):

• Target Audience: Anyone who likes to get a new tattoo and wants to find a tattoo artist who matches their style and lives nearby can simply use this application. 
• Competitors: There are most likely more than a dozen tattoo magazine while there are not many well designed free and available mobile apps for tattoo lovers who need a way to find their favorite tattoo artists that fit their style. Among all of the existing apps, Tattoo Life Map and Tattoo Now could be the most obvious competitors since they provide more detail such as artist’s name and location. Click here to view competitive analysis' details.
• Risk/Opportunity: The main risk is that my app will remain anonymous and get lost in the sea of competition; however, there are still high chances for our app to be the best available in the market.
• Functional Requirements: Here are the main requirements of the app.
  • A way to sign up and log in
  • Systems for submitting user’s personal information and location
  • Browsing guide by location that includes filters for nearby tattoo shops
  • Marking favorite options for offline view
  • A menu that allows user to navigate the application
  • An admin area where users can access or edit their information
  • A feature that allows user to make appointments, or contact the artists/studios within the app
  • A way to send a message/chat with tattoo artists and other users
• Conclusions: We have a good consensus that building this product is worthwhile business sense.  

 Design

• must be found on the internet 
• must be meaningful and pretty
• must be done by a registered artist
• can be changed or modified by the artist
• must be done in short sessions

Artist

• must be professional
• must have good* online reviews
• should be open to ideas
• should be affordable
• must be knowledgeable
• must be friendly and caring

Studio

• staff must be friendly
• should offer artists' portfolios
• should offer weekly deals 
• must give aftercare instruction
• must be very clean
• must have a cool vibe

Users' Insights Review

There were a lot of interesting insights about tattoo-seekers that I didn’t think about before. As a perspective user of this product, as somebody who has interest in tattoos, I had certain assumptions, and I found out that some of those assumptions were wrong which made me further test them in more detail to make sure they were accurate not just for myself but for the demographic as a whole. For example, they would like to have specific filtering options that would allow them to have a customized search when looking for a new tattoo artist. As a result, further research was conducted on products with similar filtering features to better understand the market and our competitors. 

*needs additional research

Personas

Using the list of insights from interviews and surveys, I created 5 user personas. 

Mental Model & User Journey

I built three user journey maps to get a deeper understanding of user motivations and thought processes, along with the emotional context in which they’re using our product. 

 Information Architecture

After creating an initial information architecture for InkTank, I ran a card sorting test using Optimalsort to verify the IA. Then,  unnecessary items were removed and changes were made based on the test results.

Paper Wireframes: With the user flows and information architecture in my arsenal, I started to create visual representations of the app's screens. 

Low-Fidelity Prototypes 

Using Balsamiq, I mapped out the shell of the interface, its screens and basic information architecture.

Mid-Fidelity Prototypes

These mid-fidelity prototypes include all screens in a multi-step process. The aesthetics and content are more precise since I concentrated on refining the graphics, spacing, and layout.

High-Fidelity Prototypes 

I added all branding and design elements to have a finished look of the application. Having a Hi-Fi prototype that is closest to the final product in its details and functionality helped me as the designer to get the most out of the Usability Testing sessions. 

Participants

 A total number of six participants tested InkTank in order to gather critiques and point out flaws in the designs. 

Test Results

The test results of my usability testing showed the following challenges which informed my next version

1.  Facebook should be prioritized as the main login option.
2. The search feature can mislead some of the users and don't match their expectations.
3. Tattoo icons are not consistent across all pages within the app and should be changed

Refining The Design

After listing all of the challenges and errors experienced by the test participants, I started revising and improving my design. Some of the changes are listed below from the highest priority actions items to the lowest. 

• Issue 1: Facebook should be prioritized as the main login option. 
• Solution: I removed the secondary login option (Twitter) to prioritize Facebook as the main login option. I added an Explore screen and moved search page's content to the explore screen for having a less confusing flow.

• Issue 2: The Search feature was misleading some of the users and didn’t match their expectations.
• Solution: I added an Explore screen and moved search page's content to the explore screen for having a less confusing flow.

• Issue 3: Tattoo icons were not consistent across all pages within the app and had to be changed.
• Solution: I made the tattoo icon consistent across all pages.

Unaddressed Issues: Logo, icons, bottom navigation bar, main menu, and typography were changed slightly to improve the experience.

With all the data collected the resounding positives gave me encouragement that the personas created have led us into the correct direction. 

A/B Testing

Using UsabilityHub, two preference tests were conducted to improve design choices. For each of the tests, I provided 2 versions (A & B) for the participants to choose from. The goal was to find out which version testers preferred and discovered the reasoning behind their choices. Design B was the winner in both tests and was incorporated into the latest version of the app.

Peer Review Testing

I shared my app with 3 peers on InVision to gather their feedback. Click here to view a complete list of reviews and feedbacks. 

Accessibility Improvements

I tested the accessibility features of InkTank to determine if users would have difficulty using the application. In order to do so, I walked through each function of my application one by one and created a list of issues that violated the principles mentioned in Web Content Accessibility Guideline (WCAG). 

Summary

Designing for InkTank has given me invaluable experience in creating a design system that can be used for a wide variety of situations, and it has taught me a lot about the iterative process and design collaboration. It’s also given me a greater appreciation for the importance of a well-designed user interface, especially in an application like this that has the ability to impact one’s life in a significant way. 

In the process of developing and designing this product, I learned how to create user stories in a way that isn't just based on features but is based on what the users' needs really are. In addition, I learned about the importance of design accessibility and how it can impact the usability of the product.