RIVER SIDE TATTOO COMPANY
A tattoo studio website re-imagined
2020
USER RESEARCH
BRAND IDENTITY
RESPONSIVE WEB DESIGN
PROTOTYPING
INTRODUCTION
PROJECT BRIEF
River Side Tattoo is an independent tattoo studio in Cambridge, Massachusetts that specializes in bold, American-Traditional style tattooing. Their current website is, intentionally or otherwise, quite minimal in the content and information offered. There are some images to give a feel for the style that comes out of the shop, as well as hours of operation and a booking mailto link, but not much else. The business could benefit from a more comprehensive online presence.
THE CHALLENGE
With a client whose services are inherently visual, the goal of this project was to build upon their already crafted aesthetic, while showcasing with greater reverence the work these artists do. I set out with several questions in mind – “How do I inject more personality into the presentation of the site in a manner consistent with the brand identity?” “How can I best prioritize content?” and “How can my design make things easier for the artists and clients alike?”
EMPATHIZE
RESEARCH BEGINNINGS
Being a person with tattoos myself, as well as having surrounded myself with other tattooed people, I had an idea of the growing popularity of tattoo culture. Personal anecdotal experiences wouldn’t be sufficient here, so I sought out some demographic statistics to get a better idea of who is getting tattoos. I also kept my scope local to see what kind of online experience the Boston tattoo scene had to offer, looking into portfolio presentation, booking information, and overall aesthetic quality of other local studios.
CONVERSATIONS
Having some demographic data on hand, and an understanding of how other shops present themselves online, I spoke with several people with tattoos to gain a deeper insight into people’s experiences with the tattoo industry, their preferences, what is important, what’s frustrating. I learned about the sense of agency a tattoo can bring a person, the deep level of trust involved, the freedom found in crafting an identity through controlling physical appearance, and the process of memorialization – be it creating a memory or celebrating one.
DEVELOPING A "WHO"
Taking what I learned from my conversations with tattooed people, as well as the demographic statistics I found in my initial research phase, I was able to take an informed approach in creating a knowable someone to design for – meet Caleb:
DEFINE
INFORMATION ARCHITECTURE
In establishing the site map for the website, I knew the major improvement I wanted to make was the manner in which the artists’ work was showcased. By creating individual artist pages for full time tattooers, the client could get a better sense of each artists’ unique style. I also set out to establish a booking flow that make the booking process more clear – a major pain point identified in my research, as well as an opportunity to reduce questions at the shop.
KEY TASKS
Looking through the perspective of Caleb, I considered the necessary actions to be taken when wanting to get tattooed. I designed the site map towards the goals of being able to view an artists’ work and book an appointment. Simplicity is key.
BUILD
WIREFRAMES
Laying down the foundation of the page, I found that reducing the amount of work necessary for the site visitor would make for a more streamlined experience. I wanted to cut down on the amount of clicks, so I began to build a home page that seamlessly showcases the history, the artist roster, and the contact information for the shop.
BRAND IDENTITY
One major concern in beginning to establish the visual aesthetic was to keep consistent with the already existing brand identity. Just because the site was being redone, doesn’t mean the logo and brand colors needed to change. This was a valuable exercise in setting boundaries in my design and best address the needs of the client. I wasn’t changing the brand identity, I was enhancing it. The goal was to highlight the boldness of the shop’s signature style, while leaving room for their work to speak for itself.
TEST
INCREASING FIDELITY
I applied the UI kit I developed to the wireframes, creating a bright, contemporary aesthetic. There was an active decision to have the only color photography be the tattoos themselves, establishing a visual hierarchy through color. The fully fleshed out wireframes were used to build a prototype in InVision. I decided to challenge myself with certain features in the prototype, particularly prototyping a “sticky” navigation. This navigation element allowed for easy movement across a large page.
ASSESSING USABILITY
To see how people interacted with my design, I conducted a series of tests of certain key tasks. I asked participants to walk me through their thought process while working through the key functions of the site to make sure I was understanding their perspective. Though I had researched and talked with shoppers, there was still plenty to learn from the tests, and necessary changes to be made.
CONCLUSION
PARTING THOUGHTS
Giving a facelift to a local business came with its challenges. Through this project I learned the importance of letting go a bit of control and working within a set of pre-defined aesthetic guidelines. This was an exercise in enhancing what already exists, and keeping the client’s needs in mind. Furthermore, I had to keep in mind the degree of trust involved on the user’s end, the need for clarity of process. Using design to create a sense of comfort, and make easier daunting tasks is one of the most fulfilling aspects of user experience design
