top of page
Group+8+2.png
A responsive website design for a local tattoo shop utilizing an intuitive client journey towards booking an appointment

Project Background

Making sense of the customer journey

Vicki is a tattoo artist based in Kentucky who is interested in optimizing her website to expand her business, Tootie’s Tattoos. She is an exceptional artist who offers a variety of styles including realism, portraits, line work, color, cover ups, and more.

Currently, she gains the majority of her clients through word of mouth and facebook. She is interested in growing and expanding her business by elevating and leveraging her website.

Challenge

Design a streamlined flow from viewing necessary information on the site to requesting an appointment.

In the past, Vicki experienced high volumes of bookings that were scheduled by the customer themselves without any information about the type of service booked. This resulted with Vicki having to reschedule appointments due to too much or not enough time allotted for the tattoo that the customer was looking to get done.

 

Additionally, Vicki wants to showcase her exciting, bubbly personality and family values as a tattoo artist in a professional manner.

Design Process

Discover

Research Objectives

1

Understand the client
  • Gain insight on their perspective and experience with seeking out tattoo services and receiving tattoos

2

Understand the user
  • Learn their expectations, pain points, and goals when visiting tootiestattoos.com and tattoo shops in general

Guiding questions for the research

What is the thought process of a visitor to Tootiestattoos.com?

What are the most important features and functionalities that users look for when visiting a tattoo website?

What are the current pain points and challenges that users face when using our tattoo website, and how can we address them in the redesign?

What are the key factors that influence a user's decision to choose a tattoo artist or studio, and how can we highlight those factors on our website?

Assessing the competition

In order for Vicki to stand out amongst the crowd, I need to understand her competition. How do they present themselves online and what methods are used to conduct business online.

A total of 4 competitor tattoo shops were analyzed. 3 were local to Kentucky and 1 based in California

LoveandDevotionTattoo.PNG
Love & Devotion Tattoos
BigDaddysTattoos.PNG
Big Daddy's Tattoos
TattooCharlies.PNG
Tattoo Charlie's
MONKEYFACE20NO BG_edited.webp
Monkey Face Tattoos

Findings

Tattoo shops' online presence focuses on a display of their work

  • A portfolio

    • The vast majority of content is photos of tattoos that they have done

  • Basic Info: Location, Hours, Contact info

    • should be visible on site

Feedback from their customers to consider

  • All shops had positive feedback regarding the studio environment/atmosphere and artist personality

    • Our design should emphasize the shop atmosphere and personality

To stand out...

Knowing that Tooties Tattoos' competitors advertise by displaying as much work as they can online, Vicki has an opportunity to stand out by showcasing her unique artistry, creativity... and maybe something more.

Understanding Tooties Tattoos' unique value

To understand the experiences of people who seek out tattoo services online, I recruited 4 participants ages 18-40 who have gotten tattoos in the past.

Additionally, I wanted to get to the root of why people choose Tooties Tattoos specifically. So, of the 4 participants recruited, 3 of them are either existing customers or have gotten a tattoo at Tooties Tattoos before.

Existing or past customers of Tooties Tattoos
Has never been a customer, but has gotten tattoos in the past

Findings

Tooties Tattoos' unique value is Vicki

Customers of Tooties Tattoos had nothing but high praise for the shop owner. They emphasized her honest, welcoming, and bubble personality while still remaining professional. If there's anything to emphasize in her website design, it's the feeling the customers get when interacting with the owner. The feeling of safety, acceptance, and care.

Participants also mentioned a few other website considerations that they value:

  • Show proven work: best pieces, specialties, and variety of styles

  • Show testimonials

  • Mobile first design

  • Basic info: Contact, Location, Hours, About the artist

  • Demonstrate a sense of trustworthiness and reliability

  • Nice to haves: Aftercare info, pricing, gift cards, e-sign waivers

C1+User+Interviews+1-2.jpg

Understanding today's market

To give Tooties Tattoos that much more of an edge, I took a look at current industry trends, statistics, and innovations

Industry+Research.png

This led me to four insights

  • Website should be accessible to everyone

  • Showcase any new techniques, products, or devices used

  • Create a design that caters to women in their 20s

  • Promote ability to create unique designs and collaborate with customers’ ideas for custom meaningful tattoos

Define

Aligning with the goal and defining the problem

Turning findings into actions

I analyzed the findings and created a list of design considerations

User Experience
  • Mobile first design

  • Accessible to everyone - Cater to women in their 20s

  • Showcase shop atmosphere and personality

  • Showcase honest, bubbly, welcoming personality and professionalism

  • Emphasize trustworthiness and reliability

