InkTank

Helping to make your tattoo experience better.

UX Design

Client /

Personal

Role /

UX Designer

Year /

2019

About the project

InkTank is a tattoo app providing users with the tools and inspiration needed to get their next tattoo.

Skills

Affinity Mapping | Card Sorting | Competitive Analysis | Content Auditing | Low - Mid - High-Fidelity Wireframes | Journey Maps | Mockups | Prototypes | Sitemap | User Flows | User Interviews | User Personas | User Research | User Stories | User Surveys | Usability Testing

Tools

Problem Statement

Experienced and first-time individuals thinking about getting a tattoo need a way to organize their tattoo ideas and inspirational images so they can better brainstorm their next potential tattoo. These users need these features because it will help them streamline their thought process in a clear and concise way.

Proposed Solution

An intuitive and personalized tattoo app that will provide inspiration and tools for users to sort tattoo images by different styles and categories for their next tattoo. The app will give users a more realistic view of tattoo options and help them understand the process of getting a tattoo better.

Top

RESEARCH

Competitive Analysis

The first part of the research was to conduct a Competitive Analysis to see what tattoo apps were out on the market to gauge the competition. There were two main competitors, Tattoo Planet and Tattoodo, that seemed to have a large following. By analyzing their marketing profile and SWOT profile, I was able to discern their strengths and weaknesses. I used this research to develop a strategy to create an app that would include features that would be desired by the tattoo community.

Interviews

During the beginning of my research phase, I conducted user interviews to get a better understanding of the issues individuals were having in getting their tattoos. The requirements to be selected for the interview was that each user had to own at least one tattoo.

Open-ended interview questions

How do you currently get ideas for tattoos?
Do you use any sites or apps for research? If so, which ones?
What do you like about them? Why?
What don’t you like about them? Why?
What’s the hardest part about getting a tattoo?
Are there any features you’d like from a tattoo app?
Would you enjoy a social feature included in these apps to connect with others?

Interview Findings

Affinity mapping was then used to organize all the interview results. These were the significant findings:

Users want a place to save all their ideas so that they can review them later.
The hardest part about getting a tattoo is gathering ideas and inspiration.
Tattoo artist's websites, Yelp, and social media were mainly what users used to find tattoo ideas.
All the details and contact information of the tattoo artists will be very useful.
Users wanted to be able to message artists and other users directly.

Affinity mapping of the results of the interview questions

"Tattoos are forever so I want to get something I won't regret later in life."

Competitive analysis of the mobile app, Tattoo Planet

Personas

Based on the user interviews, I created two different personas. Ben was the primary persona and he is a tattoo enthusiast. The second persona, Anne, is a tattoo artist. Creating these personas helped me develop this project from a less biased point of view and better connect with our possible target audience for this app.

The user personas included their demographics, background, needs/goals, behavior, frustrations and a quote. This allowed me to create a user-centered design and acted as a constant reminder of who will be using the app.

My two personas, Ben and Anne

Journey Maps

The next part of the process developed into creating journey maps for the primary persona, Ben. Through this method, I was able to empathize with how Ben would be feeling while he was completing a task when using my app. I was able to see his thoughts and emotions during this experience. This helped me further connect with my target group and make any necessary changes so that the user experience could be improved for them.

Ben's journey map where he prepares to find out how much his tattoo will cost

Card Sorting

Optimal Sort was then used for testing individuals remotely on how the navigation should work. I had the volunteers categorize which pages they thought belonged under which navigation menus.

I was a bit surprised by the results, to say the least. However, using the results, I was able to revise my site map to be sure that the user flow worked more smoothly for users navigating the app.

Results from the remote testing using Optimal Sort

Site Map

Card sorting helped me revise my site map so the user flow was more intuitive for the users. I simplified the navigation and eliminated unnecessary menu options that may have confused the user. I created clear pathways so that users could navigate through the app without much trouble.

Revised site map

build

Wireframes

With the gathered research results, I created wireframes in low, mid, and high fidelity. There were many more iterations made to the initial design after receiving additional feedback from instructors and colleagues.

Overall, I aimed to keep the app as simple as possible and kept a neutral-colored user interface to really let the content of the app shine on its own. Below you will see how my wireframes progressed into its near-final prototype where users were able to use the app and provide further feedback to see if the app was easy to use.

Low, mid and high fidelity wireframe progression

Measure

Usability Testing

Conducting The Tests

With my high fidelity wireframe complete, I created a prototype in InVision to begin the usability testing. I conducted both monitored and remote usability test with 5 different participants. To see how functional my app was, they were asked to complete the following 2 tasks scenarios using my prototype:

You know that you want to get a geometric style tattoo. Browse by tattoos and search for a geometric style tattoo.
You own a tattoo and want to share it with the tattoo app community. Take a picture of your tattoo and upload it to your uploaded photos.

A/B Preference Testing

I also created a preference test using UsabilityHub. I tested which onboarding screen participants preferred from two different options. The main differences were that option (A) was a swipe through option with more imagery, whereas option (B) had all the information on one page.

According to the test results, option (A) performed better, and the difference is 95.0% likely to be statistically significant. This means that you can be confident that it is actually better, and not performing better due to random chance.

There was a test group of 12 participants. Option (A) was voted to be the most preferable option. (A) was selected by 9 participants whereas option (B) was selected by 4. I integrated an iterated option (A) as my final onboarding page design.

Onboarding page options (A) and (B) tested using UsabilityHub

Testing Insights

After running the usability tests, I gathered all the data in a rainbow spreadsheet to determine the severity of the issues that the participants experienced. I used the Nielsen Severity Ratings that ranged from 0-4 (4 being the most severe and needing to be fixed immediately).

With the data gathered from the usability tests, I was able to see that some of the most severe issues with the app involved a) navigating to certain menus and b) finding forms that were vital to the use of key features of the app. Once these problems were ranked, I developed a strategy to fix these issues.

Rainbow spreadsheet showing the severity of issues using the Nielsen'Severity Rating scale

Solutions

Accessibility

I made sure to conform to the AAA-A standards for better accessibility for our users. Icons were added to notification menus so that users that may have color blindness would know exactly what's going on in the app. A zoom feature was also added for better visibility for those with possible vision impairments.

User Interface

After receiving more feedback from further testing, I decided to add some accent colors to highlight exactly where users are in the app and where they needed to go next. This was done by incorporating higher contrasting colors for menus and call to action buttons. Font sizes were also increased throughout the app.

With most of the necessary testing completed, I collected all my results and feedback to polish up my app.

Walkthrough

prototype

learn

back to work

What have I learned from this project?

Developing InkTank helped me grow as a designer and an individual. It helped me understand that, when designing for users, it is best to put yourself in their shoes. Using the personas, I was able to empathize with the target users and, through user testing, discern what kind of design changes were necessary to keep the user engaged and motivated to use an app that could make their lives easier.

Keypoints

Research, research, research! User surveys, interviews and testing all proved to be vital in developing the app. The results can sometimes be shocking and throw off everything that you think you already know. Nevertheless, use these results to your advantage to create a better experience for your users.
Personas are absolutely essential. By designing with your focus on personas in mind, you decrease any bias you have and are better able to design a customizable experience for a specific target audience.
It's an ongoing process. The design will always be evolving and iterations will always be necessary. With technology and trends changing every day, it's important to stay up to date to keep your app relevant and suitable for the users' needs.