UX / UI | Competitive Analysis | Interviews | Surveys | Affinity Mapping | User Personas | Journey Maps | Content Auditing | User Flows | Sitemap | Low - Mid - High-Fidelity Wireframes | Prototypes | Mockups | Usability Testing
Sketch | Invision | Principle | After Effects | Optimal Sort | Google Drive | Photoshop | Realtime Board | Balsamiq | UsabilityHub
Tattoo regret is real - but has it been considered when creating a tattoo search experience? With all the noise and online information, choosing the proper artist for such an intimate, emotional, and permanent experience can feel overwhelming.
my|parlour is the first application that empowers the user by personalizing the search as much as the tattoo itself. my|parlour aims at mitigating tattoo regret by making the user a more knowledgable consumer. It does so by identifying their tattoo style and connecting the user to local artists and tattoos based on that style.
Kat Von D
My goal with this project was simple - mitigate tattoo regret. I believe this can be achieved by empowering the user to discover their style and personalizing the search experience based on that style with the intent of connecting the proper artist to the appropriate client, quickly.
My high-level goals were to:
I gathered information about the competition to forecast the potential in the market. Several direct and analogous competitors were analyzed. Direct competitors included various existing mobile tattoo search engines, while the analogous competitors consisted of social media outlets (Instagram and Pinterest).
Analysis methods:
Learnings
My analysis revealed potential opportunities in the demographic of first-time tattoo clients. Existing applications and websites are heavily focussed on the general culture of tattoos, but not on educating a new user based on their style. This lack of clear focus in existing tattoo search engines presents a unique opportunity.
In addition, I learned that certain apps currently functioning as a standalone service might be better and more valuable if incorporated into a broader (but still simple) solution.
During the exploration phase of my project, I conducted user interviews to get a better understanding of the problem. Also, exploration makes me sound so much cooler than I really am! I built off Jakob Nielsen's standards and the law of diminishing returns - choosing to complete no more than five individual moderated interviews. All interviews were recorded with participant consent. Interviewees were recruited using a guerilla approach and received no incentive other than my wit and grace. Interviewees were selected if they had one visible tattoo.
Open-ended Interview Prompts:
Learnings
Interview results were organized utilizing affinity mapping. While not shown here - it is pretty awesome. Just take my word for it.
Key takeaways from affinity mapping:
I created three personas using the interview results. I referred to them throughout the entire product development process. I admit that I also talked to my dog in the voice of the personas. She loves it!
Personas include the following sections: demographics, quotations, high-level theme, about, goals/needs, motivations, frustrations, personality, and favorite brands.
Learnings
All designers get stuck. Having developed central characters in the story helps separate me (the designer) from the user while embracing empathy over bias.
These personas (Devon is the primary) acted as a source-of-truth that invariably impacted the design by mitigating my personal bias. It kept me connected to the target user. The more detailed the persona and their story - the more user-centered I stay.
User personas were then used to create journey maps. The purpose of the journey maps was to truly empathize with how individual personas experience tangible scenarios.
Learnings
While time-consuming, the journey maps offered insights into new opportunities that helped me further connect the product to the user. A critical insight was the common ground of nervousness and shop selection based on location. Identifying this early allowed me to shift focus from creating a clean search experience to a simple guided search experience. I found myself asking - how can I make Drea feel more prepared and less nervous?
I utilized Optimal Sort for remote card sorting sessions. Optimal Sort organized results into a similarity matrix. This matrix shows the proportion of participants who grouped any two cards in the same category. For each pair of cards, the intersecting cell shows the percentage of participants who arranged these cards together.
Closely related pairings are clustered along the right edge of the table. The darker clusters act as a strong starting point to identify potential groupings.
Learnings
Clusters results revealed that I was heading in the proper direction. I know... I am impressed too! Additional attention will be given to search features moving forward.
Card sorting helped me organize both user flows and the sitemap. When working alone, I have found that creating user flows combined with the sitemap reduces the risk of error between documentation. Like all parts of this process, the user flows | sitemap are continually iterating based on the user needs.
Learnings
V 1 - V 4 of the User flow | Sitemap was too lean. Additional screens were added to account for Human Interface Guidelines. Specifically, the concept of always providing a clear path was overshadowed by focusing on limited interactions. I opted to give a clear path with additional interactions to help the user more easily navigate.
I created wireframes, ranging from sketches to high-fidelity, throughout the design progression. Iterations were made along the way based on feedback from colleagues.
Design decisions were based on familiarity and simplicity. I chose to utilize a neutral background to keep the focus on the tattoos and mitigate challenging color interactions between tattoo and background.
Research showed that most users garnered inspiration from Instagram and Pinterest. As a result, I chose grid layouts and scrolling to mirror common social media platforms.
The images below, from left to right, are progressive examples of my iterative process.
I very quickly created an initial prototype in Invision to start testing. I moderated five usability tests, both in person and remote. Included in my usability test script are demographic information, background, and the following scenario tasks:
You just started thinking about getting a tattoo and don’t even know where to begin. Using parlour, identify your tattoo style and tell me common body locations for that style.
For this project, I utilized several methods for testing. I find that as a team of one, this is the best way to mitigate as much bias as possible.
The following images outline the various methods:
Usability Testing | Rainbow Spreadsheet | Severity Ratings - I used my custom UX toolbox to analyze test results with maximum accountability and transparency. Actionable items are determined after affinity mapping analysis data is inputted into the Rainbow Spreadsheet. The information is pivoted and organized into the Nielsen Severity Ratings for Usability Problems scale (0 - 4).
Affinity Mapping - I utilized affinity mapping to help isolate concepts and organize information quickly. This process helped me visualize and discover previously unseen patterns and hierarchies.
Preference Testing - I created a preference test on UsabilityHub to further mitigate bias. I tested a few screens with ten potential target users based on age range. Also, I included a follow-up question of what did you prefer about this screen to gain further insights into user selection.
Usability test results revealed several ratings of 4 on the Severity Scale. Issues consisted of accessibility issues (specifically with typography contrast) to learnability/recall of onboarding.
Lower ratings consisted of quick fixes such as linking tattoo shop name in artist profile to external tattoo shop website to minor cosmetic inconsistencies. Next steps and solutions were organized and prioritized for the next prototype iteration.
Preference testing favored screen Intro 2 (white background) over IntroScreenV2 2 (full image background) by 70 percent. Specific feedback from testers included "full image feels less professional" and "the graphics and smaller image combined look more refined."
Solutions
Several more rounds of testing and iterating occurred. All tests were moderated and included groups of no less than five users in the target range. I continued to measure error severity using a 0 - 4 scale. As testing continued, additional insights rose to the surface. Quantitative results from preference tests that were statistically significant were addressed. Qualitative results that scored >= 3 on the rating scale were addressed.
my custom tattoo search experience. my|parlour helps you discover your tattoo style, empowers you with tattoo knowledge, and cuts through the noise of random searching by creating a search with purpose.
Let's see how my|parlour simplifies and personalizes the tattoo search.
The images on the intro screens are meant to represent a diverse group of users. I focussed on using large photos to make the experience feel more personal and intimate. Each screen has a different message that clarifies the app's intent as well as to empower the user. I placed a strong emphasis on the word my. Testing revealed that this created a sense of ownership for the user.
The messages are:
The heart of my|parlour is the DISCOVER MY TATTOO STYLE feature. The user is prompted to quickly select images that inspire them from a long curated list that is tagged based on style and color. When the user clicks Done, the app customizes the tattoo and artist search experience based on the previous images selected and shows the user their tattoo style, history of the form, example tattoos, and their color preferences. The new knowledge empowers the user by making them more informed and adds weight and meaning to their tattoo search.
The user now sees a personalized list of tattoos based on the results of DISCOVER MY TATTOO STYLE. Users can favorite tattoos for quick recall. Images are full bleed to allow for as much of the tattoo to show as possible.
I learned from my research that users often select a shop entirely based on location and not based on expertise or style. Here a user is shown both local and highly-rated artists in the user's style. This approach embraces the natural user tendency of shop selection based on proximity and makes the results relevant. From here, the user can quickly access needed information, review large pieces of work, and navigate to the shop website for more details.
Sometimes we need to think outside of the box. The user style does not constrain the search feature. As such, if the user does not discover an artist or tattoo in their defined style, they can search without limitations. Search results can be quickly organized through the defined filters of shops, artists, and tattoos.
Developing my|parlour was both a professional and personal journey. As a person with several tattoos, I needed to be mindful that I wasn't creating the product for me. I continually went back to the personas to remove myself from the process. In addition to the personas, I leveraged feedback from other designers not attached to the project. Their insights challenged my perceptions and resulted in a better and still developing result. After all, no one summits the mountain alone.
A personal victory was eliminating a service that didn't add anything to the MVP. I scrapped an augmented reality feature and opted for a more targeted and straightforward product. While the addition of the service would have been great, the ability to maintain it would have proven challenging. This service also would have overshadowed the heart of the product.
Specific areas of growth: