top of page

Jess Campbell Tattooing

Role: UX + UI Designer

Jess is a freelance artist specializing in stick-and-poke tattoos, and also experimenting with digital art and photography. They mainly use Instagram to showcase their work and schedule tattoo sessions with clients, but they need a comprehensive professional site where they can showcase their work. 

Read this case study start to finish, or click the headings below to explore different sections. 

Problem, Goal, and Project Duration

Comparative Analysis, Interviews

Persona, Sitemap, User Flow, Test Flow

Wireframes, Creating and publishing website 

User tests, Affinity map, Revisions

Next steps, Key takeaways

As you read through this case study, click on images to view them in more detail. If you would like to browse my figma file, you can do so by clicking here.

Introduction

img_107199.png

Problem 

Jess mainly communicates through Instagram, but they need a more professional way of showcasing their work and recruiting clients.

img_451912.png

Goals

1. Develop a portfolio website for Jess that showcases their work, helps people get in touch with them, and effectively communicates their style and personality.  
2. Design a portfolio site that is aesthetically pleasing and easy for users to navigate. 

df0739ed05a5595f96d72a9daf34b183.png

Duration

In total it took about 80 hours to complete this project. Working approximately 15 hours a week, it took about 6 weeks.  

img_360216.png

Constraints

My main constraint involved using a web builder to build my site. I found that many of my ideas generated during sketching and wire-framing had to be adjusted to the web builder's capabilities. 

Research

I began by browsing through the websites of local tattoo shops, and writing down the strengths and weaknesses of each.

     Of the three, I noticed that none of the sites contained testimonials. While this may work for an established brand, I believed that Jess could set themself apart by including client testimonials on their site. 

     All three shops included FAQs in their navigation menu. The content of the FAQs covered everything from aftercare, to payment options, to tattoo etiquette. I wanted tattoo novices who visited the site to feel comfortable and informed booking with Jess, so I included an extensive FAQ as part of my design plan. 

     All three shops employed multiple artists, so seeing a picture of which artist you were booking with was helpful information. I also noticed that seeing a photo of the artist helped to personalize their work. Because of this, I decided to include some photos of Jess on the site. 

     Finally, I noticed that of the three shops, the one with solid information architecture and organization appeared to be the most legitimate, and was obviously the easiest to use. Based on this observation, I chose to keep Jess's website very simple and to repeat the most important information in multiple places so that it could not be missed. 

Comparative Analysis

Screen Shot 2022-12-17 at 5.12.16 PM.png

User Interviews

  I gathered three interview participants in their mid 20s who had previously gotten tattoos to participate in research interviews. I questioned them about their first and favorite times getting tattooed, inquiring what made those experiences either good or bad.   

     Overwhelmingly, participants emphasized the importance of feeling comfortable and at ease with  their artist. They also wanted to know ahead of time that their artist was skilled in their desired tattoo style. One participant also noted that is was nice when shops communicated what was expected of the client (what to bring, how to pay, bathe before arriving, etc.). 

Design Decisions

Based on what I had learned in my research, I decided to include the following features: 

  • Client testimonials

  • Photo of the artist on the site

  • Artist bio

  • FAQ

  • Contact page

Define

Persona

My persona was based on my user interviews, and would help my empathize with their needs during the design process. I kept "Spencer" in mind as I decided which elements to include, and which to forgo. 

Screen Shot 2022-09-18 at 11.16.05 PM.png

Sitemap

Since the purpose of the site was simply to showcase Jess's work and help clients contact them for booking, the sitemap stayed clean and simple. I chose to include most of the information on the homepage and link off to more detailed pages. 

Screen Shot 2022-09-22 at 11.12.30 PM.png

User Flow

The user flows outlined how users would access the information they needed before deciding to contact Jess for an appointment. This process helped me to determine what pages users would need, and how they would access them.  

Screen Shot 2022-09-12 at 1.22.33 AM.png

Task Flows

The task flows outlined how users would interact with each part of the site in isolation. Mapping each flow out helped me to decide what information I would include on each page.  

Screen Shot 2022-09-12 at 1.22.25 AM.png

