STUDENT PROJECT
TAT-ed
App optimisation, user research, testing and prototype creation for a new tattoo app as part of a General Assembly project
👁️ Overview
🔍 Objectives
📝 Notes
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
'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
Tattoodo
Purely tattoo based
Save artwork in folders or equiv
Can book tattoo
Filter artwork by style
Search by location map
Can have flash section
PLUS/DELTA
Positives
● 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 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.
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.
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.
BASIC SITEMAP
🧠 Wireframing & Prototyping
After collating all research findings, I created basic wireframes of three interfaces. From these I developed a low-fidelity prototype.
ANNOTATIONS
HOMEPAGE DISPLAYS OTHER USERS WHO
MAIN 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!
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
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)
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.
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
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
60% of users never found the filter button
Success Rate:
1/3
participants successfully completed this task
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.’
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
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"