Ink Tank

iOS Application for Tattoo Enthusiasts

Overview

Getting a tattoo is a significant personal decision. The experience of searching for the right tattoo artist may be overwhelming in an industry that offers so many options and opportunities. People spend over $1.65 billion annually on tattoos in the United States alone. Despite the big size of the industry, few quality mobile apps in the market help people discover what they want to do and with whom. Of those that are available, most still do not address the complexity and emotions one may experience while finding the right design, artist, or studio, let alone gaining an overall understanding of the tattoo industry as someone who has no idea how a tattoo is made.

Overview
Ink Tank_mobile

Challenge

Design a mobile-responsive app that provides complete services to a tattoo enthusiasts user who needs to acquire a new tattoo and who wants their experience to be meaningful, easy, and feel like a trustworthy decision.

Client

InkTank

Role

UX/UI Designer

Duration

June 2020 – April 2021

Contribution

Competitor Analysis
User Scenarios/Content Survey
Process Flow
User Flows
Wireframes
UI Design
Prototyping
User Testing

Tools Used

Pen and Paper
Proto.io
Adobe Xd
Usability Hub
Photoshop
Illustrator

Process

User-Centered Design (UCD)

UCD is the process followed in this exercise as it focuses on the end-user and addresses the whole experience. It aims to improve human well-being by creating a more useful, usable, and accessible app.

illustration_user_centered
User-centered design_mobile

Discovery

This phase focused on identifying the customer audience and the conditions and expectations customers will face as they use the app leading to the development of the business requirements for the app.

Problem Statement

I am a user who likes tattoos as my way to create my own identity to make me feel a little more unique. And I’m trying to get inspiration for tattoo styles and find trustworthy tattoo artists or studios that can do the job. But there isn’t a way for me to get all that in one place because I have many tattoo ideas, several artists I like, and nothing seems to address choosing the right design and making the final decision, which makes me feel overwhelmed. I feel I spent too many hours trying to find what I like.

Problem Solutions

A mobile app that helps the user have a one-stop service, where the user can find the answers to all of their questions that they might have, in an effort overall to help the user have a clear idea of what tattoo they want and which artist or salon to choose.

Concepting

User Personas

Background

Live: Lives in San Diego, CA

Profession: Affiliates Account Director

“…go over the idea and how it’ll be like the final tattoo design and then the anticipation leading up to getting it. It’s exciting like planning a vacation.”

Goals

  • Monica wants to find female tattoo artists that have different styles to promote more art in tattooing.
  • As a new resident in San Diego, she wants to see local studios in town to build a trusting relationship with them.
  • She wants to provide feedback back and forth with the artist, add reviews, and rate their work once she has the final result.

Frustrations

  • Monica has a challenge finding a website or app that provided all tattoo artists in town.
  • She has spent a lot of time looking for trustworthy artists with a specific style that makes her feel confident.
  • Looking for inspiration, but nowhere to save her ideas

Background

Live: Lives in San Diego, CA

Profession: Project Manager

“…old writing called Alibaba, where it’s a very old writing of Filipino, and I’ve always wanted to get that kind of tattoo just to stamp myself that I am Filipino… Because it’s unique …”

Goals

  • Joy would like to have an international database of tattoo shops and artists.
  • She wants to look at every detail and wants to verify that the tattoo artists comply with their residing country or city. She wants to ensure they have all the certifications to practice.
  • She wants to be able to choose an artist that demonstrates talent tattooing in different typographies.

Frustrations

  • Not being able to tell if the tattoo artist has sanitation protocols in place or is trustworthy.
  • Not having everything in one place.
  • Not having much knowledge about the tattoo industry.

Background

Live: Lives in San Diego, CA

Profession: Director of Jewish Education & Youth Engagement

“…I start saving my inspiration and then realized I have a pattern of going to look for data from artists, for me that is kind of an art …”

Goals

  • Michelle wants to search for a quality artist in different styles.
  • She has too many ideas saved on various social media platforms; she would like to combine them in one place.
  • She wants to do a mockup of her tattoo ideas on her body to make sure the tattoo placement is correct and what she wants.

Frustrations

  • Not being able to find artists or shops easily.
  • Not being able to learn more about the artist.
  • Not being able to know what she wants.

User Journeys

Scenario

Monica wants to find a new tattoo artist in the new town she recently moved to. However, she wants a specific tattoo style, and the artist should be female with some experience.

Searching for tattoo artists

Journey graphics

Scenario

Joy went to Thailand, and when she got there, she already had a tattoo artist selected. When she and the tattoo artist met for a consultation, she wanted to show the artist all of her research on the design she wants.

Looking for ideas

Journey graphic for Joy
Joy_journey graph

