Mean Street Tattoo

Overview

With the growing acceptance of tattoos within the workplace, and within society at large, customers are increasingly looking to book appointments with shops that are inclusive and easy to communicate with

Problem

How to create a modern website with a focus on increasing client engagement?

Solution

Create an updated style guide and UI kit, provide a clear information architecture for the site, drive clients to view each artist page, and embed a consultation form on the website.

My Role

UX Research
UX Design
UI Design

Team

UX designer - Myself

Web Development

Zbigniew Zelga

Project Background

Mean Street Tattoo is a tattoo shop located in Brooklyn, NY. The shop's contracted web developer has agreed to collaborate with me to update the current site.

Project Planning

I used Notion to get set up for my design project. Having a solid organization was essential in maintaining a tight schedule. Within Notion, I provided myself one week for each UX design phase while still giving myself time to ideate and reflect on the work I completed in the previous phase.

Project Duration

May - June 2021

Research

Looking at the analytics

Users might not be obtaining the information they need when visiting the website.
‍
The current site is not designed in a mobile friendly way.

Most users are accessing the site from Yelp or Google
70% of users are viewing on mobile
The current site has a 63% bounce rate with an average duration of 51 seconds per user session

Google Analytics shows sessions by device: Mobile 70%, Desktop 29.5%. Additionally, it provides bounce rate and session duration over time.

Learning from potential users

I met with five individuals interested in getting a new tattoo, to find out what users wanted to know before booking an appointment, as well as to see how they would interact with the current website. 

The interviews were conducted over Zoom and included a contextual portion where participants screen shared their navigation of the website.

What I learned during the user interviews:

Users are primarily interested in seeing the tattoo artist portfolios
Users want to learn more about a tattoo artist's personality before booking for an appointment
When communicating with the tattoo artists, all of the users I interviewed preferred using email or Instagram over directly calling the tattoo shop

What I learned during contextual interviews:

Users felt the current website looked outdated
Users were unsure of how to contact the tattoo artists or the shop itself
After viewing the website, users felt unsure about requesting an appointment

The Power of Instagram

From speaking with these users, it was clear to me that they didn't sense this feeling of comfort or trust in Mean Street Tattoo based on the website's current design.

Captured here are a few of the comments some users said about the current website during the interviews.

All of the users I interviewed said that they start their search for a tattoo artist on Instagram
If the artist's profile didn't include a link to the shop, they would then do a Google search for the shop itself
The intention here was for the users to figure out if they'd feel comfortable booking an appointment at this shop, specifically with the artist whose work they had viewed on Instagram

User Persona

During the interviewed, I uncovered several insights that resulted in two distinct personas, Jade and Shawn.

Jade

An client who is very spur-of-the-moment and prefers walk-in appointments

Shawn

Shawn prefers to plan things out and is OK with booking an appointment in advance.

Image of jade with text The walk in client Jade has a speech bubble over her saying "I would like to find a competent artist who can help me realize my concepts." About: Jade has a few tattoos from different artists and shops. She enjoys having a tattoo that represents herself, or of a trip she went on. Jade will do a quick research of a shop on google and quickly decide if the shop suits her needs. She wants to make sure the shop is safe and clean before she makes contact. She's had a bad tattoo experience previously where the communication between the artist and herself was off. Because of this, she went to another artist for a cover-up. She cares about who the person is doing the tattoo and if they are skilled & talented. Goals: Find a shop close by to her, Have trust in the tattoo artist, View the artist portfolio quickly on mobile, Discover if the shop is safe & clean, Understand the artist turn around time & walk-in policy Frustrations: The site not being mobile-friendly, Having to wait long for a tattoo appointment, Not understanding the walk-in shop policy (will an artist be available when I show up), Being unable to take the subway, Having difficulty finding parking near the shop, Not knowing how much to tip or what payments are preferred

A deeper dive into Jade's thought process before getting a tattoo

Since the shop was interested in increasing same day appointments and consultations, I created an empathy map for Jade to gain more of an understanding of how she feels throughout the process of obtaining a new tattoo.

