1. Competitive Research
Research the competitor's website to understand how they define problems and find solutions.
Oni Tattoo Studio
Responsive Web Design | Visual Design | Research | Personas | Module Map | User Flow | Branding | UI Kits | Wireframes | User Interface | Prototype
Background
Aaron is a professional tattoo artist with a decade of experience in the industry. He specializes in the Traditional Japanese Style, as well as the New American Style. Recently, Aaron launched his own studio and is looking to create a responsive website to grow his business. The primary objectives of this project are to showcase Aaron's portfolio, attract new clients, and facilitate appointment booking due to the COVID-19 pandemic. Oni Tattoo Studio now operates by appointment only, and the website will allow seamless online appointment booking and consultations.
Goal & Challenge
The main challenge for this project is to create a responsive website for Oni Tattoo Shop. The website should enable users to access information about the artist and easily find the specific tattoo style they are interested in. Additionally, it should allow users to schedule consultations and tattoo appointments online with ease.
1. Research
Research Goal
- What is the real need of the owner? What is his goal and motivation of building this website?
- How do people choose a tattoo artist? What is the most important aspect when they choose a tattoo shop?
- What are the expectations of clients at tattoo shops regarding consultation and booking appointments?
- What other key functionalities does the owner want to add to this website?
Methodologies
2. Stakeholder Interview
Conduct an interview with the business owner to gain insight into his specific business objectives, the factors driving his motivation, and the challenges or pain points he is currently facing within the business.
3. 1 on 1 Interview
To gather information about people's ethnography, as well as their needs, goals, and motivations, and their expectations for this site.
Secondary Research
BANG BANG NYC
Strengths
- Clear brand image
- Modern and professional
- The flow of landing page is easy to use and clean
- Each artist gets a description page and art work showcase page
Weakness
- No Navigation
- Hard to find support function if users have any questions.
- Visual design and branding of the website does not align the tattoo shop's style.
NICE Tattoo
Strengths
- Clear brand image and align with tattoo style
- Navigation is straight forward and clear
- Clear user flow
Weakness
- The website needs images and has excessive text other than on the landing page.
- Weak UI design
- Artists do not have their own page to showcase their artwork.
TATTOODO
Strengths
- Clear web flow
- Great UI Design and simple search engine to find the desired tattoo sample
- A large section on the landing page to showcase tattoo artwork to attract users.
- Demonstrating each step of the consultation session to users.
Weakness
-Could provide more detailed and customizable filters on the search page.
2. Define
Personas & Empathy Map
After conducting research and user interviews, I created a persona named "Rebecca Field" based on all my findings.
Rebecca is a portrait photographer who enjoys capturing her surroundings. The persona, along with the empathy map, encapsulates the goals and pain points that potential tattoo clients might have based on my research.
Persona
Empathy Map
Site Map & User Flow
I created the persona to reflect the diverse goals, motivations, and pain points of our users.
Through extensive research, I developed a site map and user flow that precisely align with the website's requirements.
My primary aim is to ensure a seamless and intuitive user experience, allowing users to effortlessly navigate the site and locate the information or products they are seeking.
Site Map
User Flow
3. Design
Wireframes
The responsive low-fidelity wireframes for different devices.
.png)
Branding & UI Kits
Aaron is highly skilled in creating traditional Japanese-style tattoos. For our branding, I chose to feature the Japanese character "oni" as the primary logo to capture the essence of this style. I used a brush stroke to emphasize the oriental atmosphere.
The primary colors I selected for the branding are red and black, which are consistently used throughout the website. This color scheme was chosen to evoke a sense of sophistication and luxury, reflecting the values of Japanese culture and artistry.
%201.png)
Responsive UI Frames
I have integrated UI elements into the wireframes to develop responsive UI frames for this application.
.jpg)
4. Test
Prototype
In order to test the design and functionality of the entire application, I enlisted 5 participants from diverse occupations and backgrounds. I created 3 scenarios for the testers to complete and observed their reactions via Zoom meetings.
Affinity Map
I've gathered insights from my testers, and it's become apparent that the Oni tattoo studio website poses specific challenges and frustrations for them.
A key finding is that the appointment page is causing significant confusion among testers. It's clear that this page requires additional, detailed information to clearly outline the appointment booking process for users.
.png)
5. Conclusion
The objective of this project is to develop or improve a responsive layout for a local business. Specifically, the goal is to create an official website for a professional tattoo artist who has recently opened a studio.
Client communication is a crucial aspect of this project, and it marks the first time I will be working directly with a real client. This entire process will provide valuable learning experiences and give me a better understanding of completing a practical project.
There's still a lot to do for the next step:
Phrase 1:
Refine Appointment page
Add preferred style, inspiration image, description box.
Refine consultation information
Phrase 2:
Refine check out process from goods page
Shipping information
Phrase 3:
Online Deposit
Alert system for appointments