Scenario

Michelle has a million ideas in her head. Since she has experience drawing, she decides to sketch out her flower tattoo design. She needs to upload her drawing into the app then and take a picture with the design to show where she wants her tattoo.

Sending your ideas to the artist

journey map for Michelle
michelle_journey

User Flows

Objective

As a new resident of San Diego, I want to find tattoo artists in San Diego, specifically females, to choose and set up the first consultation with.

Searching for tattoo artists

Objective

As a person who likes to be prepared, I want to have all my research and ideas organized in one place so that I can go to the artist prepared with what I like.

Finding tattoo ideas

Objective

As a creative person, I want to make a draft of the design so that I’m sure about my tattoo idea and where I want it to be on my body before I go to the tattoo artist.

Sending images to the artists

Objective

As a creative person, I want to do make a draft, so that I can be sure that what and where I want it before I go to the tattoo artist.

Sending images to the artists

Card Sorting

Using Optimal Workshop as a card sorting tool, I asked 10 participants to review my site map into predefined categories. I used close card sorting.

This exercise allows me to look at the interaction and understanding of the participants through videos, helping me review from a different perspective how well they understand my placement.

Site Map

After the card sorting review and participants’ feedback, the sitemap for the website and mobile app was finalized.

Final ste map

Wireframes

Having a solid understanding of the distinction can help comprehend the design processes and manage your own design workflow.

This is why the Wireframe and Prototype are important elements of the visual representation and the interface’s visual structure.

Low-Fidelity Prototyping: Paper & Sketches

This tool purposefully omits the intimate details of a design such as color, spacing, and imagery and is usually hand-sketched in black and white or grayscale.

Lowfindelityscreen_shoot

Mid-Fidelity Prototyping: Paper & Sketches

The difference between low-fidelity and mid-fidelity is the move from a paper sketch to using design software. There are a few advantages of mid-fidelity. Mainly, this design step is digital so that the sketches can be shared with others, and it is very easy to make large, rapid changes. This quickly allows the process to move to the next step: user testing.

Mid fidelity screen shoots

Prototyping & User Testing

Usability Testing

Due to the pandemic of 2020, the environment I chose for the project was Field Studies. I created virtual meetings with participants in their natural environment where they engaged with the product. I took notes that helped me build an affinity map, allowing me to create a rainbow spreadsheet to prioritize the changes.

Affinity Map

The basic concept of an Affinity Map is simple: you isolate information and determine how it relates to other bits of information. This helps the process by allowing you to: Isolate concepts and information quickly, Visualize bits of information so that previously unseen patterns and hierarchies can emerge, Extract and group information collaboratively within a team.

Rainbow Spreadsheet

In the usability test, all six participants were able to complete all tasks asked. All three mobile test participants agreed that the prototype was easy to use and had consistency and standards in line with other apps they had used in the past. For the desktop test, two out of three participants agreed that the prototype needs some improvements with the experience.

Rainbow Spreadsheet

Preference Test

Preference testing is an A/B test, but in this case, you compare versions of the image presenting the same thing. However, instead of running a test on a live website against a specific metric, you are comparing two screens side by side and the participants then make the choice between the criteria and instructions.

Test 1

The objective was to find out which layout was easier to read and digest.

The conclusion was that even though onboarding version B performed better, the difference was not statistically significant. Still, I agree with some of the participant’s comments that “it reads better.”

Test 2

The objective was to find out which button content read better with the action.

The conclusion was that sign-in button version B performed much better and had the same feedback from the usability test. I also agree that the new content explains the action of signing in better.

test1_image A

42%

test1_image B

58%

test2_image A

20%

test2_image b

80%

Test 1

The objective was to find out which layout was easier to read and digest.

The conclusion was that even the onboarding version B performed better, the difference is not statistically significant. Still, I agree with some of the participant’s comments that “it reads better.”

test1_image A

42%

test1_image B

58%

Test 2

The objective was to find out which button content read better with the action.

The conclusion was that sign-in button version B performed much better and had the same feedback from the usability test. I also agree that the new content explains the action of signing in better.

test2_image A

20%

test2_image b

80%

Design Languague

A design language is a set of overarching rules and standards that help maintain design consistency on a single platform. A design language system is a group of design languages that govern the design and user experience across multiple platforms and devices.

In addition to things such as color, shape, line, and contrast, a design language includes common platform patterns, animations, iconography, sizing, gestures, graphical style, visual design style, and more.

UI_logo
UI_Typography
UI_color
Iconography

User Interface

Using the design language in the User Interface (UI) design focuses on looks or style. It aims to create an interface that users find easy to use and pleasurable.

UI_integrated

Final Screens

High-fidelity wireframes