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
4 weeks
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.
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.
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.
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.
Ages: 19 - 29
Gender: Female
Ages: 25 - 39
Gender: Male
Ages: 30 - 49
Gender: Male
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.
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.
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.
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?
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 PrototypeA 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.
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.
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.
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
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.
