Of The Muses Project Overview


Of The Muses is a newly opened tattoo shop located in Annandale, Virginia. They consist of a team of 5 talented artists who are uniquely known in the DC, Maryland, and Virginia area. On top of their tattoo services, they also provide a spacious, lounge type environment and ensures that each customer is comfortable throughout the whole session.


UI/UX Designer - Research, Interaction Design, Visual Design, Prototype, Testing


Knowing that tattooing is increasing in popularity everyday, Of The Muses need to stay competitive in the market. They currently do not have a website and use Instagram as their main source of communication.


Sketch, InVision


  • Design a responsive website that allow customers to easily view artist portfolios and request appointments
  • Design a logo and their brand identity


4 weeks

Final Prototype



  • Research Plan
  • Secondary Research
  • Provisional Personas
  • Primary Research
  • Empathy Map


  • User Persona
  • POV Statements
  • HMW Questions
  • Business/User Goals


  • Brainstorming
  • Product Roadmap
  • Site Map
  • UI Requirements
  • User & Task Flows
  • Low Fidelity Sketches
  • Mid-Fi Wireframes


  • Mid Fidelity Prototype
  • Usability Testing
  • Affinity Map

Visual Design

  • Logo & Branding
  • Hi-Fi Prototype


Research Plan

To start off on how I can help Of The Muses, I needed to gain a better understanding about the current tattoo industry and Of The Muses customer experience. I outlined a research plan to state the objectives and methodologies on how research will be conducted.

Research Goals
  • Identify a target demographic
  • Understand how the tattooing business markets and functions
  • Why people get tattoos
  • Identify the direct/indirect competitors
  • Find the customer goals, needs, frustrations, and motivations
Research Methodologies
Secondary Research
  • Market Research
  • Competitive Analysis
Primary Research
  • Customer Interviews: Interviews with Of The Muses customers
View the full Research Plan here

Market Research

Through market research, I developed a better understanding on what the current tattoo industries were like. This also includes statistics and trends found within the general demographics.


  • 36% of Americans between 18 and 29 have at least one tattoo.
  • In the U.S., 15% of men and 13% of women have tattoos.
  • 30% of all college graduates in the United States have tattoos.
  • 11% of people with tattoos in the U.S. are from ages 50-64.
  • More women regret their tattoos than men.
  • 36% of veterans and currently serve the Army have tattoos.


  • The most searched language for tattoos is Japanese.
  • Tattoos are slowly being accepted as a work of art.
  • 32% of people with tattoos claim that they are addicted to ink.
  • 31% of people with a tattoo claim to feel sexy.
  • 5% that don't like their tattoos cover it with another tattoo.
  • Of those who have tattoos, 70% have more than one tattoo
View the full Market Research here

Competitive Analysis

Once I've gained a better understanding on the current tattoo market, I began to look for direct and indirect competitors to understand their strengths and weaknesses. This allowed me to gain some insight on how Of The Muses can be improved and competitive against other tattoo shops.


  • Simple layout
  • Evenly spaced out sections and cards
  • Clear info on each artist


  • Have to call the shop to request for an appointment
  • Doesn’t show much pictures on their site


  • Simple and minimalistic layout
  • A blog section for any shop updates
  • Clear CTAs


  • 2 types of font that are used as both headers and body text
  • Hours or artist schedule not listed


  • Very clean layout with nicely placed elements
  • A lot of pictures with minimal text
  • Can request appointment online and for a specific artist


  • No footer
  • Microblading service is hidden in the white space unless you hover over it
View the full Competitive Analysis here

Provisional Personas

Before transitioning into the primary research, I needed to identify the target users to search for when conducting interviews. Based on the secondary research, I was able to create 3 provisional personas that would guide me in who I potentially needed to look for.

Young Scholar

Ages: 19 - 29
Gender: Female

Millenial Artist

Ages: 25 - 39
Gender: Male

The Addict

