Problem
It really sucks when your tattoo did not turn out as what you expected. Many users experience regret after getting tattoos as a result. Therefore, the challenge was to create a solution that aligns their expectations with the artists. Virtual tattoo preview tools already existed on the market for a while, but why do users still have regrets? What is a new solution that can give more control to tattoo lovers in the tattoo design process?
"Many people experience regret after getting tattoos."
Tools/ Sketch, Invision Studio, Adobe XD, Balsamiq, paper, pen
Role/ Research, UX/UI Designer, usability testing (solo project)
The Opportunity
Hypothesis: A tool that aligns users' expectations with artists by letting them be more involved over the entire design process, will build trust with the artist and reduce the chance of regret.
How?
> A customization feature allows users to modify pre-loaded tattoos (with artist's permission) using simple drag-and-drop.
> Detailed filters addressing factors unique in the tattoo world to facilitate artist search.
> Direct messages with artist over design details for easy collaboration.
Tailored Recommendations
Whatever your budget is, wherever you live, whichever style you favor, we’ve got you covered.
Tattool uses your location to recommend local artists. Browse different artists from different price range and styles.
Comprehensive filters help to further narrow down choices, helping you find the best-valued artists.
Customize pre-loaded designs
Customise artists designs to your liking with artist’s permission.
Pre-loaded designs don’t always feel perfect. Change the text to something meaningful to you. Rearrange images until it feels perfect. Communicate and collaborate with artist with your edits instantly.
Direct Messages with artists
Instantly get a quote and feedback from artists.
Message artists directly to collaborate.
Your quote is given directly by the artist, so no surprises later.
Book with accurate quote, no surprises
Pre-entered details including style, color, size, and placement. Attach reference images.
These information will be used by artist to give you a realistic and accurate quote, just show up on your booking day and get your favourite tattoo. Everything is taken care of.
SUMMARY
RESEARCH
I started the project with research using a few different methods: competitive analysis, online surveys, interviews, and card sorting.
COMPETITIVE ANALYSIS
First, I looked into the market and found some inspirations and pain points in similar products.
I found that:
1. It is great that users can upload their tattoos. There is an opportunity also to integrate Instagram with their profile pages so they can easily share their designs with the artist to collaborate.
2. Asking users to book an appointment as soon as possible before users are ready might annoy users. Users need to breath and look around before making a decision.
3. Being able to browse and book an artist in one flow is convenient for the users.
4. Allow first-time users to explore without having to sign-up or register, only ask to register when users want to book.
5. Use filters to effectively help users find what they need.
Thus, my app must avoid being pushy, and should allow unregistered users to browse and explore until they want to book. Browsing and booking should be one smooth flow.
SURVEY
I asked the same questions in an online survey before using them on interviews to understand some general trends.
Online Survey, Survey Monkey
Summary
Concerns
> Style
> Artist reviews
> Years of experience
> Price point
> Connecting with other tattoo enthusiasts play no or little role in helping users make decisions about their tattoos - Why?
Needs
> Search and display tattoo in different styles
> Recommend artists
> Show virtual tattoo on their bodies
> Interviewees seldom or never regret their tattoos (contrary to data)
Conclusion
Since I included both people who have tattoos and people who don't (and are not ready to get any soon) in order to survey a broader sample, my survey data might be skewed. For example, interviewees who have no tattoo may never regret getting a tattoo because they don't have anything to regret. Also, those same interviewees might think that virtual tattoos are useful while experienced tattoo lovers might have a higher standard of how useful virtual tattoo preview is. Through my survey, I learned that I need a more focused target user group to get more meaningful data. Thus, I chose to focus on experienced tattoo lovers for interviews.
User Interviews
The interview questions for tattoo lovers are the same as the survey questions, but I was able to adjust my recruitment criteria to target my audience better through the interviews. For the interviews, I also recruited tattoo artists.
Photo Permission Granted by Participant
Insights from lovers
> Tattoo are reminders for something worth remembering; they are symbols with personal meanings.
> Users will sacrifice travel time and price to get the tattoo they want.
> Experienced users have higher standard of whether a tattoo “fits” and think that the virtual tattoo "does not work well."
> They would like to be more involved in the design process to build trust with artists.
> Interactions with the artist is essential to build trust.
> Some users want to create their own tattoos.
Conclusion
Although experienced tattoo lovers don't tend to regret tattoos (most of those who regret were people who were new to tattoo), their knowledge and expectations of the tattoo world is equally applicable to new tattoo seekers. The main theme that ran through the interviews was TRUST. Tattoo lovers, old and new alike, are yearning for a certain amount of trust with the artist to feel comfortable and satisfied.
Insights from artists
> Artists strive for quality over quantity in their business.
> Artists prefer clients (new or returning) to come in with expectations from research that is realistic.
> Artists think virtual tattoos gives people an unrealistic expectation, and might make users regret more.
>. Artists are cautious about putting their work online because they are afraid of getting copied by others.
Conclusion
Artists need a secure way to distribute their art work without losing their intellectual property.
Artists need the users to come in with realistic expectations.
STORY BOARDS
Current User Journey
New Use Journey with TATTOOL
FEATURES
1. SketchBoard: From my analysis using data from user interviews, many tattoo lovers like to sketch/create their own tattoos because they are very personal.
2. Browse & Search Artists: From the research, I learned that users have a lot of concerns when they pick tattoo artists including style, price, reviews, years of experience, etc.
3. Set Artist Profile Private: From the artist interview, I learned that most artists have limited exposure of their art work currently because they are afraid of putting it up on the internet and getting copied. They need a way for to easily toggle between private and public mode, allowing artists to reach more new clients.
INFORMATION ARCHITECTURE
Before diving into the design process, I drafted out the information architecture, starting with the website, then picked out the essential items to be on the mobile app.
My initial idea is to organize artist pages and tattoo images under "book,"
The "get inspired" and the sketch feature will be separate categories.
Information Architecture Map Draft
Card Sorting
A screenshot of a user arranging cards in his/her own way.
Looking at the data, I noticed that people tend to think of engaging with artists (looking at their details, work samples, etc.) as part of the booking process. That confirms my assumption that users tend to expect to be able to book right from the artist's page. Users also seem to expect to directly message artists right at the artist page.
Another pattern I observed was that users expect everything related to themselves -- be it their own sketches, their profile, or their favourite tattoos to be all under the same category--a broader “My Tattoos” category. That helped to simplify the site navigation structure by eliminating previous categories such as “Get Inspired” and “Sketch.”
Card Sorting Conclusion
> Users want a simple interface.
> Users tend to want items related to themselves to appear at the same place, even though the items require completely different tasks and interactions.
> Booking and tattoo articles appeared to be distinct categories in users’ minds.
> Users expects to be able to talk to and book artists directly from the artist page, so access links to booking and messages are added under artist page.
Finalized Information Architecture : White thick borders highlight groupings inspired by card sorting.
DESIGN
LOW-FIDELITY
Sketches and Wireframes (App)
After confirming the idea of the three features, I used hand sketch to quickly test the flow of each feature, staying low-fidelity, as shown below:
Feature 1: Sketch board
Feature 2: Browse and Search Artists
Feature 3: Set Artist Profile Private
Then, I used Balsamiq to create some quick low-fidelity wireframes of each of the three features.
I took the "mobile-first" approach with TATTOOL. The three features deemed essential in mobile was then implemented on the website design as well, with added details thanks to the larger screen real estate.
Sketches and Wireframes (Desktop)
Feature 1: Sketch Board
Feature 2: Browse and Search Artists
Feature 3: Set Artist Profile Private
Initialization Process (App Low-Fi)
With some ideas for the three core features, I sketched out two different ideas for the initialization steps to guide my target audience to use these features.
Idea One - Swipe / Click Through
Idea Two - Coach Marks
Intialization Process (App Mid-Fi)
Initialization Process (Desktop)
For desktop, I opted for a persistent explanation of main categories, so that it creates a safe “blanket” that is always there when the user needs. Coach marks are used progressively as users arrives on relevant pages or click on relevant buttons.
MID-FIDELITY
Wireframes (App)
Feature 1: Sketch Board
1. Bottom tabs for direct navigation between menu items.
2. Highly accessible to right thumb and highly visible "+" sign signals sketchboard location.
3. Save finished sketches directly on the sketchboard page.
Feature 2: Browse and Search Artists
1. Adjust filters right on the search result page
2. Filters include cities, ratings, and price.
3. Option to search artist's name directly (for returning customers)
Feature 3: Set Artist Profile Private
1. Option to set artist page private
2. Option to undo / revert
3. User permission is needed
Wireframes (desktop)
Feature 1: Sketch Board
Feature 2: Browse and Search Artists
Feature 3: Set Artist Profile Private
At this point, I opted to do user testing to validate my hypothesis, so that errors can be corrected early on with low cost. I moderated user feedback sessions with 5 tattoo lovers and 1 tattoo artist. All 5 tattoo lovers have previously gotten tattoos and or will consider getting one in the future. Half of the tests I conducted in-person at their home or workplace, while other half was conducted remotely using GotoMeeting. The test included:
1. A short briefing about the app and assurance that they cannot do anything "wrong."
2. Describe general task, let users use the app while thinking aloud
3. One task at a time, describe 3 specific tasks, set up each context, and let users use the app while think aloud.
4. Ask any follow-up questions and thank users for his/her time.
ANALYSIS
Classify data into 4 categories - errors, observations, positive quotes, and negative quotes.
The data shows that task 3’s mean time was the most accurate representation of the population in the task (lowest standard deviation). Task 3 is the search artist feature, average completion time is 9.5 seconds. The success rate is 100%, although user perceives the task to be quite difficult (3).
Task 1 and 2 are the tasks with the second highest success rates (80%). Although in task 2, users spend much longer time to complete and think this task is difficult (2.2).
Task 4 - share sketch with artist is the task with the lowest success rate and takes the longest time.
Other than testing with metrics, I also did a post-study follow-up session with each participant, understanding their ideas and opinions on the app, as well as suggestions on making it “better” for them. I compared the results of this behavioural study and the attitudinal data I collected from the follow-up session to determine how I should improve the product design.
Lastly, the customer effort score is obtained by asking participants one question after each task, "How difficult or easy did you find the task?’ Then, have them rate it on a 1-7 scale. Users think that task 1,4 and 5 is the easiest to use, while task 2 and 3 are more difficult.
DISCOVERIES
1. Logo did not remind users of tattoo.
What I did...
> Re-design logo integrating more tattoo lettering and aesthetic.
> Use a different name for the app to avoid invoking negative vibes with the word "INK."
2. Share button on booking confirmation page
What I did...
> Insert share button immediately after user booking on the confirmation page.
> Place the share icon on each image in user’s folders, so he/she can share with his/her selected artist a specific drawing or design even without booking.
3. Upload button is confused with share functionality.
What I did...
> Used a different icon for upload.
> Upload icon is needed as one of the main tab menu items for easy access.
4. Most users were misdirected towards the the hamburger menu.
What I did...
> I eliminated the hamburger menu and the "tattoo" tab, and added a tab for "setting."
5. No enthusiasm for the sketching feature, prefer customization.
What I did...
> Instead of a feature for searching inspiration and sketching on the app directly, allow users to customise pre-loaded designs using drag and drop.
6. Filters for consultation fees or deposit, charge per hour or per piece. User wants to receive a quote immediately after booking.
What I did...
> Added "consultation fee" and "deposit" filters in the "price" section.
> Let artists provide estimated quotes to users through messages and notification systems.
> As the number of filters increased, I put them on a separate page from the artists result page to not clutter the interface.
7. Folders in the profile page was confusing. Users prefer to see tabs and be able to scroll down to see all images.
What I did...
> Instead of individual folders, I use tabs, so that when tapped the page does not reload to a new page but simply change content. Users can now browse all their saved sketches, tattoos, and inspirations all in one screen, causing less confusion.
8. Users want to see how popular an artist is.
Users feel heavy to tap on "book" immediately from the search result.
Users want to see work samples right from the search results page.
What I did...
> Eliminated the "book" button on the search results page. User will only have to decide whether to book after he/she has read through details and work samples of the artist.
> Added scrollable work samples of the artist on the search results page so it helps users to select and eliminate artists more efficiently (without having to click on each artist to see work samples).
> Added a "popular" tag on artists' cards in the search results page as well as in the artist page.
9. Show currently booked artist under current booking and in messages.
What I did...
> To help remind users whom they just booked, I added a "booked" tag next the artist's name whom user just booked, as well as a tag in the message window with that artist. This will help reduce user's cognitive load.
PREFERENCE TEST
Before the next iteration, the issue of the logo is a big one that ought to be addressed. Although I know that users/ artist do not like the name "inking," I still have little sense of what users expect in the logo. I decided to do a preference test to test different logo ideas after the usability test.
In this test, I tested 6 versions of the splash screen.User showed a slight preference for version C. Users feel that logo is more neutral, without determining what kind of tattoo design one will find in the app. 14 participants participated.
ITERATION TWO - VISUAL DESIGN PRINCIPLES
In the next iteration, I further developed the prototype in alignment with the Gestalt Principles and the Visual Principle of Design, starting to add color, branding, and other visual principles to the app.
Login Screen
Artist Search Results
Saved Sketches
ITERATION THREE - ACCESSIBILITY
Text Input Fields
Error Identification
Reduce Cognitive Overload
FINAL MOCK-UP
FEATURES ARE MODIFIED TO REFLECT INSIGHTS FROM RESEARCH
FEATURE 1 - CUSTOMIZE TATTOOS
FEATURE 2 - BROWSE AND SEARCH ARTISTS
FEATURE 3 - DIRECT COLLABORATION
VIDEO PRESENTATION
FUTURE STEPS
More accurate and industry-specific filters
There are a lot of nuances in the process of getting a tattoo. My research in this project have uncovered many facts that are normally unknown to people outside the tattoo world. For example, a user told me he'd like to know, on top of the price per hour, if the artist has consultation fee or take deposit. Some other users mentioned that it'll be great if the app can return a quote as soon as they've finished booking. That means the filter is a really important part of this process. The more accurate and detailed the filter is, the more accurate the artist will be able to give a quote back, and the more both parties can anticipate what is going to happen in the actual session. This in turn builds trust. Future in-depth research and testing are needed to really get the filters right.
Tailor a version to both tattoo lovers and artists
Because of the time constraints in this project and the lack of tattoo artists in my network, I couldn't get enough artists volunteer to test the app. Chatting with one artist in the process also alerted me that tattoo lovers and artists really should have two different interfaces with different menu and tabs. I had to made a compromise to focus on the users only in this round and dropped the artist version right around the testing period.
However, as Tattool aims to be a tool for users and artists for connection and collaboration, it is essential for it to have both user and artist versions. In the next iteration, I will pay to recruit artists through third-party recruiting services in order to gain artist insights.
Notifications to users when artist "opens his book"
Many experienced tattoo lovers told me that it would be useful to get notified when a popular artist opens his/her book. This will be an option that artist can toggle in their artist profiles, where will be implemented in the artist version of TATTOOL.
Encouraging more reviews and ratings
TATTOOL's credibility depends on the frequency and accuracy of artist reviews written by users. To make sure users remember to leave a review after a visit with an artist, TATTOOL will push notifications to users to remind them to review the artist after they got a new tattoo. In the next iteration, I will also consider a rewarding interaction where users will be rewarded with the ability to change their profile pictures to different avatars, once they booked a certain number of bookings, or leave a certain number of reviews. Other similar rewarding interactions will also be considered and implemented as needed.
REFLECTION
Conduct user testing as soon as possible
From this project, I learned the importance of doing usability test as early as possible, even just with paper and hand sketched prototypes. The earlier I do the test, the earlier I can correct errors and steer the project to the right direction. I waited until after mid-fidelity to do the usability testing this time, and therefore wasted the extra time of building the first mid-fidelity prototype.
Usability test preparations
I encountered several challenges during usability testing. My laptop running out of battery in the middle of testing, participants’ phones not being able to screen-record because of the auto-lock function, the quicktime video recording doesn’t always work, etc. I overcome these challenges by learning from each failure and making sure it didn’t happen the second time, so my testing improved as I went.
Learn from other designers
I did not have any idea how to make the filters more legible and easy to navigate, and kept receiving negative feedbacks about them. I overcome that by looking at dribbble, issuu, and behance, and was able to get some inspiration outside of my little box.