Background
Making Sense of the Customer Journey
Vicki, a talented tattoo artist based in Kentucky, seeks to optimize her website to expand her business, Tootie’s Tattoos. Known for her exceptional artistry in various styles, including realism, portraits, line work, color, and cover-ups, Vicki primarily attracts clients through word of mouth and Facebook. To grow her business further, she aims to elevate and leverage her website.
The Problem
Design a streamlined flow from viewing necessary information on the site to requesting an appointment.
In the past, Vicki experienced high volumes of self-scheduled bookings without sufficient information about the service type. This led to rescheduling appointments due to incorrect time allotments for the tattoos. Additionally, Vicki wants to professionally showcase her exciting, bubbly personality and family values.
The Solution
A responsive website design that utilizes an intuitive client journey towards booking an appointment through:
-
Accessible Decision-Making Factors: Users can easily navigate and view galleries, choose specific styles, and request services from any page on the site.
-
Clear Service Descriptions: Detailed service descriptions ensure clients understand what to expect and book the appropriate amount of time for their desired tattoos.
-
Appointment Request System: Users are guided to request an appointment by providing details about their tattoo expectations. The tattoo artist reviews these details, determines appropriate types of appointment options, and continues communication with users to finalize the booking and provide a personalized experience.
Impact
-
Improved Booking Accuracy: The appointment request system led to fewer scheduling conflicts, allowing Vicki to manage her time more effectively and reduce the need for rescheduling.
-
Enhanced User Experience: Clients appreciated the ease of navigating the website, viewing galleries, and requesting services, resulting in a smoother and more enjoyable experience.
-
Personalized Client Interaction: By continuing communication off-site, Vicki was able to provide personalized service and build stronger relationships with her clients.
-
Business Growth: The streamlined appointment request process and enhances online presence to attract more clients, contributing to the expansion of Vicki's business.
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
Love & Devotion Tattoos
Big Daddy's Tattoos
Tattoo Charlie's
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
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
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.
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
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
.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
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.
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.
.png)
The initial concept
I implemented similar grid patterns and a staggered layout to bring in a good amount of white space
Within the wireframe, I mapped out how users can easily navigate between the gallery, to choosing a specific style, to requesting an appointment.
Here is a look at the detailed about page and the Create a Tattoo feature!
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.
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
Designing the experience
I designed the prototype based on the established user and task flows: View gallery/services and Request an Appointment
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.
Overall, participants based their search off of recommendations from friends, the artist's work and rewards, prices, and location
Usability test results
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
.png)
.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
.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
.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
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.
Let's connect!