Design

Low-Fidelity Wireframes

Since my sitemap was minimal, I didn't have to include too many pages in my low fidelity wireframes. I had many ideas for the final layout of the site, but I knew I would ultimately be limited to the site builder's capabilities, so my ideas were subject to change.​

My original ideas for the website included an ever present "about the artist," header, so that users would familiarize themselves with Jess's brand. However, as I began actually building the site, I decided it would be more beneficial to have a comprehensive homepage where users could scroll to access more information regarding any of their  remaining curiosities. 

lofi wireframes

Click here to view in figma

Logo

Per my request, Jess sent me two logo designed to use as inspiration. I noticed that each design was minimal, incorporated a monogram, and was encased by a circle. I followed the basic design of the logos they sent me, and added a blur effect to the background in order to create a "tattoo ink" effect. 

Screen Shot 2022-12-17 at 5.58.12 PM.png

Branding Tile

Creating a branding tile was especially important in this context since I would be passing editing capabilities onto my client. Having a guide would help them maintain the site's consistency.  

Screen Shot 2022-12-17 at 6.08.36 PM.png

Click here to view in figma

Building the site

I chose to build my website using Squarespace, which provides dozens of web templates to help you build your site. However, along with its helpful templates came plenty of restrictions in terms of spacing and customization. I soon realized how much of my original plan would have to be adapted. 

As mentioned above, I chose to get rid of the ever present "About the Artist" section, instead making sure that the most vital information was presented to the user upon clicking a button linked to another page. I made the homepage as comprehensive as possible, giving samples of Jess's work and FAQs to users as they scrolled. 

Screen Shot 2022-12-17 at 6.19.41 PM.png
Screen Shot 2022-12-17 at 6.19.22 PM.png

Testing

User Testing

I sourced four participants ranging ages 24-53 years old to test the website by posting on Instagram asking for participants. My test objectives were as follows: ​

  1. Determine whether or not the page layout makes sense to the user.

  2. Determine whether or not the website instills trust in the user. 

  3. Test to see how easily users are able to contact Jess. 

  4. Record any errors, confusion, or hesitation experienced by users.

I conducted the moderated user tests both virtually, using zoom to record their screen and facial expressions, and in person, using Vimeo to record the screen. Because I chose to conduct moderated tests, I was there to provide any help or additional information to users if they asked for it. I informed each participant that I would be taking notes and recording, got their consent, and proceeded with the tests. 

By the end of the tests, I had a 100% error free rate, and minimal frustrations from each participant.

After completing the tests, I looked over each participants comments and organized them into one of three categories, frustrations, suggestions, or successes, in order to decide what changes needed to be made to the site. Overall, users were happy with the site's structure and did not feel that anything was missing or confusing to use. I noticed that most suggestions were content related, but did not challenge the overall site structure.

Affinity Mapping

Screen Shot 2022-09-24 at 11.55.06 PM.png

 

I organized frustrations and suggestions into a priority matrix, which prioritizes high impact/low effort revisions first, and low impact/high effort revisions last. By doing this, I decided to make the following revisions:

  1. Change header above tattoo portfolio.

  2. Add a testimonial that focuses on tattoo quality

  3. Add an FAQ about whether or not Jess does color tattoos.

  4. Add an FAQ about how to commission a design.

  5. Add an FAQ about tipping and accepted tender.  

Priority Matrix

Screen Shot 2022-09-29 at 1.50.20 PM.png

Conclusion

Key Takeaways

Next Steps

Working with a client felt very rewarding, because I was finally making something that someone would use, but the process wasn't without its challenges. I found that it was more difficult to stick to a schedule when depending on a client to provide resources, information, and approval. I learned that giving a client hard deadlines is necessary for the project to meet its due date. 

Since Jess's portfolio will continue to grow, I'll be continually uploading new images to the site.

Additionally, I'd like to run another round of user tests using Jess's potential clients. This would help me to workout any bugs, test a new demographic of users, and also evaluate whether or not it would be helpful to create a scheduling portal for the site. 

intro
Research
Define
Design
Test
Conclusion
bottom of page