Content
  • LOTS of photos of proven work

  • Basic information - location, hours, contact

  • Aftercare information, pricing, gift cards

  • Customer Testimonials

  • Showcase new techniques, products, and technology

  • Emphasize unique designs and customer collaboration

Empathizing with the user

To help guide the design process, I created two user personas

As a user, Emma should be able to...
  • Communicate directly with the artist

  • Browse through multiple testimonials

  • Seamlessly browse gallery/tattoo styles and able to contact artist to book or ask questions

  • Feel comfortable and welcomed by the artist

As a user, Rebecca should be able to...
  • Navigate the website with ease through its simple and intuitive layout

  • Quickly find shop information and resources about tattoo care

  • Feel that she can trust the artist through her expertise and professionalism

Identifying key content

I compiled a list of must have, nice to have, and surprising features based off my research. I will be prioritizing the must-haves to create an MVP. However, I would like to give an honorable mention to  one of the surprising and delightfuls: AI generated images for tattoo inspiration. To further showcase the shop atmosphere of creativity and collaboration and to push for innovation, I felt this feature would be a nice addition.

Capture (1)1.png

Uncovering user expectations

Now that I had a list of potential features, I needed to understand how users would expect to find all of this content. I prepared a card sort exercise using the feature list as key words and created 5 categories

C1+Categories.png
C1+Cards.png

I asked two screening questions to get a more detailed understanding of the audience and their experience with getting tattoos.

Insight on how to present the work of Tooties Tattoos

Placematrix (1).png

Revisiting the design considerations from research

Now that I was able to hear from users a second time, I had more details about their preferences and expectations. I used this time to revisit the design considerations I formed early on and added the highlighted specifics.

User Experience
  • Mobile first design

  • Accessible to everyone - Cater to women in their 20s

  • Showcase shop atmosphere and personality

  • Showcase honest, bubbly, welcoming personality and professionalism

  • Emphasize trustworthiness and reliability
     Consider visitors may be returning or experienced with tattoos 

Content
  • LOTS of photos of proven work
     Organized by style 

  • Basic information - location, hours, contact

  • Aftercare information, pricing, gift cards
     Specific page for Aftercare 

  • Customer Testimonials

  • Showcase new techniques, products, and technology

  • Emphasize unique designs and customer collaboration

Creating the blueprint

With insights from the card sorting exercise, I created a site map as a framework for the design

New+Site+Map.png

Making the deciding factors available and easy to navigate

I've been able to uncover that users come to Tooties Tattoos for the atmosphere. Now it was time to create an experience that showcases Vicki's work and personality and guides them to a point where they are confident about choosing this shop for services.

Users should be able to view the gallery, choose specific styles to view, and be able to request services wherever they are on the site.

C1+Site+Map_Flows.jpg

Develop

Time to start designing solutions

Creating the initial concepts

I drew inspiration from restaurant and café websites since they share similarities in the user journey. A user can view a menu, read about specific food items, then either order, make a reservation, or find the restaurant contact information. In the same way, Tooties Tattoos customers should be able to view the gallery, see specific styles, view services, and then book a consultation.

sdf (1).png
IMG_6252.png
IMG_6247.png

The initial concept

I implemented similar grid patterns and a staggered layout to bring in a good amount of white space

C1wf3.PNG

Within the wireframe, I mapped out how users can easily navigate between the gallery, to choosing a specific style, to requesting an appointment.

C1wf.PNG

Here is a look at the detailed about page and the Create a Tattoo feature!

C1wf2.PNG

Branding

Injecting the Tooties Tattoos personality

I moved forward with a style guide based off of Tooties Tattoos logo, color palette, the client want/needs for the design.

It is important to note that though the color palette is not in line with the WCAG color contrast guidelines, we opted to keep it as it best fits the brand and is already recognizable as Tooties Tattoos’ identity.

SG+spliced.png

In this high fidelity wireframe, I opted for a collage of tattoo photos for the hero section instead of a slideshow to give users an at-a-glance look at as much of the artist’s work as possible

C1+Hifi+Wireframe.png

Designing the experience

I designed the prototype based on the established user and task flows: View gallery/services and Request an Appointment

PT2.png
PT3.png

Deliver

Validating and finalizing the design

Gaining feedback on the prototype and making revisions

Usability Test

I conducted an unmoderated usability test on Maze and recruited 5 participants between 20-40 years old. All are either interested in getting a tattoo in the future or have received tattoo services.

My focus was to determine the ease of use and effectiveness of the design and to discover and address issues that could prevent users from achieving their goals efficiently.

Task
  • Find cost information

  • View a style gallery

  • Book a consultation

