The Brief

What is it?

A mobile application that allows users to browse through designs, set their preference style, ‘try’ a tattoo in real-time, save and share their favourite designs and locate and book artists.

Who’s it for?

Users looking for tattoo inspirations and artists. For both first-timers and returning thrill seekers. For tattoo artists looking to promote their work and gain potential clients.

Why bother?

Getting a tattoo for many is an incredibly personal experience. There are very few apps on the market but none seem to address the complexity and emotional element of finding the right design and tattoo artist. INKTANK aims to fill that gap!

My Role:                 

UX designer, UX researcher

Applying a user-centered approach to the Design Thinking process, the following phases were carried out:

Discovery, Concepting and Prototyping & User Testing.

Challenges

The GREATEST challenge was creating a service for a product that is forbidden in Riyadh, Saudi Arabia where I was residing at the time of the project. This is a conservative country governed by strict Islamic Sharia Law, which considers getting a tattoo ‘haram’. This meant that I had to rely strictly on doing my user research on expats living in the Kingdom and on the online community.

 

Another challenge was IT and security issues. Due to the strict restrictions in Saudi Arabia, many sites were monitored or could not be accessed. This posed a potential problem when running my testing with the clickable prototype on participants within the Kingdom but the threat was easily avoided by using VPN services.

 

As this project was part of my course I was learning as I went along, so at times my limited experience in UX and UI slowed down my process as I had to do extra research and discover what worked and what didn’t and what UI patterns were best suited for the project.

Discovery
01 COMPETITIVE ANALYSIS

Market research surprisingly revealed that there were only a few apps available on the market. A competitive analysis was performed on two popular brands: Tattoodo and Inkhunter. To gain a compedtive advantage a further SWOT analysis of the two was conducted to understand what missed opportunities could be applied to INKTANK.

 

Key findings:

•    to introduce an AR feature to Inktank that will add emotional value to the user’s experience

•    use strong visuals and clean UI to appeal to user’s aesthetic needs

•    have a strong social media presence to attract new users and grab a larger market share.

02 USER RESEARCH

Unfortunately users could not be observed on site via contextual enquiries  as there are no tattoo salons available in Saudi Arabia. So, surveys and interviews were a great way to reach out to users abroad avoiding geographical restrictions.

 

Interviews were carried out with the following research goals in mind:

1. What motivates users to get a tattoo?

2. What pain points do users face when deciding on getting a tattoo?

3. What do users want in an app?

Affinity mapping lead to the following key Findings:

  • Most users get a tattoo for sentimental reasons.

  • pain points; finding the right design and tattoo artist and regretting the decision after.

  • Users want:   

    • an easy way to find designs and artists

    • an easy way to schedule appointments with artists

    • a way to save and 'test' the design first

PROBLEM STATEMENT

Users need a simplified way of finding design inspirations and local artists because they want to feel they are making the right decision when choosing a tattoo style and artist that will give them emotional satisfaction without regrets. We will know this to be true when we see more users using our app to find local tattoo studios, as well as an increase in app ratings and user reviews.

03 USER PERSONAS

Findings from user research revealed that there are all kinds of people around the world interested in getting a tattoo, but these were eventually narrowed down into the following three personas: The Creative, The Thrill-Seeker and The Fitness Fanatic.

 

Meet Sarah, Dave and Gina. These are their user stories.

As a new user I want an easy way to figure out my tattoo style, so that I can know what design to choose.

Sarah
Dave

As a user I want an easy way to set up an appointment with the artist of my choice, so that I can fulfill my goal of getting a tattoo without wasting time.

Gina

As a user I want to be able to save the designs that inspire me, so that I can look at them whenever I want before making a decision of which tattoo to get.

Concepting
04 JOURNEY MAP & STORYBOARD
Dave's User flow: Booking an appointment with an artist

As a user I want an easy way to set up an appointment with the artist of my choice, so that I can fulfill my goal of getting a tattoo without wasting time.

The journey map and storyboard of persona Dave illustrates what emotions he may encounter when booking an artist.

05 INFORMATION ARCHITECTURE: Card Sorting & Sitemaps

Card sorting revealed that participants generally grouped the cards into the standard categories I was aiming for:

 

• Tattoo Design

• Artist Search & Contact

• Settings

• Sharing the Experience

06 SKETCHES & WIREFRAMES

With a solid IA foundation in place, wireframes for all the features could be sketched out and through rapid prototyping, the iterations lead to a clickable prototype that was ready for testing. 

Introduction pages include:

  • splash screen with logo

  • sign up / Log in pages

  • Welcome page

  • Onboarding with swipe tutorial (requested as part of project requirement for both mobile and desktop versions)

Low-fidelity frames with Balsamiq

  • locating & booking an artist

  • finding & saving a design

  • setting up a preference style

Prototyping & Testing
07 USER TESTING

