top of page

👁️ Overview

🔍 Objectives

📝 Notes

iphones tatd.png
tatd3.png

STUDENT PROJECT

TAT-ed

App optimisation, user research, testing and prototype creation for a new tattoo app as part of a General Assembly project

:

My goal was to design an app focusing on two groups of key users: people who want to find tattoo artists, and tattoo artists who want to share their work and get more bookings. 
Through carrying out research and being consistently user-focused, I created a basic wireframe for a new app for this purpose.

  • Conduct research to establish user base, wants/needs, and which aspects of the app to centre and prioritise 

  • Use information architecture to establish content hierarchy

  • Create a basic prototype

  • Conduct usability testing to test the prototype

This was a student project as part of my General Assembly course.
Due to the course course timeframe limitations,
I chose to focus my research and project on the clients rather than tattoo artists.

🚀 User Research

I created a research plan then conducted interviews to establish what people would want out of the app. The target audience were tattoo artists, 18-50, all genders, and I recruited through Instagram.
To figure out my interview questions, I created a method where I began with a statement of what I wanted to know, and the questions followed. Click here to see.


I collated the qualitative data with an affinity map.

The aims of my research were to establish:

  • pain points of the social experience

  • which aspects of the app would be important to users

  • specific features that users would find helpful
     

INTERVIEWS
AFFINITY MAPPING
COMPETITIVE ANALYSIS
PERSONAS
PROBLEM STATEMENTS

Screenshot 2023-07-04 at 22.26.04.png
exc_edited.png

'I' Statements

I prefer to see work that can be shared within a community.
I prefer to see
specific styles I want.
I prefer to see things that can be
shared via a story system.
I prefer to see clearly
if something is available or not.

🧐 Competitive Analysis

I compared three image sharing apps for competitive analysis - Instagram, Tattoodo and Pinterest. This gave me an idea of what is already out there and the features already available, or not.

FEATURE INVENTORY

COMPETITOR

Instagram

Tattoodo

Pinterest

Purely tattoo based

Screenshot 2023-07-04 at 18.16.49 copy.png
Screenshot 2023-07-04 at 18.16.49.png
Screenshot 2023-07-04 at 18.16.49 copy.png

Save artwork in folders or equiv

Screenshot 2023-07-04 at 18.16.49.png
Screenshot 2023-07-04 at 18.16.49.png
Screenshot 2023-07-04 at 18.16.49.png

Can book tattoo

Screenshot 2023-07-04 at 18.16.49.png
Screenshot 2023-07-04 at 18.16.49.png
Screenshot 2023-07-04 at 18.16.49 copy.png

Filter artwork by style

Screenshot 2023-07-04 at 18.16.49 copy.png
Screenshot 2023-07-04 at 18.16.49.png
Screenshot 2023-07-04 at 18.16.49.png

Search by location map

Screenshot 2023-07-04 at 18.16.49 copy.png
Screenshot 2023-07-04 at 18.16.49.png
Screenshot 2023-07-04 at 18.16.49 copy.png

Can have flash section

Screenshot 2023-07-04 at 18.16.49.png
Screenshot 2023-07-04 at 18.16.49.png
Screenshot 2023-07-04 at 18.16.49.png

PLUS/DELTA

Positives

Instagram

● Can like and save peoples work

● Image feed from specific people you follow

● Simple page with recognisable layout and contact info easy to see

● Story feature to see current activity

● Mostly simple to contact and book

Tattoodo

● Quiz at the start to assess taste

● Location based

● Can select multiple styles

● Can toggle between artists and studios

● Option for flash and work already done

● Artists description, however have to click for it

● Can upload travel plans

● Can save work

● Lots of filters on search page, perhaps too many

● Messaging features

Negatives

● App not focused on tattoos and algorithm not favorable to tattoos

● Messaging can get lost in non-specific DMs, a lot of artists specify to email them in bio

● Have to finish every single question of the quiz before shown results, including uploading a reference image

● List of ‘similar styles’ after an image aren’t similar

● Project section is strange

● No feature to see who the artist likes

● No story feature

● No recent upload feature, account could be dead

● A lot of features - confusing

● App favours artists that are part of a studio

● Price range may put people off

👥 Persona

I created a persona from the user research and interviews. The persona embodies the key points from user research and affinity mapping, and was created for me to constantly refer back to in the design process.

From the persona I was able to initiate problem statements (below).

Bo Persona.png
Screenshot 2222023-06-20 at 15.09.09.png

Bo needs a a way to find affordable yet high-quality tattoo options, because their budget restricts their ability to get the desired tattoos that reflect their creativity and individuality.

Screenshot 2222023-06-20 at 15.09.09.png

Bo needs a a way to efficiently research and select trustworthy and talented tattoo artists who are nearby, because they find the process of finding the right artist overwhelming.

Screenshot 2222023-06-20 at 15.09.09.png

Bo needs a a way to connect with a supportive and like-minded community, because they desire social connection and a sense of belonging, where they can share their passion for body art, music and social justice causes.

📁 Information Architecture

CARD SORT

In order to uncover how intended users expect to see content and information on the app, I conducted an open card sort with 35 cards and 3 participants