Ages: 30 - 49
Gender: Male

  • Get a tattoo on her ankle
  • Feel more confident
  • Consult with an artist to make the best decision
  • Potential feeling of regret
  • Negative impact on her professional career
  • To get a couple more designs on his upper back
  • Find very reputable artists or shops
  • Wants at least 1 design representing a family member
  • Specific on what he wants
  • A lot of researching to find a trustworthy artist
  • To get his whole body tatted up
  • Cover up his mistake tattoos with more tattoos
  • Be able to find shops with walk-ins
  • Low on money
  • Has an impression of looking rebellious

User Interviews

While referencing the provisional personas, I gathered 5 participants to interview. All participants were customers of Of The Muses and interviews were all conducted remotely. This allowed me to gain a better understanding on the users' goals, needs, motivations, and frustrations on tattooing at Of The Muses.

View the full Interview Findings here

Empathy Map

Using the interview findings, I created an empathy map to synthesize, organize, and understand all the findings. This allowed me find patterns within the observations which led to insights and needs.

View the full Empathy Map here


User Persona

Introducing...Walter! He is the user persona that represents Of The Muses' target users. Walter is based on the gathered findings from the secondary and primary research. He will be referenced throughout the whole design process.

POV Statements & HMW Questions

After defining our target user, I created POV statements using Walter, which would identify what our end goals were. HMW questions were also created to began brainstorming potential solutions. This was based on the insights and needs gathered previously.





Customers like to know the artist’s style of work.

To be able to view the work artists have done.

Walter needs to view the work artists have done because he likes to know the artist’s style of work.

How might we help Walter view the work artists have done?

Customers often experience closed bookings with popular artists.

To be able to know when bookings are open.

Walter needs to know when bookings are open because he often experiences closed bookings with popular artists.

How might we make it easier for Walter to know when bookings are open?

Customers message through social media sites to book with an artist.

To be able to book without needing to go on a social media site.

Walter needs to book without needing to go on a social media site because he messages through social media sites to book with an artist.

How might we help Walter book without needing to go on a social media site?

Customers ask a lot of questions regarding the tattooing process.

To be able to see answers to frequently asked questions

Walter needs to see answers to frequently asked questions because he asks a lot of questions regarding the tattooing process.

How might we help Walter see answers to frequently asked questions?

Business & User Goals

With the problems and many potential solutions defined for the target users, I needed to slightly switch focus and define the business goals and where it overlaps with the users. By being in contact with Of The Muses, I was able to gather some business goals from them.



To begin the ideation phase, using the HMW questions, I did a rapid brainstorming activity that allowed me to gather a number of solutions in a short amount of time. I timed myself 2.5 minutes per round and there were 2 rounds per question. Within the time limit, the goal was to come up with as many potential solutions to each question.

View the full brainstorming documents here

Product Roadmap

After brainstorming solutions and identifying the business and user goals, a product roadmap was created to prioritize key features and pages for the site. I also continued to reference the competitors to find features and design patterns that worked for them, which helped in prioritizing the list in the roadmap.

View the Product Roadmap here

Site Map

Using the features/screens that were prioritized in the product roadmap, I created a site map that outlines information architecture of the Of The Muses site. I first determined the main navigation and pages then placed the subpages and features where it fit best within the structure.

UI Requirements

Now that I have a sitemap that shows how the site will initially be laid out with the pages and features, I created a UI requirements document that states the essential elements and features in detail for each page. While continuing to use the goals, needs, frustrations, and motivations from Walter, I created 3 tasks to understand exactly what pages, features, and elements will be needed.

Task 1: Walter wants to view an artist’s portfolio.
Task 2: Walter has general questions about the tattoo shop he needs answers for.
Task 3: Walter wants to make an appointment.

View the UI Requirements Document here

Task Flows

Using the tasks created in the UI requirements, I created 3 task flows that shows the specific steps and pages Walter would need to go through to complete each task. This helped in understanding whether the tasks were logical and straightforward to complete.

View all of the Task Flows here

User Flows

To understand more specifically on how decisions might be made when navigating through the site, I created 3 user flows using Walter and laid out how he would make decisions in certain scenarios. This helped in understanding the user's behavior on how they might interact with the pages and features within the site.

View all of the User Flows here