The moment had arrived to introduce INKTANK to its potential users. This phase involved thinking about who I wanted to recruit for testing, formulating test objectives, what I hoped to achieve from the test etc.

Challenges:

  • Finding local recruiters because of the cultural obstacle (getting a tattoo is considered haram or illegal in Saudi Islamic culture), so I relied mostly on the expat community.

  • Tech issues: Another challenge was making sure to use apps that were not blocked, or that worked with VPN to avoid communication difficulties in Saudi Arabia. I made sure to test this beforehand.

  • Scheduling issues – I had extra participants on standby in case of last-minute cancellations.

Through moderated testing users were observed to measure how well they understood the app, its value, and how they completed basic initial functions.

 

Three test objectives were set to determine if users can:

  1. locate and book an artist.

  2. set up a preference style from their profile page.

  3. browse for a design and save it.

Participants

 

Six participants were recruited personally to participate in the study. They were screened for basic demographic information to ensure they fit with at least one of the user personas of INKTANK. I also included participants that didn’t typically fit with any of the personas to avoid sampling bias.

Key Findings:

 

The Rainbow Spreadsheet revealed the following key issues:

Problem #1 - Locate & book an artist

Results from Usability Testing  showed that 100% of participants were unable to view featured works of the artist because they didn’t recognize the ‘gallery’ icon. (High severity)

Users also wanted the option to message artist. (Low severity)

Before

Solution:

 

Re-design icon and add messaging option.

After

Further feedback revealed that there was still confusion with the ‘gallery’ icon. So a Featured Works section was added and the icon was replaced with a ‘view gallery’ button.

Final Version

Another issue was that users were unable to view an artist’s availability schedule when making a booking.

Before

After

Problem #2 - Set up a preference style from Profile Page

User research revealed that some users, particularly newbies, did not know what tattoo styles were available and wanted an easy way to find their own style, which they could view in their Profile page. A style matching feature was developed where users could swipe left or right on a style they liked or disliked. They would then be matched with a style based on their likes and dislikes.

 

Usability testing revealed that although all participants enjoyed the famous Dating app resemblance of the feature, most forgot that they were swiping for styles and had the tendency to tap the heart icon to like a design instead of swiping right.

Before

The most significant change was combining the initial two pages into one.

After

100% of participants forgot they were swiping for styles (High severity)

Users found the icons distracting as it prompted them to tap the heart icon to like a design rather than to swipe.

Solution:

  • remove distracting icons

  • provide style label and Artist name (e.g. Traditional by Melo Mada)

  • provide swipe arrows and labels MATCH / NO MATCH

  • change header to ‘Match your Style’

Final Version

Problem #3 - Browse for a design and save it

The initial sketch was designed with categories appearing in a vertical menu. However, it was decided that a horizontal visual scroll through the categories was more appealing and informative for users who didn’t know how to distinguish between styles. 

Before

After

All six participants were unable to view featured works of the artist because they still didn’t recognize the ‘gallery’ icon. (High severity)

Solution:

Re-design icon and provide label. The icon went through three iterations.

 Version 1 

 Version 2 

 Final Version 

Final Version

08 RAPID PROTOTYPING & FURTHER ITERATIONS

Applying an iterative approach through rapid prototyping lead to the following design changes.

Sign Up with Email

 

  • Skip option was added

  • Emphasis given to CTA button with colour.

  • One font used

  • Contrast between background image and input fields and text was increased for better visibility. Also form labels, placement holders and universal symbols were added.

  • Size of the confirm button was changed.

Asset Iterations

Final Version

Search for a style in Profile Page

 

Feedback suggested adding some text to the search bar to guide the user.

Final Version

09 VISUAL DESIGN

A/B Preference Testing revealed that the majority of participants preferred a black & white theme saying it fit the 'tattoo' concept better and that it looked clean and more professional than a coloured theme.  Therefore the colour palette is monochromatic with pops of mint-green colour.

 

Inktank’s voice is friendly, edgy and cool. The language is casual, colloquial and straightforward with a play on words that’s fun and easy to understand.

Style Guide

High-Fidelity Wireframes

10 MOCKUPS

Clickable Prototype

Final Thoughts

User-centered design has taught me the value of empathizing with the user and considering their emotional journey throughout the entire design process.

 

I loved working with the user in the research and testing phases. I also learnt the significance of rapid prototyping and reiterative design based on receiving constant feedback.

 

Although the testing phase went well there was a little confusion with some of the questions, which slowed down the process of completing a task. In future I‘d have to pay more attention to how I phrase the scenario tasks.

 

As important as the user’s role is in the design thinking process, I also made sure that design changes were always in line with business goals too.

Moving forward I plan to introduce accessibility early on in my design and to keep better documentation of the project throughout the process. I also plan to gain more experience in UI design to improve the final mockups of a project.

linkedin-1.png
dribbble-1.png
behance-1.png

© 2019 by Caroline Cieslikowska