Below is an example of a card sort done by one of the participants.

The results showed similar differentiation in categories with key groups being style, technique, theme and placement.

card sort no box.png

BASIC SITEMAP

sitemap.png

🧠 Wireframing & Prototyping

After collating all research findings, I created basic wireframes of three interfaces. From these I developed a low-fidelity prototype.

Screenshot 2023-07-10 at 20.26.47.png
Screenshot 2023-06-20 at 15.09.09.png

ANNOTATIONS

HOMEPAGE DISPLAYS OTHER USERS WHO
M
AIN USER FOLLOWS IN CHRONOLOGICAL
ORDER OF POSTING

TOP LEFT - LOGO

TOP RIGHT - NOTIFICATION ICON, DOT INDICATES USER HAS NOTIFICATIONS

LOGO SLIGHTLY OVERLAYS

FIRST IMAGE BELOW

TOP WHITE BAR DISAPPEARS
WHEN USER SCROLLS DOWN BUT

LOGO AND NOTIFICATIONS STAY

USER CAN CLICK TO EXPAND/READ DESCRIPTION

DESCRIPTION BOX, LIKE AND SAVE BUTTON APPEARS FROM THE BOTTOM OF THE POST AS USER SCROLLS DOWN AND IT NEARS THE TOP

HOVER
TO READ!

Screenshot 2023-07-10 at 20.30.54.png
Screenshot 2023-06-20 at 15.09.09.png

ANNOTATIONS

TOP LEFT - BACK TO FEED

TOP RIGHT - FILTER OPTIONS
THIS IS WHERE THE USER CAN FILTER
BY LOCATION, TATTOO THEME, STYLE,
TECHNIQUES ETC

EXPANDABLE MAP

FIRST ALGORITHM RESULTS BASED ON
FOLLOWING, LIKES AND SAVES

FILTER RESULTS WHEN APPLIED

MAP AND SEARCH TO

DISAPPEAR ON SCROLL

Screenshot 2023-07-10 at 20.31.06.png
Screenshot 2023-06-20 at 15.09.09.png

ANNOTATIONS

TOP LEFT - BACK TO FEED

TOP RIGHT - SETTINGS

TOGGLE BETWEEN

PROFILE
(user’s own posts of their tattoos/them
getting tattoos etc)

OR

COLLECTION
(user’s public and private saved posts and
folders)

gradient box.png

FINAL PROTOTYPE (INTERACTIVE)
Try out the interactive prototype! 

Key interactions are:

  • Like/save photo

  • Search - filter, map

  • Profile - collection - toggle private/public

🤳 Usability Testing

To test the current prototype, I conducted usability tests with 3 participants. The goal was to see how quickly the user is able to pick up the app and how easy it is to navigate. I conducted the test using the users own phone for familiarity, whilst screen recording.

After introducing the test, I asked the participants to first describe what they were seeing, if anything stood out and if there was anything they were drawn to tap/click on.
I then used
task-based scenarios which directed the participant to the interfaces.

320600f9-0e73-48be-a8d1-ae8753c11ea0.gif

YOU'RE THINKING OF GETTING A TATTOO, AND WANT TO VIEW YOUR PRIVATE COLLECTION FOLDERS TO SEE WHAT YOU'VE SAVED

 Success Rate: 
 

3/3

participants successfully completed this task
 

2/3 participants navigated straight there, with one being initially confused by the top left logo on the homepage. One commented it was different to finding saved images on other apps, but they preferred this way

arrow.png

RECOMMENDATIONS

Potentially have access to 'collections' on the homepage

"In other apps the saved images are more hidden, but this is good because you can see upfront. For example, Instagram has the hamburger menu you go to to see saved images which is a longer process"

"I think it should have a button where if you’re in your folder there is a ‘show similar images’ option"

YOU'RE LOOKING FOR INSPIRATION FOR A NEW MINIMALIST TATTOO OF A CAT FROM AN ARTIST YOU DON'T ALREADY FOLLOW. OPEN THE APP TO BROWSE MINIMALIST CAT TATTOOS

All users began the task with the explore button, and every user attempted to press the search bar multiple times, causing frustration

arrow.png

60% of users never found the filter button

2b2a3619-57fb-4f7c-9030-e04ecbf74d6e.gif

 Success Rate: 
 

1/3

participants successfully completed this task
 

arrow.png

RECOMMENDATIONS

Get rid of the filter button and move the filters so they are part of the search feature when clicking the search bar

"I don’t think this is working. I’d go up there [to the search bar] and type minimal cat design"

‘I’d assume there’s a filter option in the search bit.’

bbd6caf9-d765-4bc4-91d5-a88e9508f9ee.gif

 Success Rate: 
 

3/3

participants successfully completed this task
 

YOU WANT TO POST A PHOTO OF A NEW TATTOO YOU'VE GOT

60% of participants were hesitant to click the camera button

arrow.png

RECOMMENDATIONS

Change the camera icon to a plus sign, or the plus could be at the top instead of the logo to draw more attention to it

"I was expecting the button to be a plus sign like other apps do when you're adding a new post"

View another project?  Mouse & Grape   Other Work

made by Rachel 💗

bottom of page