STYLE GUIDE / PATTERN LIBRARY

Results & Findings

Data and feedback were collected and analyzed, establishing a list of the top 25 most important test results. Based on either high frequency or level of severity of these issues, I narrowed down the highest priority items that I needed to fix or address.

of participants complained filter option preselects for subject matter was too limited.

of participants experienced confusion when trying to navigate to find nearby studios from home screen.

Tattoo Filters

I’ve removed the preset subject matter items and provided a text field so user can be more specific when filtering.

Navigation

“Community” tab label has been changed to “Feed” to better represent the type of content that lives in this section.

Usability Test - Find a specific tattoo using filter options.

USABILITY TESTING

Method

Moderated in-person tests were conducted with six participants who were asked to complete three tasks. The participants were screened based on:

• People who regularly browse websites or apps to find tattoo inspiration
• 3 participants considered tattoo enthusiasts (heavily inked)
• 3 participants considered novice tattoo seekers (1 or less tattoos; in planning phase of getting tattoo)
• A mix of novice, immediate and advance levels of technical abilities

Task

• Browse tattoo gallery, using filters, to find images of tattoos on shoulders.
• Locate tattoo studios around you and view on the map screen.
• Book appointment with a tattoo artist that has been previously saved to your favorites.

MID-FIDELITY WIREFRAMES

Based on my initial sketches, I created a set of mid-fidelity wireframes. In doing this I was able to map out the bare-bones of the app, including some of the more subtle aspects such as element spacing/dimensions, identifying reusable patterns and setting the typographic scale.

SKETCHING

After gaining a better understanding of the product scope, I sketched UI components to capture the requirements allowing me to quickly evolve and iterate on ideas.

INFORMATION ARCHITECTURE - SITE MAP

Taking into account Valerie, Sophie and Enrique’s goals, I created a list of content and features. I then conducted an open card sorting exercise where participants were asked to categorize and label the content as made sense to them. The data collected was key to forming the navigation system.

USER FLOW

Users flows were created to help me focus on what screens needed to be produced and in what order so that my personas could reach their respective goals with ease.

JOURNEY MAP

Based on findings and the personas, I created two experience maps. The first experience map shows a persona’s current journey planning a tattoo. The second experience map shows their journey with suggested solutions.

PERSONA

From the insights obtained from the interviews, surveys and informal observations, three unique personas emerged.

• Valerie - The “Vigilant”, a cautious researcher
• Sophie - The “Spontaneous”, a spontaneous/early canvas/low-informed researcher
• Enrique - The “Enthusiast”, a vigilant/experienced canvas/high-informed researcher

Key Insights

• New tattoo seekers are unsure of where to begin the process of getting a tattoo (i.e.; what are the common styles of tattoos, what should one look for in picking the right artist, how to communicate ideas to the artist).
• Tattoos are permanent, the threat of regret can cause people to delay or never move forward with getting the actual tattoo.
• Finding a good artist based on specific needs or criteria can be challenging with current technology based tools.

Key Experience Principles

• Arm the tattoo seeker with information that can help guide their journey to finding and getting a tattoo.
• The ability to “experiment” with a non-permanent tattoo would allow for a person to see how a tattoo design would look on them and where on their body it looks best.
• Provide tools for locating artist and studios that offer both simple as well as advanced search options.

USER INTERVIEWS & SURVEYS

Before diving into the features and the overall UX of my app, I conducted some user interviews and surveys to gain a better understanding of challenges a user faces when going through the tattooing journey. These are some the key take aways from those interviews:

COMPETITIVE ANALYSIS

The competitive analysis involved gathering important data about the competition - their market position, market share, prices, additional services, strengths, weaknesses, to identify opportunities and threats.

Two major technology-based resources were identified as competitors; Tattoodo for their vast curated collection of tattoo designs, images and articles; and Inkhunter for their advanced AR technology that allows user to project tattoo designs in real-time on any part of their body. I also identified Instagram as a tertiary competitor.

TATTOODO

Things they do well

• A single source for discovering, collecting and sharing inspiration from a massive curated collection of quality tattoo images
• Connecting tattoo seekers and artists through an online community of over 30 million users
• Alignment with well renowned tattoo artists worldwide

Opportunities

• A better onboarding for novice tattoo-seeker
• Incorporate the ability to connect with artist of tattoo designs that show up in users search results.
• Providing featured events going on based on user’s local
• Incorporate the use of AR

INKHUNTER

Things they do well

• Innovative AR technology that allows the user to try on tattoo designs in real-time
• High rating and great reviews on app store as well as great press coverage
• Easy and intuitive interface design

Opportunities

• Create a social platform to connect tattoo enthusiasts
• Build in ability to locate tattoo shops, and advertise tattoo events, etc.
• Connect seekers with artists to get custom tattoo designs

PROJECT OVERVIEW

CONTEXT

Tattoos are increasing in popularity in the United States. Research data shows that 47% of Millennials, 36% of Gen Xers, and 13% of Baby Boomers (30% overall) in the US reported having a tattoo. With the increase in people getting tattoos there is also a greater chance of “tattoo regret”; it is estimated that one-third of people regretted (at least one of) their tattoo(s).

CHALLENGE

In my research, I found people usually plan and research tattoos prior to getting one. While tattoo information is widely available on many different platforms that include social networking sites, blogs, and apps, there is no single resource available that helps people plan a tattoo from start to finish. Research challenges include finding the right style of a tattoo, finding an artist/tattoo shop, and booking an appointment with an artist.

SOLUTION

Using the user-centered design approach, create a product in the form of a  single source  technology-based tool that will help a person learn about and choose where and by-whom to get a tattoo they will not regret.

MY ROLE

The Inkzplorer app is a project I worked on while completing a UX Design course through CareerFoundry. I worked on market research, user research and evaluation during all iterations of the product’s development.

SKETCH > WIREFRAME > MOCKUP

Always validate design assumptions with users, early and often.

Designers often know “too much” to make good assumptions about the product or the user. Testing my iterations early and often with real users kept me in check and in constant exploration of the possibilities.

Breakups are hard.

Sometimes one of the bravest decisions a designer can make during a project cycle is scrapping a feature that seems so innovative from a design stand point, but in the end never translates to the user understanding the feature.

NEXT STEPS

Complete the desktop responsive version of Inkzplorer app considering 93% of users surveyed use mobile and desktop when researching tattoos, of that 93%, half use desktop.

LOW-FIDELITY PROTOTYPE

I initially sketched out three user flows to see how it would translate to actual screens. These sketches were later translated to mid and high fidelity prototypes used for early usability tests.

Exploring tattoo gallery using filter option

When designing the interactions for exploring tattoo inspiration, I provided Valerie with the category-based browsing to guide her through the discovery process, while giving more surefooted tattoo-seekers like Enrique a search option to find what he wants more directly.

Booking appointment with artist

When designing the interactions for the booking feature, I used progressive disclosure (selecting date first will reveal the available times) to prioritize the steps needed, guiding Enrique to successfully booking his appointment.

Searching for a studio

When designing the interactions for searching studios, I provided Valerie, Enrique and Sophie the ability to refine their search based on their current or preferred location with the option to view the studios in map view.

SOLUTION HIGHLIGHTS:

• Ability to search or filter tattoos based on style and subject matter.
• Ability to search for artist based on style, subject matter, specializations, location, and availability.
• Display ratings and reviews of the artists or studios.
• Having access to the artists' availability and booking appointment capability.

MORE PROJECTS TO VIEW