Anthem Tattoo Co

A complete redesign & modernization of Anthem Tattoo’s website

Work

Contact

DESIGN

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


  1. Book a consultation with Shawn

  2. Buy a black Classic Hoodie

  3. 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

Email

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

See next projects

back to top

Lets Connect!

DESIGN

All rights reserved 2024

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