© David Hyun Ishii UX/UI Designer

Role: UX/UI Designer (from Competitive Analysis to Final Design)

Timeline: November 2017 - January 2018

Skills & Tools Used:

- Competitor Analysis

- User Research

- User Interviews

- User Personas

- Information Architecture

- Site Mapping 

- Wireframing

- Usability Testing

- Style Guide Design

- Sketch

- Invision

- Principle

- Photoshop

01 Competitive Analysis

Gather information, define objectives, write user stories, and develop goals for success.

05 Information Architecture

 Card sorting of the primary features to ensure usability.

02 User Research

Research based on people with tattoos and tattoo artists.

06 Prototyping

Sketching and creating wireframes and prototypes of the pages and features of Inkd.

03 User Personas

Create personas who embody the behaviors

of my target audience

07 Usability Testing

In-person and remote usability tests were performed on select participants.

04 User Flow & Journey Maps

Mapping the scenarios users will take while using the features of Inkd.

08 Measure & Learn

Success and error were measured and revised for next iterations.

With only a handful of tattoo apps and websites online. There needs to be an easier way for users to browse tattoo designs, connect artists with consumers, and find new artists. When getting a tattoo, it’s a life long commitment so most people want to be sure they’re getting the best tattoo they can. 

Problem

By creating an app that eases the scheduling and planning process of getting a tattoo, it will create more satisfied customers as well as artists.

Solution

I researched the top three tattoo apps on the market to find out their objectives, marketing strategies, strengths and weaknesses. The three apps I researched are “Find Me Ink”, “Tattoodo”, and “Inkhunter”. This helped me determine what I needed to do to make inkd a better app.

Strengths

- A lot of content

- Many tutorials

- Nice Layout

- Ability to make consultations and save designs in your account

Weaknesses

- The shop, artist, and event list is only in the US 

- The search feature is confusing

- Not many users

Threats 

- You could probably find the same information on Instagram or Facebook

- Artists would need incentive to update their profile and content

Opportunities

- Better marketing so more people can and out about it 

- Research on their part to add more artists, shops and events to their app

I conducted interviews with 5 participants, who have tattoos, to better understand their wants and needs when it comes to getting a tattoo. Affinity mapping was used to organize the information I gathered to  determine the users behaviors and attitudes, needs and goals, and frustrations.

Behaviors and Attitudes

- Social media was a key factor when looking for tattoo artists and inspiration.

- Users rely on recommendations when it comes to finding an artist.

- When thinking of a design, users brainstormed ideas or concepts,

looked at different styles.

- All users were likely to use an app to find tattoo, artist, or schedule appointments.

- All users had no difficulties when trying to describe what they wanted to the artist.

- If users needed to describe what they wanted from an artist. Using examples would be the easiest.

 

Needs and Goals

- An artist who is skillful, careful, and safe.

- Users want to know about the artists reputation from other clients.

- Users would want a better scheduling feature.

- Viewing a clients previous work and pricing information is necessary.

 

Frustrations

- Users wished they thought about pain when getting a tattoo.

- Users regret not planning out the placement of tattoos on their body so they are visually appealing when next to each other.

- Planning for getting more tattoos.

- Users had trouble locating artists that they found on social media.

- Users found it diffcult to get in contact with a shop via telephone.

- Users don’t suggest getting tattoos overseas or from guest artists.

User want to know more about the artist from other clients and a better way to schedule appointments.

Based on the information I recieved from my User Research, I created 3 User Personas which embodied the behaviors and need of my target audience. Users Personas helped me empthasize with my target audience during the design process.

User Journey Maps were created for each persona to visualize their emotional highs and lows when completing a task. User Flows were created from the User Journey Maps, which illustrates how the user would complete each task.

I gathered participants and administered a closed-card sorting exercise using Optimal Workshop, to organize different content topics into categories that made the most sense to them. I learned patterns which will help users when organizing information and where it would go. I then created a site map, which is the blueprint for ma app. It displays the possible interactions the user can have, as well as the hierarchy of the content.

Based on the results from this exercise, I could create a site map which users could easily navigate through.

After analyzing all of my research, I sketched out Low-Fidelity Wireframes for three main features of inkd. Contacting an artist, uploading a design to the Marketplace, and adding a design to your favorites.

The goal was to have a basic idea of what the main features will look like. These were the Home, Marketplace, and Artist Profile screens.

I revised my low-fidelity wireframes and transferred them to Balsamiq. I added some details and fully planned out the key features of the app, including adding something to your favorites, messaging an artist, and uploading a design to the marketplace. 

I conducted six Usability Tests, two were in person and four were moderated in-person tests. The goal of these tests were to examine the core functionality of ‘Inkd’. I analyzed the information using an affinity diagram, which allowed me to group important information to better understand users behaviors and emotions. 

My results were organized into four groups. Observations, Positive Quotes, Negative Quotes, and Errors. Each participant was assigned a different color to visually understand their thoughts.
Evidence

3 out of 6 participants didn't understand why the top navigation was there. 2 out of 6 participants had trouble trying to figure out where to click and had trouble reading the different options. 

Solution

I got rid of the top navigation and added a larger search bar. I changed the layout so everything is visible and adjusted the color and opacity of text and images so it easier to navigate through.

Homepage 

Users had trouble understanding how the top navigation worked. The contrast of the search bar and other text was too difficult to read. 

Homepage v1

Homepage v2

On-boarding Pages

Without a description of the main features, users had trouble understanding the tasks given to them. So it was necessary to add on-boarding pages.

Evidence

3 out of 6 participants had trouble understanding why they needed to upload a design to artists.

Solution

I added on-boarding pages to give the user a summary of the Marketplace and other main features. This will help users understand the point of Inkd, as long as they read it.

Homepage and Artist Profile Wireframes 

Based on the results from the Usability Test, I was able to make the necessary revisions to my design. I also looked back at my previous designs to see the progress with what worked and what didn’t.

We now have a greater understanding of what tattoo enthusiasts want and need in an app. As someone who is familiar with tattoo artists and consumers, I had a lot of fun learn about how to bridge the gap between them. All of the key features are functioning and we will continue to update Inkd to best meet the users needs.