TattUp
About the Project
TattUp is a mobile app designed to help users get inspired, find, and book tattoo consultations with artists. The app focuses on an approachable and easy user experience.
This project was developed as part of the UX Design Certification Course through CareerFoundry.
I was responsible for all stages of the design process, including: research and analysis, wireframing, prototype, user testing, visual design, and branding.
Role
Research (Competitive and User)
UX/UI Design
Timeline
April - August, 2020
Tools
Adobe XD
Adobe Illustrator
Adobe Photoshop
Google Docs/Sheets
Optimal Sort
Survey Monkey
UsabilityHub
Pen and Paper
Defining the Problem
People searching for a tattoo need a way to find a style or subject matter that meets their personal needs, and a credible tattoo artist to help bring their design to life.
We will know this to be true when we see users collecting and saving images for inspiration, and then booking consultation appointments with tattoo artists through the app.
Solution
An app offering a straightforward approach in helping users search, find, share, and discuss their tattoo ideas with other users and tattoo artists.
Getting a tattoo is a very personal experience. Many people have preconceived opinions about tattoos and the people who get them, which can weigh-in on the decision making process. Tattoos are growing in popularity: “38 percent of adults between the ages of 18 and 29 have at least one tattoo,” and “people spend over 1.65 billion dollars annually on tattoos in the United States.”
Competitive Analysis
What is currently on the market? Who are our biggest competitors? How do we compare with the competition?
These questions, and others were analyzed and reviewed during extensive competitive analysis of Tattoodo and InkHunter. In addition to reviewing key offerings and objectives, a SWOT analysis and UX analysis was conducted for each competitor app.
User Interviews
Virtual in-person interviews and Survey Monkey surveys were conducted to gather initial interview responses and insight. This information was then organized by utilizing affinity mapping.
We were surprised to hear the same feedback from users: they are looking for familiar interfaces, there needs to be an element of trust/relationship, open communication, and they need to feel confident. Using these learnings, we developed two user personas: Amy and Jon.
User Personas, Journeys, & Flows
Meet Amy and Jon: our user personas.
Amy is a tattoo collector in search of her next tattoo. Her tattoos tell the story of her life’s journey.
Jon is new to the world of tattoo, and is looking to get his first tattoo. He knows he wants to get one, but can’t decide on what he wants. He is looking for the perfect design.
Amy
User Story: “As a user who is looking for her next tattoo, I’m looking for a design inspired by cosmetology, so that I can book a consultation with an artist.”
Jon
User Story: “As a new user, I want to browse through lots of image content, so that I can figure out which style of tattoo is best for me.”
Let’s design an app for Amy and Jon…
Sitemap
The first thing we need to do is to create a sitemap based on the users’ needs and journeys.
After a few card-sorting sessions, the sitemap was reworked. Test participants placed the cards in similar categories as the original sitemap, but variations emerged under the “My Profile” section. This exercise also lead to a modified “Artist” category, which has resulted in better organization of the category.
Now that we have a solid direction for the sitemap, we need to start thinking about how the app will look.
Wireframes
Low-Fidelity: Using pen and paper, the first wireframes were sketched out.
Mid-Fidelity: To further refine the interface, the low-fidelity wireframes were transferred into Adobe XD. Careful consideration was also given to how a user might start to navigate and interact with the app.
Time to test out the protoype.
Usability Testing
In order to validate the design, and to make sure we’re heading in the right direction, we need to conduct usability testing.
We studied how users interacted with the app, and performed specified tasks. Revisions were made to the prototype based on user feedback and observations.
Test Overview
Six participants; between the ages of 25-30.
Users were a mix of those who had tattoos, were looking for their first tattoo, or were unsure about getting a tattoo.
The tests took between 30-50 minutes.
Test Method
Mobile and Desktop usability tests via Moderate Remote Zoom video calls that utilized video recording/screen-sharing.
Goal
Identify any usability issues, inefficiencies, or pain points with the design of the app.
Findings
We were surprised to learn that the participants were all struggling with the same features and actions. For example, all users struggled with finding the “Invite Friends” feature, and were confused about how to navigate through the search options. These needed to be reworked as soon as possible, so that our personas, Amy and Jon, can have an easy time navigating and using the app.
"The [booking] process feels too casual for me; almost like I'm making an appointment to get a haircut. As someone looking for their first tattoo, I need it to feel more personal."
"Overall, [for the search] I want things to be more obvious, so I don't have to do any thinking."
"I'd like to be able to combine or search for multiple keywords at once, such as 'Dinosaur' and 'Watercolor' in one search."
Time to start refining the design.
Preference Test
Now that we know what users are looking for in the usability of the app, it’s time to start thinking about what it will look like. We reached out to 37 users through an unmoderated remote usability test via UsabilityHub. Users were asked for their preference in regards to the splash, login, and home screens.
Results
Home Screen: Option 1 was chosen for the home screen since it was cleaner and easier to read.
Login Screen: Option 2 was chosen because it related directly to content and use of the app.
Home Screen: Option 1 and 2 were tied, so the two styles were merged.
Time to refine the design, and create the style standards.
Design Language & Guidelines
The design language and guidelines for TattUp were developed with our user personas in mind.
Amy, who is already familiar with the tattoo world, is reminded of the tattoo world through the color, graphics, and fonts used.
Jon, who is new to tattoos, feels comfortable navigating through the app and subject category for the first time because the app draws from interfaces from other apps that he is already familiar with.
TattUp accounts for users’ accessibility. Color contrasts were checked for color blindness issues, and modified to eliminate pain points. Text-to-speech options were also added to search and input sections for users who are unable to type.
Now we have an app ready for Amy and Jon to use!
Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.
TattUp demo.
