Ink Tank Responsive Web App

UX/UI Design
Ink Tank
Ink Tank is a responsive web app where tattoo enthusiasts find inspiration, connect with artists and book their next dream tattoo.
My role
UX/UI designer
Tools used
Figma, Usability Hub, Optimal Workshop, Canva, Photoshop
Scope
Sept. 2020 - Jan. 2021 as part of UX Design course at CareerFoundry
What I did
Competitive Analysis, User Research, Information Architecture, Mobile & Desktop design, Usability Study, Design Language
Jump to prototype
The Problem:
How might we assist people in the emotional journey of getting a tattoo?

The Background

Tattoos reflect people’s life journeys: be it their dreams, emotional connections, or past experiences. For someone with little to no experience, it is overwhelming to sort through design ideas, and a Google image search is not making it any easier. Choosing an artist to execute that idea is where it gets even messier; is the artist skilled, could they be trusted, what about hygiene, would they be patient and understanding...

The Industry

An astonishing number of people worldwide have tattoos — 20% of all ages in USA and 12% in Europe. The tattoo industry is massive and growing but nonetheless it is still relatively undiscovered from technology standpoint.

The Challenge

I set out to understand the challenges of getting a tattoo as a newbie & an experienced tattoo enthusiast in order to deliver a product that takes the pressure away, leaving users inspired and reassured they are getting their dream tattoo.

When working on Ink Tank, I have adopted the Double Diamond Strategy which breaks the design process into four stages: Discover, Define, Deliver & Develop. I found this process particularly powerful in validating design decisions, allowing enough space for creative exploration while giving a focus point to come back to.

The Iterative Process
of Designing Ink Tank

What is out there: Tattoodo & InkSearch.co

I conducted Competitive analysis on Tattoodo and InkSearch.co with focus on UX analysis: to evaluate their navigation, layout and general usability. This helped me understand what Ink Tank needs to provide to stand out from the competition:

Search by location and style at the same time; (lacking in Tattoodo)

• Let users write reviews on artists’ pages; (lacking in Tattoodo)

• Assist in the process of choosing the right artist by giving recommendations based on liked styles and top rated artists that specialize in them. (lacking in both Tattoodo & InkSearch.co)

Additionally, Ink Tank should have simple & straightfoward flow of liking and accessing saved tattoos (a negative in Tattoodo)

User Research:
Can you walk me through your process of getting a tattoo?

It was time to see what tattoo enthusiasts thought about the competitors and the process of getting a tattoo. Equipped with the preliminary research discoveries, I conducted 4 user interviews with people who have different levels of experience with tattoos. My research goals were:

1. To understand the general attitudes and processes of getting a tattoo.

2. To uncover what (common) difficulties people might face.

3. To discover if they use any apps or websites to help them achieve their goals.

“I went to an unexperienced artist and had a complex idea. It resulted in a bad, disappointing tattoo.” — Sasha

“In my experience, artists are bad at replying emails. I get excited about a tattoo and then don’t get an answer for a long time.”  — Isabela

“For me it is important to allow the artist to put their unique trait in the design.”
Nico

“I tried googling ‘nature tattoo artists berlin’ & not much comes up. I only see pictures but it’s not clear who made the tattoo.” — Lisa

Detailed view on the conducted User Interviews, Survey & Research Analysis.

The Research Analysis:
Moving Forward

After the Research phase, I reexamined my assumptions based on the insights from the User Interviews. It was clear that:  

• Folks are flexible when choosing an artist and their decisions depend on the circumstances. Their approach towards the role of the tattoo artist in the process is not fixed and they are open for experimentation.

• People (with or without tattoo experience) rely mainly on friends recommendations when searching for tattoo artists.

• People need to know that the artist is skilled, since this is the number one criteria when choosing an artist. They do not think in terms of established tattoo styles when describing their taste preferences or search processes.

Revision of Problem Statement

I revised my hypothesis problem statement to align better with the users’ needs and goals.

From:

Tattoo enthusiasts need a way to find inspiring tattoo designs and contact the right artist to execute their idea, because they need to feel confident they will be satisfied with and supported through this emotional experience.


To:

Tattoo enthusiasts need a way to find inspiring tattoo designs and communicate with a suitable artist to collaborate with, because they need to be confident they will be satisfied with their tattoo and overall experience.

Empathising with tattoo enthusiasts.

Talking to people with tattoos gave me a good understanding of their needs & goals. I gathered useful insights and started to narrow down the scope of the project. I created 3 distinct user personas:

The Newbie: representing users with little to no experience in getting a tattoo who need assistance through the whole process. Main focus: Guidance.

The Heavy Inked: representing users with lots of experience who are primarily interested in collaborating with high-end tattoo artists. Main focus: Connection.

The Full of Ideas: representing users with experience in getting inked, who have concrete ideas of designs. Main focus: Inspiration.

User Journeys:
What would Kay’s experience with Ink Tank be?

Informed by each persona’s experience, attitudes & goals, I have created User Journey Maps to outline the processes needed to achieve their individual goals within Ink Tank app. This allowed me to focus on possible critical pain points and plan how to address them in the following design decisions.

User Flows:
How would Kay go about finding an artist on Ink Tank?

I set out to map out their User flows. This step helped me keep the design user-centered, by showing me what pages or screens of the app will be needed from the perspective of my user personas.

Detailed view on all three user personas, their flows and journeys.

Mobile-First Approach:
What to design first.

