Anthem Tattoo Co
A complete redesign & modernization of Anthem Tattoo’s website
The existing online solution feels dated, incomplete and fails to capture the essence of the studio
In the dynamic world of body art, first impressions matter. For Anthem Tattoo, a relatively new tattoo shop, the need for a website redesign became more and more evident after testing the current site with several users. Users expressed that their user experience was hindered, potentially turning away potential clients.
The Problem
Overview
Anthem Tattoo is a popular tattoo studio based in Edmonton, Alberta, Canada. With a already impressive and growing number of followers the studio has a ton of potential. With all that being said however, it’s online presence leaves something to be desired.
Old Design
“
this link is broken
“
why are the Artist’s under the tattoo ?
“
too much text,I would never read that.
“
how do i book a consult?
“
this site feels unfinished
The Approach
How might we help Anthem Tattoo overcome its users' lack of enthusiasm for its current website solution? This case study delves into the challenges faced, the objectives set, and the journey undertaken to revitalize the digital face of our client's business.
My goals for this project was to help improve Anthem’s online website experience, extend their brand market reach and expand its business goals. With the addition of a merch section I have completely revamped and modernized the site from its current solution.
The journey began with the understanding that a website serves as a virtual storefront for a tattoo shop. Anthem Tattoo's existing site seemed incomplete and user-unfriendly, likely causing user frustration. Therefore, empathetically designing a user-friendly digital space that reflects the shop's unique artistry is crucial.
Research
Research Methods & Plan
A two-fold approach was employed here for my user research.
First, I conducted a round of usability testing on the current solution. This step was chosen to establish a baseline understanding of the current site's functionality, which will inform the features and improvements needed for the new solution.
Second, I performed market research, specifically conducting a competitive analysis to identify the strengths and weaknesses of the competition.
Number of users: 5 interviewees
Criteria: Users who have tattoos or might be planning on getting one soon.
Tools used: Conducted interviews via Zoom meetings over a 1 week period
Usability Test - Original site
Overall impression of the site was not a favourable one
75% of users said the site was not welcoming
Disjointed & poorly organized were used to describe the site
Users were underwhelmed by the site
Users rated the likely hood they would use this site between 2-5/10
100% of users liked the logo
All users felt the addition of branded merch would be a good addition
Overall, the user testing was a success based on the feedback I received the overarching sentiment was the site although it was sufficient was missing several things and was not user-friendly. There were repeated pain points with navigation missing info and too much text was often mentioned. This had not provided enough to validate a new redesign.
“The site has way too much text”
“I dont think I would get a tattoo from here”
Users reported feeling that the site was incomplete and lacked user-friendliness.
“Feels a bit dated”
Empathy
Research
Define
Design
Testing
Iterate
Competitive analysis
This competitive analysis provided valuable insights. By examining three similar tattoo shop competitors, I identified their strengths and missing features, allowing for improvements to Anthem’s current solution.
Bombshell, Atomic, and Champion Tattoo are all top-tier competitors with excellent features and contemporary website designs. Champion Tattoo, the closest to Anthem, offers the most features, including its own podcast. Bombshell is the most complete, while Atomic has the most innovative layout but lacks a few features compared to Bombshell. Anthem Tattoo can close the gap by adding additional features and innovating its digital platforms. The current Anthem website is missing key features, such as a proper booking system, artist social media links, aftercare information, and brand merchandise.
The next step is to integrate these features to significantly improve the site and boost business for the brand.
Summary
Goals
> Have trust in the artist she chooses
> To feel confident that the shop is clean and safe.
> Realize her vision for all of her tattoo ideas
>To find an artist she can use again and again
Stacey is a stylist who admires people with cool ink. With a few tattoos of her own, she’s planning for her next one. Researching and following her favourite artists online she needs to see a lot of images and testimonials before choosing her next artist or shop. Stacey is ok waiting long periods for the right artist and wants to be able to book and consult with them first online.
.
About
Frustrations
> Not being able to book an appointment on the site directly
> Lack info information on aftercare
> Stress about whether she will be happy with the outcome
>Regrets over her last tattoo
Devices
Stacey uses her laptop and phone equally. Her Macbook for work and for research and her phone while out and about or socializing
Social Media
Stacey Martinez
“I always do a lot of research beforehand and Instagram is the place I go for inspiration”
Age: 31
Family: Single
Job: Stylist
Location: West Coast
Mackbook - 50%
Iphone - 50%
“The planner”
Goals
> To commemorate the birth of her first child
> To find an artist who specializes in realism
> Wants to work with a highly skilled artist
>Find a tattoo shop closer to her home
>to set up a consultation from home
Jennifer has recently just had her first child. She wants her very first tattoo to be of her newborn’s picture, or there name. Not having a lot of spare time or experience she wants to be able to find a local tattoo shop and artist where she can communicate and book with them easily.
.
About
Frustrations
> Lack of time to spend endless hours to research
>Anxious about getting her first tattoo
>Cannot afford expensive tattoo
>Very best artist are hard to book
Devices
Jennifer uses a laptop phone and smart watch. The laptop primarily these days for work, she wears her watch all the time even monitors her sleep with it
Social Media
Jennifer Taylor
“I need a highly skilled artist, If It’s going to be on my body forever, it has to be perfect ”
Age: 26
Family: Married
Job: Marketing
Location: Seattle
Mackbook - 50%
Smartwatch -90%
Iphone - 25%
“The firrst-timer”
I developed these personas based off the preceding research findings validating the design choices prior to implementation. I referenced these throughout the design process and helped based off real user needs goals
Personas
Define
User flows
Three user flows were developed to provide clarity on how users would accomplish specific tasks.
This was valuable by revealing the interactions and entry/exit points users will face.
Sitemap
New nav bar design was requested by users
Adding the Merch/Store meant i needed to implement this into the new sitemap
The sitemap now accurately reflects the final layout of the new site
Re-did the sitemap to reflect the new features and new design
Primary Colors
Primary 1
#2D2E2A
Primary Colors
Primary 2
#E9A57F
Primary Colors
Primary 3
#FFFFFF
Secondary Colors
Secondary Color 1
#7C7C7C
Secondary Colors
Secondary Color 2
#DEDEDE
Secondary Colors
Secondary Color 3
#F3F1FF
Colors
Typography -
Iconography
Misc Elements
Buttons
Apply
Apply
Link here
Button
Button
Book Now
Button
Button
Button
Termina
Button
Default
Default
Error
Other buttons
Input
Links
Hover
Hover
Disabled
Last Name
Taylor
Address
WED
WED
18
2 slots
18
2 slots
H 1
48 px
H 2
32 px
H 3
28 px
Body Large
18 px
Body medium
16 px
Body small
14 px
Link
Visual System
Sketches
The use of sketches to begin my design process was key in finding the best direction for the new layout and new features.
I began by sketching the key screens first revamping artist page home page for both mobile & desktop
Lo-fi Wireframes
Design
Digital Wireframes
I focused on these key screens, which brought my design to life and validated my decisions based on user feedback.
Hi-Fidelity Mockups
Home
Artists
Checkout sucess
Merch
Buy a Hoodie
Prototyping
I created a prototype for the website redesign to visually demonstrate the proposed improvements and validate design decisions through user testing.
Usability Testing
“Quite the improvement, very professional looking now”
“Logical sequence and made sense/easy to follow”
“IIt looks great now, job well done”
“Very easy to navigate and I liked the way the visuals were spaced out.”
Summary
The usability test for this redesign revealed a significant improvement in user experience, with participants navigating the site more efficiently and expressing greater satisfaction with its layout and new features. By refining key aspects, the redesign enhanced usability and overall effectiveness, ensuring a much more engaging online experience for visitors.
Results
100% said the layout matched its intended purpose
92.3% said the information architecture made sense to them
30% rated the layout a perfect 100% while 65% rated it as excellent
only 8% said it needed improvement
Observations
Overall, the feedback received from the usability test was very positive. With some useful recommendations and insights noted from users.
Revisions needed/suggested
Fix minor alignment/spacing in navbar
Changed merch thumbnails to the left
Add images of models wearing the merch
Consistent buttons for a more consitentcy
Next Steps
Implement changes
Nibh
Conducted prototype usability tests through Lyssna
Recruited 13 participants
Users performed 3 different task flows
Book a consultation with Shawn
Buy a black Classic Hoodie
View Clark’s Artist page
Success was based on personal thoughts expressed and by how likley they are to use the site after completeing the tasks
Users commented that seeing the merch being worn by a model would be useful . I then made this change which brought a more practical visual image so potential users can more easily see themselves wearing the product.
Users said that they liked the logo so here I incorporated the logo in certain screens to keep the visual in the users' mind
Button consistency and changing the start here and book now buttons to initiate the consultation process
Choose a Date & Time
MON
TUE
WED
THU
FRI
16
9 slots
17
5 slots
18
2 slots
19
3 slots
20
0 slots
Mountain
30 min consultation
October 2023
9:30 AM
11:30 AM
1:30 PM
10:00 AM
12:30 PM
2:00 PM
10:30 AM
1:00 PM
2:30 PM
Reserve
ABOUT
ARTIST
GALLERY
PRICING
PIERCING
STORE
CONTACT
Book Now
Book Now
ABOUT
ARTIST
GALLERY
PRICING
PIERCING
STORE
CONTACT
Official Anthem Merch
Color: Sand /Black
$69.99
Classic Hoodie
Xs
Sm
Add to cart
View cart
Md
Lg
XL
XXL
Size:
Qty:
-
+
1
Black/Green
White/Green
Light Grey/Pink
Beige /Black
All Merch
Size Guide
Color shown ; Sand /Black
Style : 15420-01
A wardrobe staple, Our Anthem Logo Fleece Pullover Hoodie combines classic style with the soft comfort of fleece.
Official Anthem Merch
Classic Hoodie
Add to cart
Favorite
$69.99
Xs
Sm
Md
Lg
XL
XXL
Select Size:
Qty:
-
+
1
All Merch
Color : Blue/White
Black/Green
White/Green
Blue/White
Clay/Black
ABOUT
ARTIST
GALLERY
PRICING
PIERCING
STORE
CONTACT
Book Now
Changes/Iterations
A complete redesign & modernization of Anthem Tattoo’s website
I've enhanced the overall visual identity by integrating modern design elements with the essence of the tattoo industry's heritage.
The Solution
View Prototype
Other Screens
Official Anthem Merch
Order Summary
Continue to Payment
Return to cart
Billing Address
Contact
Express Checkout
Or
Country/region
First Name
Last Name
Address
Address 2
City
State
Zip Code
Phone Number
Text me with news & offers
1
Checkout / Information
All Merch
ABOUT
ARTIST
GALLERY
PRICING
PIERCING
STORE
CONTACT
Book Now
$9.95
Estimated Shipping & Handling:
$69.95
CAD
Apply
Discount code or gift card
Total:
Classic Hoodie
$69.95
Size: small
Color: Black/Green
Qty: 1
We will send you occasional emails about promotions, new products and important updates to keep you in the loop.
Choose a Date & Time
MON
TUE
WED
THU
FRI
16
9 slots
17
5 slots
18
2 slots
19
3 slots
20
0 slots
9:30 AM
9:30 AM
9:30 AM
9:30 AM
9:30 AM
9:30 AM
9:30 AM
9:30 AM
9:30 AM
Mountain
30 min consultation
Month
Reserve
ABOUT
ARTIST
GALLERY
PRICING
PIERCING
STORE
CONTACT
Book Now
Official Anthem Merch
Order Summary
Checkout
Purchase
Return to cart
Remember me
*All transactions are secure and encrypted
Save my info for later sessions
Card Number
Name on Card
Expiration date (MM /YY)
Security code
Credit Card
PayPal
Google Pay
Apple Pay
Shipping Details
Contact
1010 Main Street
Edmonton, Alberta, Canada
T6K-1B5
Jennifertaylor@me.com
INTERNATIONAL BUYERS:
Please note that items shipped outside of the Canada may be subject to import duties, taxes and/or charges which are not included in the total cost of my order. Please check with your country’s customs office to determine what these additional costs will be prior to placing your order. Please refer to our International Shipping Policy for more information about shipping capabilities and fees.
ABOUT
ARTIST
GALLERY
PRICING
PIERCING
STORE
CONTACT
Book Now
Total
$69.95
$79.90
$9.95
CAD
Apply
Discount code or gift card
Subtotal
Shipping
Classic Hoodie
$69.95
Payment
1
CLARK MACLEOD
Chris’s Unreal full colour back tat.
Father. Artist. Bald Guy.
Reviews
The boss, the captain, the glue that holds it all together. Clark Macleod is the owner and an experienced, well respected artist. Born ln Red Deer; Clark was always destined to be great at whatever he puts his mind to. Clark always puts his clients first and has aspirations to open 2 more Anthem locations in the near future
ABOUT
ARTIST
GALLERY
PRICING
PIERCING
STORE
CONTACT
Book Now
Top 6 pics
Here are some additional screens to highlight some of the expanded features and offer a thorough perspective on the user experience.
Cook Nook
What I learned
Reflecting on this project, I realized I learned a great deal and consider it a great success. I discovered that having a solid strategy is crucial for initiating the redesign process. Additionally, I recognized the significant value in the process itself. By thoroughly understanding user behavior, preferences, and tendencies, I was able to focus on what truly mattered, resulting in better outcomes
Future Goals
Expanding its features to encompass additional aspects of the golfing experience such as tracking scores, and providing tips and tutorials.
Continuous updates and improvements based on user feedback and technological advancements would be crucial to staying competitive and meeting the evolving needs of golf enthusiasts.
Reflections