Task completion questions
  • What were you expecting to happen with the path that you chose to get the cost information? Explain your thought process when tapping certain links to reach your destination

  • On a scale of 1-5, how well did finding costs go as you expected?

  • On a scale of 1-5, how easy was it to complete the task?

Understanding what types of information are valuable to the user

I was limited to 10 items on the Maze free trial, so I chose meticulously to ask about what participants look for when searching for a tattoo artist.

bkq+answer.png

Overall, participants based their search off of recommendations from friends, the artist's work and rewards, prices, and location

UT+Background+q.png

Usability test results

Frame+283.png

Wonderful! I guess we're done here?

Uncovering insights

Digging deeper by analyzing individual user paths

Sure, the test yielded great results, but there's always room to improve. I took a closer look at the expected/ideal paths vs. the actual participant paths

Finding cost information

3/5 Participants took the ideal path

2/5 Participants were shown to explore a bit before reaching their destination

task1ideal (1).png
t1 (1).png

One participant checked the menu first, exited, then selected Services from the homepage to reach the destination

Thought process:
”I first scrolled down a little bit and I went back to the top to click the menu to look for a tap that said pricing. I couldn’t find anything so I assumed it was at Services.”

Expectations rating: 4
Ease of Use rating: 5

One participant checked the menu first, exited, then selected Services from the Another participant scrolled down, filled out an inquiry form, opened the menu, travelled to the About page and filled out the inquiry form again, before navigating back to the homepage and selected Services.to reach the destination

Thought process:
”I first scrolled down a little bit and I went back to the top to click the menu to look for a tap that said pricing. I couldn’t find anything so I assumed it was at Services.”

Expectations rating: 4
Ease of Use rating: 5

Potential Revisions
  • Fix visual hierarchy of CTAs on Homepage

  • Change verbiage of CTAs to better resonate with users

  • Test for preferred arrangement of primary and secondary CTA buttons on Homepage

Book a consultation

Task3ideal (1).png

1/5 Participants took the ideal path

4/5 Participants did not take the ideal path

One participant mentioned not seeing a way to book on that page at all
13 (1).png

3/5 participants opened the menu and selected Request an Appointment.

Thought process:
”Since, 'Request an Appointment' wasn't on the screen, I looked for a menu which was easily found in the corner where the link to request an appointment was available to click”

Expectations rating: 4
Ease of Use rating: 5

“Again, website was easy to use so I clicked on the top right tab and the appointment link was there.”

Expectations rating: 5
Ease of Use rating: 5

1/5 Participants navigated to the Homepage and selected the Request Appointment button.

Thought process:
”I clicked on links just to be curious, I usually like to click on every links on a website”

Expectations rating: 5
Ease of use rating: 5

Potential Revisions
  • Move CTA to Request an Appointment higher on page so that it is in view without scrolling

  • Include link to request under each photo in zoomed in view

  • Test for preferred arrangement of CTA to book with gallery photos

Further streamlining the experience

I opted to fix the visual hierarchy for CTAs on Homepage and Gallery pages

C1+revisions.png

The prototype

Recording 2023-12-01 at 11.24.36.gif
Featuring the ability to view services, view a style gallery, and request an appointment
Here is a look at the Create a Tattoo feature which allows users to create AI generated images from text!
Recording 2023-12-01 at 11.27.12.gif

Future roadmap

Specific Inquiry forms for services

  • Including ability to upload photos

  • Create a flow from Create a Tattoo to Request an Appointment where users can send created image to the artist
     

Search feature and filter so that users can find specific tattoo photos
 

Suggestion box for flash tattoo ideas

  • Users can suggest a flash tattoo promo theme
     

Newsletter subscription to keep users up to date with promotions
 

Links to Aftercare and other services on the inquiry form confirmation page
 

Add more personality to the visual design with graphics drawn by the artist

Project Takeaways

Humbled by the opportunity to bring a small business owner's vision to life.

I had the opportunity to work closely with a client, and it was incredibly rewarding to bring her ideas to life. This experience allowed me to develop the skills necessary to build a strong relationship with clients, effectively communicate and "sell" my design decisions. Collaborating with the client on various aspects such as typography, layout, and color palette within the constraints of the Squarespace platform was a great learning experience.

Additionally, I incorporated research and best design principles to find optimal design solutions. One of the most significant takeaways was understanding how to strike a balance between user needs and business goals, ensuring the design was effective for both parties.

Lastly, I learned to create and adapt to a timeline that was convenient for the client, further enhancing my project management skills. Overall, this assignment provided me with invaluable experiences and insights that will undoubtedly benefit me as I continue to grow as a UX/UI Designer.

Thanks for reading! Check out more of my work

bottom of page