Client: Diamond Street Tattoo
Role: UX/UI Designer
Deliverables: Website prototype, Branding
Tools: Sketch App, Illustrator, Photoshop, InVision
The Objectives
Redesign Diamond Streets website to be responsive.
Develop coherent branding that aligns with the shops current and/or desired clientele.
Add a booking feature.
EMPATHIZE
Process: Market Research, Competitive Analysis, User Interviews, Empathy Maps & Personas
Secondary Research: Competitive Analysis, Market research
Competitor Analysis
I conducted market research to highlight the strengths and weaknesses of other tattoo shops as well as to figure out how an independent artist promotes their work using a website.
I chose to look at other shops because tattoo shop websites are a fairly niche group. There are many shops but not many have fully functioning sites. I needed to see what the competition had done, so what I could improve on what was currently being done in the industry.
Primary Research: Directed Interviews, In-Depth User Interviews
Diamond Street Tattoos is in a very saturated market. There are tattoo shops on every corner in Los Angeles. In order to figure out how to properly promote their shop, I needed to understand their main clientele.
For my interviews, I approached people of all different backgrounds. Because tattoos have become so commonplace, it was easy to speak to people about what they think of tattoos and what they may look for in choosing a shop. I was able to go directly to the shop to speak with the clients and get a feel for the shops aesthetic.
User Interviews
My research goals were as follows:
To define target customers.
To determine customer wants, needs & goals.
To understand user frustration and concerns.
To understand the purpose of a website for a tattoo shop.
Conducting Interviews
Number of Participants: 6
Ages: 19-34
Summary
All clients looked up Diamond Street online.
Half of the clients went to the shop for their first tattoo.
Most clients spoke to their friends for references.
Most clients chose Diamond Street because of the work referenced.
I went to Diamond Street and interviewed 6 different clients. I also sat in the shop to figure out the feel of the shop. This helped me to empathize with the users and to figure out how they felt about Diamond Street.
DEFINE THE GOALS
Process: POV Statements, HMW Questions, Brainstorming, Business Goals & User Goals, Product Roadmaps
After finishing my research and getting a clear picture of who the users are I was able to start figuring out how I could address the users needs as a designer. I needed to really pinpoint exactly what they were feeling and what they needed in a tattoo shop. After figuring out what they needed I had to figure out how I could address their needs as the designer.
POV Statements & HMW Questions
To start off I took my research insights and took the point of view of the user. I needed to empathize with them. When I was able to get into their mindset I had to figure out how to address each concern. This was where my HMW (How Might We) Questions came in. The HMW Questions allowed me to quickly come up with ideas about how I could address the concerns of the client.
Brainstorming
Once I was able to come up with these key questions I had to figure out possible solutions to each problem. I didn’t want to fixate on one possible solution as it may not be the best solution for the user. I started to brainstorm possibilities by just listing out a series of several solutions for each HMW question.
Product Roadmap
With the goals defined and properly thought-out I was able to start moving towards thinking of the layout and information architecture of the website. Before I jumped right into the design I worked on a product roadmap so that I could asses the priority of the features that should be included.
ANALYSIS & DESIGN
Process: Sitemap, User Flow, Task Flow, Low & Mid-Fidelity Wireframes
After determining the goals of the shop and the potential clientele and figuring out possible solutions I began to work on the information architecture of the site. I took my research findings and began to implement them into my design through my sitemaps and flows. I knew what should be included and I centered my design around those needs.
User flow
I created a user flow to map out how users would navigate through the site, ensuring a seamless and intuitive experience. This flow diagram outlined the steps a user would take to complete specific tasks, from landing on the homepage to interacting with key features. By visualizing the user's journey, I was able to identify potential friction points and optimize the navigation for efficiency. The user flow not only helped clarify the overall structure of the site but also served as a blueprint for designing interactions that would feel natural and straightforward. This process allowed me to ensure that every click, transition, and action was purposeful, improving the overall user experience and aligning with the sites goals.
Low & mid-fidelity wireframes
After I completed the preferred layout for Diamond Street I began to sketch out my rough ideas for how I would design the site. I started with sketches before moving on to the mid-fidelity wireframes using Sketch.
The mid-fidelity wireframes and sketches helped me figure out the rough layout for how the site should look. This layout allowed me to address the clients needs while still solving Diamond Streets needs as well.
DESIGN
Process: Brand Logo, Style Tile, High-Fidelity Wireframes
With my usability testing completed I moved onto the final design for Diamond Street. I was able to start creating mood boards, sketches and color palettes to figure out the direction of Diamond Streets design.
Brand Logo
I started with rough sketches of different wordmarks, logos, and combinations of the two. I already had a rough idea of how the logo should look but sketching it out helped me pinpoint exactly what worked and what didn’t work.
High-Fidelity Wireframes
With my style tile finished and my design elements all finalized I was able to move onto the final design of the website. I took my design elements, my mid-fidelity wireframes and the findings from my usability testings to create the final layout for Diamond Street Tattoo.
Conclusion
When I first began working with Diamond Street, the tattoo shop lacked a clear design direction and struggled to stand out in a crowded market of numerous tattoo shops across Los Angeles. Without a proper website, they had no platform to differentiate themselves from competitors. Through my design process, I was able to help them define their target clientele, understand the specific needs of their business, and craft a design that truly reflects the unique aesthetic of their brand. The result is a website that not only highlights the artistic vibe of the shop but also provides a streamlined user experience, giving Diamond Street a distinct online identity that sets them apart in a competitive industry.
Next Steps
High Fidelity Wireframes
The next step involves creating additional high-fidelity wireframes to design the remaining pages of the site. This will ensure that the entire site has a cohesive look and functionality before moving on to the development phase.
Develop
Once the high-fidelity wireframes are finalized, we will begin coding the designs into a fully functioning live site for Diamond Street. This will bring the design to life, allowing the shop to present its unique identity to potential clients and create an effective online presence.