Low Fidelity Sketches

Now that I got an understanding of how a user will interact with the site as well as how the site will be organized, it was time to start sketching out some ideas of how the pages will look. While referring to the sitemap, flows, UI requirements, persona, and competitor sites, I sketched out 3 versions of the homepage, artists page, 2 versions of the artist detail page, and the appointments page.

View all of the Low Fidelity Sketches here

Mid Fidelity Wireframes

After I was set on the general idea of how the site will look, I continued to use my sketches and created mid fidelity versions of the wireframes. This allowed me to focus on the visual hierarchy and placements of the layout before adding in all the UI elements.

View all of the Mid Fidelity Sketches here

Mid Fidelity Wireframes (Responsive)

Once the mid fidelity desktop wireframes were created, I began creating the mid fidelity responsive wireframes. This is to ensure that the site is adaptable and consistent to a full user experience through tablet and mobile. Responsive wireframes were created for the homepage and artist detail page.

View all of the Responsive Mid Fidelity Sketches here


Mid Fidelity Desktop Prototype

Using the mid fidelity desktop wireframes, I created a prototype via InVision to began the usability testing with participants before the high fidelity version. This was to observe how participants will interact with just the organization and layout of the site.

Mid Fidelity Prototype

Usability Testing

A usability testing plan was created to outline the objectives, methodology, participants, and tasks before the testing was conducted. I then conducted a moderated remote testing with 5 participants. The think aloud method was prompted and all observations were documented.

Testing Objectives
  • Identify the overall ease of use in navigating through the prototype.
  • Understand the efficiency in users completing each task.
  • Understand the approach users choose to complete each task.
  • Identify any frustrations, confusions, and misunderstandings.
Testing Findings Overview
  • # of Participants: 5
  • 4 Males & 1 Female
  • Ages 23 - 30
  • Has at least 1 tattoo or is planning on getting a tattoo
  • 100% completion rate
  • 99.4% error-free rate
View the full Usability Testing Plan here

Affinity Map

With the findings gathered from the usability testing, I synthesized all the notes and observations into an affinity map. This was to identify any patterns, insights, and recommendations for the prototype. Based on the pain points, insight, and recommendation gathered, I made sure to update the wireframes to have a more clear visual, especially once the UI elements are added, for the booking status feature and the artist selection on the appointment form.

View the full Affinity Map here

Visual Design

Logo & Branding

With wireframes tested and updated, the visual design was now the next thing to do. With the branding, I came up with 5 brand attributes that would best describe Of The Muses. The attributes are modern, classic, reliability, uncluttered, and minimalistic. Using Pinterest, I created a mood board based on those attributes to guide the visual direction.

While continuing to reference the brand attributes and mood board, I sketched out logos that could best represent the branding. Once I decided on a logo to use, I then created a style tile that would present the color palette, typography, and imagery.

To gather every UI element, including everything stated on the style tile, I created a UI kit. This is created in order to maintain the consistency between the brand and the site as it gets updated.

View the full UI Kit here

High Fidelity Desktop Prototype

Once the branding and revisions done to the wireframes were completed, I added all the UI elements to the mid fidelity wireframes and created a high fidelity prototype via InVision.

Final Prototype

Reflection/Next Steps

This project was very enjoyable and exciting. Having the opportunity to choose a local business of my choice and trying to create something that could actually benefit them was a very rewarding experience. It was also a challenge because Of The Muses didn't have a website publicly, which pushed me to research a lot more and emphasize on the interviews.
Considering the timeframe, there were a few takeaways I got out of this project:

Time management is important. Although I created a schedule of when I was going to finish certain deliverables, it was still tough for me to stay on schedule. I need to be able manage my time more efficiently as well as prioritize.

Testing is very important. Another thing I struggled with was being able to test with participants efficiently. Whether it's asking the right questions or finding enough participants, I learned that both are very important and crucial in developing the final product. I need to practice as well as know when I need to test more.

Next steps will include:
  • Implement the visual design on the responsive wireframes.
  • Handoff to developers to go live with the clients approval.
  • Continue to update, iterate, and maintain product.