InkTank

Course Project • UX/UI Design

Project Overview

I designed a tattoo mobile application called InkTank as a project assignment for my UX Design course. I chose this project as I was actively looking to get tatted, using multiple websites and mobile apps for this purpose and finding the whole process quite difficult.

Objective

Explore inspiration for tattoo designs according to preferences like artist and style.

Tools

Balsamiq
Figma
Optimal Workshop
Usability Hub

Problems and Goals

In order to create a useful and intuitive tattoo app, I looked through a few of the most popular tattoo apps and read their reviews and conducted 3 initial user interviews. I wanted to determine how other people were looking for and organizing their tattoo inspiration and what their experiences were.

What I discovered

The most popular existing tattoo apps have certain user pain points, such as overwhelming interfaces (Tattoodo) or difficult search tools (InkSquad).People were easily overwhelmed when looking for a perfect tattoo and tattoo artist.

Some people had no idea where to start, while others knew what design or style they wanted but didn’t know which tattoo artist to go to. Most wanted some type of consultation.

‍Most of those I interviewed relied on Instagram or Pinterest to search for tattoo inspiration. While these are great tools for browsing photos, it’s difficult to search for or filter for a certain style/artist location, so users use multiple apps to search for photos and then find a nearby artist.

Problem Statement: Users need a convenient and personalized way to browse tattoo designs and the portfolios of nearby tattoo artists, with the ability to reach out for consultation/feedback in order to get their perfect tattoo.

To check out my interview questions and findings:

User Research Analysis (Google Slides)

Who is it for?

I created user personas to help organize different user demographics: the tattoo noob, the tattoo enthusiast, and the tattoo artist. Defining their behaviors, needs, and frustrations helped pinpoint how they would approach and navigate a tattoo app.

Full User Personas (Google Slides)

Designing a Solution

Based on the interviews, I knew the main functions must include:

the explore screen
ability to bookmark inspiration and easily find them again
ability to contact tattoo artists directly

I created a site map to work out the basic layout for the mobile application and started sketching out some low fidelity wireframes.

Initial Sketches

I started off trying to make the interface and navigation as simple as possible, therefore choosing to draw the first wireframes with only 3 main selections and tried to fit all searching/exploring of tattoos and artists on an “Explore” page.

Two potential users felt overwhelmed by the dashboard. There was simply too much going on (and now I know designs should limit the number of actions a user can take per screen!). Splitting the “Explore” page into “Home”, “Tattoos”, and “Artists” would be more relevant to different users, depending on if they were simply browsing or if they were seriously looking for a tattoo artist in their area to book an appointment.
‍

I updated the site map to reflect these changes.

Usability Testing and Feedback

I conducted 6 moderated usability tests to:

Measure the learnability and intuitiveness of navigating the mobile application for first-time users
Determine what features need onboarding
Get general feedback on the usability, design, and structure of the application

I asked users to complete certain tasks during the testing process:

Sign In/Create an Account: Determine if the process is smooth and users can easily sign in or create a new account
Onboarding: Determine if the current onboarding process is effective or if additional/less onboarding is necessary
Explore and Browse the App: Determine is navigation is intuitive and users can easily explore new categories or find what they are specifically looking for
Message an Artist: Determine if users can easily find a tattoo artist and message them for personalizing a tattoo design or booking a session

Usability Report

Issue 1: Users had difficulty selecting certain buttons (high severity)

Solution: Increase touch spaces following guidelines suggested by Material Design (48 x 48dp with 8dp of space in between)

Issue 2: Headings were too close to “back” icons, creating some confusion (medium severity)

Solution: Center headings while keeping the back button left-aligned

Issue 3: Onboarding screens regarding personalization was overwhelming (medium severity)

Solution: (see below in Polishing the Design)

Issue 4: Interface seemed unappealing/not mature (low severity)

Solution: Change navigation bar icons in favor of more minimalist/mature icons suitable for target market (age range of 18-40)

Polishing the Design

After fixing the discovered usability issues, I focused on creating a high-fidelity wireframe and prototype. I utilized UsabilityHub for preference testing and gathered feedback from my CareerFoundry mentor and fellow students. I also reviewed the WCAG to make sure the app would be accessible.

Design Language Systems

Overall Process

I went over each screen with the same approach and asking the same questions:

Which features are actually crucial?
Is there a way to simplify this screen?
Does the visual hierarchy make sense?
How would (persona name) want to interact with this page?

I experimented a lot with my designs and constantly asked for feedback on my reiterations. I had a few mentor calls where we just focused on the UI and I bugged my sister and a few friends about more major changes. I ran a couple of preference tests for my sign-in screen, conducted usability tests, and individually messaged fellow students through Slack to check out the prototype.

The data collected from user research helped make the prototype much more intuitive. The overall design now has larger images and fonts while gaining more white space, making it easier to scan through and simplifying the UI.

Personalized Dashboard

The initial screens asking users to select their favorite tattoo styles wasn't intuitive, and this was made obvious through testing.

Many participants either spent more time deciphering the screen or completely skipped the step where they could learn more about a tattoo style. I was also told the screen was overwhelming, most likely due to not having enough white space.

I adjusted the flow and was able to eliminate a screen. In addition, the current iteration has a bit more breathing room, with larger images and more negative space in between rows. The informational overlay also feels less cluttered and gives space to show photos one-by-one.

Search Bar

The initial search bar was meant as a master search bar of sorts, where you could type any tattoo or artist name and a bunch of suggestions would be generated. However, users might not realize they can also search for a specific artist or city, and coding this massive search tool could be a huge headache for developers.

Categorizing their searches by tattoos and artists would allow users to find what they were looking for much more quickly.

Final Prototype

Results and Takeaways

Problem statement: Users need a convenient and personalized way to browse tattoo designs and the portfolios of nearby tattoo artists, with the ability to reach out for consultation/feedback in order to get their perfect tattoo.

InkTank tackles all aspects of the problem statement, though of course is only one solution to the problem. I learned a lot from working on this project, from spending time with my mentor discussing pros and cons of design choices for each screen, to being reminded from testing that I should never assume my opinions and assumptions will reflect the general user. I'm thankful that I was able to add more tools to my toolbox.

Want to work together?

If you like what you see and want to work together, get in touch!

lee.stella748@gmail.com

Problems and Goals Designing a Solution Usability Tests Polishing the Design Final Prototype