Brief

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

Process
Research

Goal: To research the market, competitors and potential users

Process: Market Research, Competitive Analysis, Provisional Persona, 1:1 Interviews

Market Research

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.

Consumer Demographics

  • 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

Tattoo Industry

  • 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)

Consumer Behaviors

  • 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

Competitive Analysis

I conducted a competitive analysis of in-city tattoo shops and national tattoo shops with similar brand values to identify strengths, weaknesses, and gaps from competitors to understand Good Omen's opportunity in the market.

AM competitive analysis Copy.png

Provisional Persona

I created four provisional personas of potential Good Omen clients based on industry and competitive research. These personas help develop the interview guide by narrowing focus on a target group.

AM provisional persona Copy.png

1:1 Interviews

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.

Define

Goal: Synthesize research to define core problems

Process: Empathy Map, Persona

Empathy Map

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.

GoodOmenEmpathyMapInsights Copy 2.jpg

Insights

  • 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

Needs

  • 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

Persona

Personas help designers take a humanistic approach to design by profiling someone to design for. From interview observations and empathy map insights, I created Clyde, our persona. Clyde helped guide design decisions by designing for him.

Persona #2 Copy 3.png
Ideate

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.

Brainstorming

I brainstormed solutions in three 3-minute sprints for each HMW question.

GoodOmen Brainstorming.png

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.

Sitemap

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.

Task Flow

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.

User Flow

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.

Sketches

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.

Mid-Fidelity Wireframes

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.

Prototype

Goal: Build an interactive version of the responsive website

Process: Mid-Fidelity Prototype

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.

Testing

Goal: Evaluate viability of solutions through testing and feedback

Process: Usability Test, Affinity Map

Usability Test

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.

Test Goals

  • Evaluate effort level of user to complete tasks

  • Identify areas of difficulty and confusion

  • Identify behavior patterns of users to complete tasks

User Tasks

  • Browse photos

  • Contact a tattoo artist who is skilled at animal tattoos

Affinity Map

With observations from the usability test, I created an affinity map to organize thoughts and behaviors to create insights based on developed patterns. This usability test yielded a 100% completion rate of both tasks.

Desktop HD Copy 2.png
Design

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

Brand Guide

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.

UI Kit

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.

High-Fidelity Wireframes

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.

High-Fidelity Prototype

I uploaded the high-fidelity desktop wireframes to InVision and created a functional version to present to stakeholders.

Test the prototype by:

  • Browsing artists

  • Booking a tattoo artist

  • Viewing the photo gallery

Reflection

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 FuriousThrough 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.

Next Steps:

Present to Client- Understand what the client likes and doesn't like about this iteration. Advise client on best practices and create revisions.

Developer HandoffFine tune UI elements and hand designs to the development team

jasonmoosedesign@gmail.com |  224-381-5685

© 2019 Jason Moosikkamol | Made in Chicago