Overview

My Roles: Research, Information Architecture, Sketching, Wireframing and ideating, Branding and UI, Prototyping, Usability Testing

Black Cat Collective is a small tattoo studio in Perkasie, Pennsylvania, that offers tattooing and piercing services. They were interested in a redesign of their current website to better show their artists’ portfolios and present a relaxed, but engaging shop atmosphere.

Problem

Most of Black Cat’s customers were contacting them by either walking in, calling, or emailing the shop. We wanted to see if there was a better way to streamline the contact process for customers and consolidate the inflow of appointment requests for the studio. The studio prefers to do their own scheduling, so they did not want a customer booking section on the site.

Process

User Research

Research began with a competitor analysis of five other tattoo shops, three local, and two well-known. I wanted to see what other shops were doing well and what needed some work. The most noticeable element, across all 5 shops, was a lack of consistency: consistency of typography, spacing, alignment, and content. I wanted to make sure that Black Cat Collective’s redesign would maintain consistency in all of those aspects.

Next, I conducted user interviews and surveys. Based on insight from three interviews and 24 survey responses, I learned how people find artists they are interested in, how they get in contact with the shop, and what they look for in a shop. Instagram is one of the top ways people find artists and styles that they like, and then they look into the shop where the artist works. 89% of survey respondents said that cleanliness is the most important factor in choosing a shop, because a fresh tattoo is considered an open wound. 61% also cared about the atmosphere and vibe of the shop.

This feedback helped lead me to what information was important to highlight for the redesign.

Information Architecture

It was important to get an idea of what information needed to be on the site and how that information was to be organized. A site map helped me decide what information could be on the homepage and what might require a separate page.

Sketching and Wireframing

I started sketching the homepage first so that I could focus on the information that would be found on it and then found on other pages through the top navigation bar. My main goal was making sure the most important information would be seen as soon as possible on the homepage and then secondary information could be found on subsequent pages.

Utilizing Figma, I created low fidelity versions of two of my homepage sketches. I wanted to pay attention to the order of the information on the homepage so that it corresponded with what would be most important to the users.

The artists’ portfolios were key areas that the shop wanted to improve and customers usually choose an artist based on their style and abilities, so it was important to design those pages next. The portfolios needed to be easily reached and easily browsed through.

Once I had a general idea for these pages on desktop, I needed to create versions for tablet and mobile. The tablet versions look almost identical to desktop, but the changes are most noticeable in the mobile designs. The difficulty with mobile was making sure that the different elements didn’t feel crammed together but that everything could still be seen well enough.

Re-branding and UI

Black Cat Collective already had a logo and color palette, but wanted an update to express the atmosphere of the shop. I redesigned the logo to simplify it and changed the color palette to give off a more relaxed but inviting feeling. I originally had the UI with a more dull color palette, but realized it didn’t have enough vibrancy. A secondary accent color was also added to the color palette. I also wanted the overall design of the website to be clean and professional so that customers felt that the shop would also be clean and professional.

High Fidelity Wireframes and Prototyping

I added the UI elements to my wireframes and iterated on the designs of the pages. The sections on the homepage were made more concise and text was made more legible. Background elements where added to help draw the user’s eye down the page or used as hover states. Imagery was also iterated on to fit with the new branding.

Usability Testing

My goals for my usability tests were to assess the ease of browsing the artists and their work and also to see how people would go about contacting the shop for an appointment. These goals led me to the following tasks:

Task 1: browse the site to see what the shop was like and what the artists had to offer.

Task 2: choose an artist to work with and contact the shop.

Test Results

• 5 test participants

• Three out of the five participants did not scroll down the homepage when asked to browse the site. They all said they didn’t realize they could scroll.

• Three participants used the “request appointment” button located at the bottom of the individual artist pages.

• The other two clicked on the “contact” button in the top navigation bar and one of them said they would actually just call the shop.

• All of the participants said that the navigation of the site was easy to understand and use, as was the appointment request form on the contact page.

• All of the participants also said they felt like the shop would have a relaxed, clean, and professional environment based on the website.

I learned that I had a lot of assumptions about how people would interact with the site and ended up testing those assumptions. I learned to make sure that the flows I design for the prototype aren’t based on my own experiences, but rather based on the research I had gathered.

Final Prototype

After testing and creating an affinity map, I went back to my designs and iterated again to try to solve the problems that arose. Because three participants didn’t know that they could scroll the homepage, that became a red flag and was listed as a high priority problem to address. Two participants mentioned expecting a separate page that listed the artists when clicking on the top navigation bar, instead of a drop-down menu with their names. This was given medium priority. I believe that this final design achieved the initial goals that were set for the redesign: make the artists’ portfolios more prominent and easier to navigate, streamline the contact process for the clients, and portray a relaxed, but engaging shop atmosphere.

Review

This project gave me a chance to do a lot of problem finding and solving. I chose to go with a pattern less seen and because of that, a lot of issues popped up that I had to figure out. One of those issues was the headings for each sections. I wanted a large heading that was in the background of each section, while being overlapped by some of the information within the sections. I originally had each heading as large as it could be within a certain sized bounding box. But that lacked the consistency that I had wanted from the beginning of the project, so I had to changed the sizes to all be the same. Then I came across the issue of the font sizes not fitting on smaller device screens. I needed to change the size and amount of overlay for each device size.

One of the biggest lessons I learned from this project was to always be aware of and test my assumptions about how I think people will interact with and flow through a product. I learned throughout my usability testing that not everyone will do a task the way I think they will. Becoming aware of my assumptions helped make my usability testing goals clearer and helped better direct the testing. The next step would be to re-test the updated design to see if the changes improved the usability problems from the first round of testing.