Good Omen Tattoo is a tattoo shop located in Chicago's Roscoe Village. Opened in early 2019, Good Omen prides themselves on being an inclusive space and routinely support social causes and organizations through events and fundraisers.
Objective: With no website or online presence outside of Facebook and Instagram, I took on Good Omen as a client to establish their branding and create a responsive website.
Client: Good Omen Tattoo
Timeline: 80 Hours over 2 weeks
Role: Lead UX/UI Designer
Tools: Sketch, InVision
Deliverables: Responsive Website, Prototype, Branding
Goal: To research the market, competitors and potential users
Process: Market Research, Competitive Analysis, Provisional Persona, 1:1 Interviews
To kick off the project, I conducted a market research of the tattoo industry to uncover demographics, behaviors and trends that help me get a picture of the industry and consumer.
45 million people in the US have at least one tattoo
People ages 30-39 are most likely to have a tattoo at 38%, followed by 25-29 at 30%
23% of women in US have a tattoo vs 19% of men
Revenues of 20,000 tattoo parlors will reach $1.35 billion in 2019
Americans spend $1.65 billion on tattoos per year
Avg cost of tattoos range from $45 (small) to $150/hr (large)
72% of adults with tattoos say they are usually hidden
Median tattoo per person in the US is around 4
49% consider reputation of tattoo artist or studio as most important factor
With a better understanding of the tattoo industry and competitors, I crafted an interview guide to question participants about their tattoos, tattoo booking and tattoo shop experiences. I gathered 5 potential users from a target demographic of age 23 to 30 for 1:1 interviews to observe user needs, desires and pain points. View the interview debrief here.
Goal: Synthesize research to define core problems
Process: Empathy Map, Persona
I constructed an empathy map to organize observations according to the following criteria: doing, thinking/feeling, seeing, hearing, gains & pains to synthesize findings from 1:1 interviews. From the empathy map, I was able to take each observation and organize them into shared patterns and behaviors to identify developed insights and needs.
Users rely on word-of-mouth recommendations to select a tattoo shop
Users view an artist’s past work to determine if they are suitable
Users meet with an artist in-person to plan their tattoo
Users need to know if past customers had a positive experience
Users need to view an artist’s past work to determine if an artist aligns with their vision
Users need to start communication with a tattoo artist to begin the process
Goal: Ideate solutions, information architecture and flows
Process: POV Statements & HMW Questions, Brainstorm, Business & User Goals, Sitemap, Task Flow, User Flow, Sketches, Mid-Fidelity Wireframes
POV Statements & HMW Questions
POV statements ensure that Clyde's "need" is because of his insight. This is to transition from understanding the problem to ideate solutions. Through HMW questions, I put myself in Good Omen Tattoo's perspective by restructuring Clyde's POV into "How might we" questions.
Business & User Goals
I compared and contrasted user and business goals to identify shared goals and select solutions from the brainstorm that fulfills goals from both parties.
To prioritize solutions that fulfills both user and business goals, I detailed prospective features through a priority roadmap. With these features set, I began organizing solutions and key pages into a sitemap.
With solutions in place, I needed to document how a user would complete three tasks on the website. This helps me understand how the user interacts with the system to achieve a goal.
Expanding on the task flow, I wanted to take a deeper dive and mapped out Clyde's path through three different entry points and scenarios. The user flow helps me further understand user decision-making, barriers and context to achieve a task.
With a contextual understanding of the solutions, key pages and user flow, I sketched low-fidelity wireframes to organize visual hierarchy and experiment with layouts. Sketching allows me to be creative and tap into ideas without wasting money or time.
Once I understood the successes and failures of the sketches, I digitized the best iterations and crafted mid-fidelity wireframes for the desktop website.
Responsive Mid-Fidelity Wireframes
I designed responsive wireframes of the home, artist and contact page for tablet and mobile to ensure that website elements are consistent and adaptable to different devices.
Goal: Build an interactive version of the responsive website
Process: Mid-Fidelity Prototype
I created a mid-fidelity prototype on InVision that served as a working example of the prospective website. Through this prototype, I could start conducting usability tests.
Goal: Evaluate viability of solutions through testing and feedback
Process: Usability Test, Affinity Map
I created two tasks for five participants to complete in the InVision prototype. I observed their patterns and behavior through screen/audio recording and note taking.
Evaluate effort level of user to complete tasks
Identify areas of difficulty and confusion
Identify behavior patterns of users to complete tasks
Contact a tattoo artist who is skilled at animal tattoos
Goal: Design branding and user interface and populate mid-fidelity wireframes with branding and content
Process: Brand Guide, UI Kit, High-Fidelity Wireframes, High-Fidelity Prototype
To craft Good Omen Tattoo's brand identity, I defined the core characteristics of the company to be represented:
Welcoming - Simplistic - Magical - Ethereal - Celestial
I then created a Pinterest moodboard to gather visual references for their logo design, color palette, typography and imagery. The brand provides a cohesive visual direction for the Good Omen experience.
To ensure consistency, I created a UI kit that featured user interface elements to house all branded and designed interactive elements. To further develop my wireframes, I could easily drag and drop elements from this document. View the full UI kit here.
I populated the mid-fidelity wireframes with imagery, brand styles, and UI elements to create high-fidelity wireframes, a highly developed mock-up that I can present to the client.
Responsive High-Fidelity Wireframes
High-fidelity wireframes for tablet and mobile were also developed.
I uploaded the high-fidelity desktop wireframes to InVision and created a functional version to present to stakeholders.
Test the prototype by:
Booking a tattoo artist
Viewing the photo gallery
Trust the Process. The design process exists for a reason, and it was evident in the short timeframe of this project. Despite prototyping and testing earlier than usual, define and ideate helped me truly understand the problems that users face, and craft meaningful solutions based on understanding those user needs. These two phases helped me create a functional prototype that I could test with. Once Good Omen's website core functionalities were deemed usable, the brand guide and UI kit served as finishing touches.
Fast and Furious. Through two weeks, I completed 80 hours of work that resulted in a responsive website and brand identity. This wouldn't have been possible if I didn't schedule my tasks and stayed true to my due dates. Staying disciplined helped me understand the importance of each deliverable and leveled me up through each phase of the design process.
Present to Client- Understand what the client likes and doesn't like about this iteration. Advise client on best practices and create revisions.
Developer Handoff- Fine tune UI elements and hand designs to the development team