Empthy map of Jade with text - Says: I want to get a tattoo on my trip to NYC, I have a photo of the tattoo to show the artist, Let's get tattoos today. Does: Reads review information about the shop online, Looks up tattoo shop online, Looks at artist portfolios. Thinks: I walked by a tattoo shop the other day, Is the shop clean and safe? Do I like the artist in the shop? Do they take walk-ins? Will they be able to give me what I want? Feels: Excited, looking forward to getting a tattoo, Nervous, is the tattoo going to come out good? Happy, the tattoo came out better than I thought.

Define

Weighting the User Goals

Before starting to define the project, it was important that I take the time to process the user needs along with the business goals.
‍
With feedback from the web developer, the technical considerations were also discussed.

Comparison chart with text: User Goals -See positive reviews, See high-resolution photos, How to start the process of booking the appointment, Know the tattoo artist's preferred contact method, What forms of payment are accepted, Be informed about the shop's location (is it easy to get to), Be aware of how far away is the shop, Know who the artist is. Business Goals: Increase number of walk-in clients, Wants clients to be happy & feel safe, trusted, Wants to be able to educate their clients about the tattoo process. Technical Considerations: Update to a modern hosting plan (current setup is ten years old). User goals & business Goals: Trust, Happy, Safe & Welcoming. User goals & technical Considerations: Confirmation email, Email contact form implementation. Technical Considerations: Update photos easily, Create a backend form to upload photos. Usergoals, Technical considerations & business goals: Mobile-friendly website

User Flow for Jade and Shawn

It was important to develop the user flows for both personas since it was uncovered that many users view a tattoo artist's work on Instagram before booking an appointment.

Developing the Information Architecture of the Website

A list of requirements for each page of the website was created alongside a site map, to best discover what needed to be on each page.

An About Us page with the tattoo shop's history, along with more details about the shop's practices and policies
The individual Tattoo Artist pages which would include a photo gallery, consultation request form, and their Instagram feed
A Visit Us page with Google Maps integration, and some curated information about places to check out in the tattoo shop's surrounding neighborhood

Design

Mobile-First Design

It was essential to design for mobile before moving on to larger devices, since analytics informed me that 70% of visiting users were accessing the site from their mobile devices.

Creating the UI

Taking inspiration from Mean Street Tattoo's current shop logo, I put together a UI kit to support the redesign.

Putting it all together

The final design for the tattoo shop drives users to view the artist portfolio pages, and allows them to easily book a consultation
Users are still able to call the shop directly, and are prompted to do so for booking same-day appointments
Users can easily find contact information, the tattoo shop's location, and directions to get there

Putting it all together

I've captured some of the key changes I incorporated into the website's redesign.

Validate

Testing out the design

I met with five users to conduct usability testing.

Success!

All users were able to easily navigate to the form to request a consultation with one of the artists
All users were able to quickly locate the shop's location details
Several users stated that they would be interested in scheduling an appointment after viewing the tattoo artist portfolios
All users expressed that they felt comfortable booking an appointment with the tattoo shop
When I asked users to book a consultation, a few of them navigated to the Contact Us page instead of using the consultation forms on the tattoo artist profile pages

The revisions I made

During the test, I noticed several improvements that could be made to the overall look of the site, such as minor adjustments to the padding and content alignment
I made minimal changes to the visuals of the design after the usability testing concluded
I added a link on the Contact Us page to redirect users to the consultation form

Summary

The website for Mean Street Tattoo is currently awaiting implementation of the designs shown in this case study.

Measuring the impact

Some of the metrics we'd want to track once the redesign is launched:

Has the bounce rate dropped below 50%?
Have the number of booked consultation increased?
Have the number of walk- in appointments increased?

What I leaned

Keeping the website's style simple was vital to creating a user-friendly experience that prioritized the work of the tattoo artists.
Breaking up information helps users acess what they are looking for much quicker.
User make quick decisions on weather they want to engage with a business based on how their website looks.