From the initial research, the user personas & user flows I identified three main features of the app:

1. Search for artists & tattoos

2. Book a tattoo appointment

3. Save tattoos into moodboards

Talking to potential users, it became clear that some folks prefer to use their personal computers when searching for tattoo designs and artists. Reflecting on this need, I have started working on a Desktop version simultaneously. I adopted a Mobile First approach when considering key features to be designed in the first MVP of Ink Tank.  I composed a plan of what the tablet and desktop version will include in terms of features and functionality & how they will build up on the mobile version.

Detailed view of the Mobile First plan.

Restructuring the Content:
Iterating on the Sitemap after Open Card Sort.

Before starting to work on initial sketches of each feature, I visualized the Information Architecture of the app into a sitemap, based on the user flows. The first version of the sitemap was tested through an Open Card Sort. Some useful insights from how people grouped the content led me to important adjustments of the Sitemap:

• People have different appoaches when it comes to searching. The refined Sitemap should provide more links and pathways to and from the Search Option.

• Recommended category is unneccessary. Folks have grouped the cards about recommendations within categories concerned with completing certain tasks.

• The category of Community/Social has been suggested from four participants. The Messages category can be expanded to Connect: where users can interact with, give recommendations to each other and share their own tattoos.

The Primary Features:
Rethinking the value proposition.

With the data from the Open card sort, I made revisions on the three primary features to be designed in the first iteration of InkTank, replacing Save tattoos into Moodboards:

1. Search for artists & tattoos

2. Book a tattoo appointment

3. Connect with other users

What motivated me to rethink the primary features was not only the results from the Open Card Sort but also the Competitive Analysis and the Business Requirements Document. There saw another oppotunity for a unique value proposition: no other tattoo app offers community building feature. Given that the user research showed folks rely mainly on recommendations from friends when choosing an artist, I believe that the Connect feature of Ink Tank will fulfill an important role.

Wireframing:
From sketches to first clickable prototype.

Focusing on navigation and the three main features, I designed clickable prototypes for both Mobile and Desktop versions of the responsive web app. They were tested in a usability study, conducted remotely with 6 users. The issues, discovered in the usability test were examined and prioritized according to severity. These are the major problems that needed addressing:

• The biggest failure of the design was the separation of Artists and Tattoos within the Search option. This tabs solution was confusing and unclear for all the participants in the usability tests.

• The Booking an appointment flow lacked important information.

Learnings from Usability Study:
Major problems and decisions.

For a detailed Usability Test Plan & Report, click here.

Wireframing:
From sketches to first clickable prototype.

Focusing on navigation and the three main features, I designed clickable prototypes for both Mobile and Desktop versions of the responsive web app. They were tested in a usability study, conducted remotely with 6 users. The issues, discovered in the usability test were examined and prioritized according to severity. These are the major problems that needed addressing:

• The biggest failure of the design was the separation of Artists and Tattoos within the Search option. This tabs solution was confusing and unclear for all the participants in the usability tests.

• The Booking an appointment flow lacked important information.

Learnings from Usability Study:
Major problems and decisions.

For a detailed Usability Test Plan & Report, click here.

Problem

Solution

Solution

Entry point to Search is through either tattoos or artists.

Problem

“Ok, I booked something but I have no idea for when?!” — Sasha

“It doesn’t make sense. I cannot imagine how I will write “mountains” & get artists out of it.” — Rebeka

The Booking Process is made into a 3-step process, one decision at a time.

Designing the Look & Feel of Ink Tank:
Style Guide

Ink Tank is about beautiful, inspiring images of tattoos & their proud owners. Images are the primary focus of the app. Thus, colors, are used carefully and sparingly, for accent, UI elements and typography are kept simple, undistracting, by using familiar UI patterns.

I used the Style Guide as a starting point and developed a more detailed Design Language document. It’s purpose is to ensure consistency and communicate the language of Ink Tank to designers and developers.

Design Language Document.

Get Inspired for your next tattoo.

Talk to the artist and book a tattoo session.

join a community of tattoo lovers.

customize your experience in the app.

Enjoy Ink Tank responsive app on mobile & desktop.

A design is never finished:
The next steps.

The Favorites category has been left out of the primary features designed so far. The next itreration of Ink Tank will concentrate on designing, testing and improving the Favorites feature, starting with the following hypothesis:

We believe that by providing a straightforward way of saving liked tattoos, our users will feel inspired to create collections & share them with friends.

We will know this to be true when we see how many people are creating their own tattoo collections.


The Favorites feature will be designed as a clickable high-fidelity prototype. A usability test will be conducted with paying a particular attention on what are users’ expectations:
• Do they want to see favorite artists as well in this section?
• Where can they find a list of artists they like and follow?
• Are My Moodboards shareable?

Retrospective:
What I’ve learned.

Ink Tank is a project I’ve worked on as a solo UX/UI designer, from start to finish. The process was challenging at times, but it also allowed me to have hands-on experience in each step of the design process.

I’ve learned to rely on my own judgement to move forward while clearly distinguishing and keeping track of my assumptions. I found the stages of the design process where my solutions were tested with users or peers not only absolutely necessary but also extremely inspiring. For me, the creative space for problem solving happens in those moments of communication, listening and collaboration.

What’s next: The Ink Tank app won’t be possible without tattoo artists and their input. So, I’m excited to start the design process from the beginning, setting out to explore the goals and needs of the tattoo artists & design the user experience and interface for their side of the app.

See prototype