InkWell

A Case Study

What is InkWell?

The tattoo industry in the U.S. is thriving. 36% of 18–25 year olds and 40% of 26–40 year olds in the U.S. have at least one tattoo. But there is not a lot of technology linking tattoo seekers with tattoo artists.

I was tasked with developing an app that helps users explore the inspiration for tattoo designs and match with an artist to execute the design for a course.

User Experience Phases

Understanding the Context

Research tattoos and attitudes towards getting them.

Understanding the User

Determine what would be of value to users. Conduct interview to create User Personas with whom I could empathize.

Concepting

Design prototypes, from easily changeable, hand-drawn low-fidelity wireframes through digital high-fidelity ones. Create a prototype with key functions.

Usability Testing

Hold user tests to pinpoint any areas of friction in the prototype and iterate new designs that would address the issues.

Refining the Design

Fine-tune the designs to be accessible and pleasing to users

Final Product

Prepare style guides, design language systems to hand off files for development of the InkWell app.

Understanding

the Context

Project Goals

Explore the complex and personal process that people experience in their search for tattoos and artists.

Search for ways to improve their experience.

Develop a responsive web app to assist users in finding a tattoo that they won’t regret.

My Role

  • User Research
  • Information Architecture
  • Interaction Design

Tools

  • Optimal Workshop
  • Usability Hub
  • Miro Whiteboard Platform
  • Paper Templates
  • Adobe XD
  • Photoshop
  • Illustrator
  • InDesign

UX Competitive Analysis

I researched popular tattoo apps. Writing SWOT (Strengths, Weaknesses, Opportunities, Threats) profiles helped me gauge user expectations and identify features that could be improved or created for users.

I found that the strongest competition offered a large amount of quality content/artists/studios. One app offered augmented reality and rudimentary editing capability to try on tattoos. But there were not any apps that offered both browsing of tattoos/artists/shops and editing of tattoos.

Click through to view the slide show.

Business Requirements Document

Writing this list of requirements forced me to determine the scope, S.M.A.R.T. (specific, measurable, actionable, realistic, time-based) goals, and functional requirements of the InkWell app.

Click through to view the slide show.

User Stories

Putting myself in the shoes of a tattoo seeker, an artist, a shop owner, and an administrator/marketer, I imagined what actions they would want to complete and why.

These actions helped me to create specific user flows.

“As a tattoo seeker, I want to like/save designs, artists, shops, so that I can think about them over time and go back to them when I am ready to get my tattoo.”

“As an artist/shop owner, I want the app to show videos and articles on the blog, so that I can let the app ease the responsibility of explaining some concepts, especially sensitive ones regarding skin color.”

“As an artist, I want to show my designs by style, so that I can show tattoo seekers that I specialize in that style.”

“As a tattoo seeker, I want to edit the size, color, and placement of multiple designs, so that I can alter them to my liking and use the images to fully illustrate what I want to artists.”

Understanding

the User

Research Methods & Goals

Using user interview and surveys showed me how users think and feel about tattoos.

The interviews helped me gather qualitative data that identified user goals and needs.

The surveys were intended to help me gather quantitative data, but I did not get enough results for a meaningful analysis.

Tattoo Seekers
  • What do they look for when searching for a tattoo design/artist/shop?
  • What are their main concerns?
Tattoo Artists
  • How do they find clients?
  • How do they develop their designs?
  • What would help them build their client base and portfolio?
Tattoo Shops
  • How do they find customers?
  • What would help their shop attract customers?
  • What differentiates their shop from other shops?

User Research Analysis

After conducting five user interviews, I posted my notes and mapped them into common user goals and attitudes.

Common Themes

  • Users reacted negatively to the current ubiquity of tattoos.
  • They felt that tattoos have lost their meaningfulness.
  • Most of the users came in with designs in mind.
  • Most of the users found artists through word-of-mouth.
  • Honesty from artists was important.
  • Users tended to go to whichever tattoo shop was closest to them.
  • Even for lighter-skinned tattoo seekers, colors did not show up as expected.
  • Concerns included long-term satisfaction, cleanliness of shop, and cultural accuracy.

User Personas

I used the research from my user interviews to create personas of potential InkWell users. Throughout the development process, I referred to Janeta (the Millenial) and Carlie (the Early Adopter), to remind me of who would be using the app, and what functions they wanted to see.

User Journey Maps

After I had crafted user personas, I could expound on their feelings when completing different tasks. I also explored opportunities for improvements, specific to the personas.

Task Analysis & User Flows

Building user flows helped me keep the users in mind when building task steps so I that I didn’t focus on how I would have personally completed the tasks.

Click through to view the slide show.

Concepting

Sitemap

I decided to use co-existing hierarchies  for the information architecture of InkWell because I wanted users to be able to access most of the pages from other pages and not have to follow strict paths.

 

I conducted a card sort with Optimal Workshop to see if users saw different patterns, but the results didn’t alter my sitemap.

Navigation Wireframes

I used pen and paper to quickly create initial navigation patterns.

In keeping with the Mobile-First design, I only used a mobile template for the wireframes so I could save time when creating low-fidelity wireframes for different screens.

Click through to view the slide show.

Wireframes

Low Fidelity

I focused on three vital InkWell functions. While creating these wireframes, I looked at similar functions in other apps and websites so that I had a better sense of design patterns. I knew using similar designs would make it easier for users to recognize and follow the functions.

Mid Fidelity

These wireframes added details to the basic user flows from the low-fidelity wireframes.

High Fidelity

Once the user flows were established and the general placement of the elements was in place, I fleshed out the designs.

I changed the focus of one of the functions from creating a tattoo board to trying on a tattoo since I thought it would be more valuable to the user when I hit the the user testing phase,

Search/Filter
Search/Filter
Search/Filter
Create a tattoo board
Create a tattoo board
Create a projected tattoo
Contact an artist
Contact an artist
Contact an artist

Usability Testing

Usability Test Plan

I wrote a user test plan once I developed an initial prototype of InkWell where users could try the key features I explored.

Goals

To monitor the learnability and efficiency of key features of the app for first-time users, and to determine the severity of errors that they encounter.

To observe user frustrations and assumptions

To brainstorm how to minimize errors and improve user satisfaction.

Test Sessions

I conducted six in-person and remote test sessions. After explaining the purpose of the session and the app, I presented three scenarios and asked the users to complete a task for each one.

View the Test Script

Usability Test Results

Much like I did when I conducted initial user research interviews, I wrote out notes from the recordings of my usability sessions. I made sure to include direct quotes from the participants that described what they were thinking, doing, and feeling.

After entering my observations from the affinity map into a rainbow spreadsheet, I classified the severity of the errors to prioritize the tasks in the next phase.

Usability Test Report

I tried to demonstrate the errors found in the usability tests and presented possible solutions for the next iteration.

Click through to view the slide show.

Refining the Design

Preference Testing

Since I struggled with the Search feature and menu navigation I decided to preference test the search area using Usability Hub. 68% of users preferred Option A, so I felt secure applying the change to the prototype.

Visual Design Principles

After reviewing Gestalt psychology, I altered the designs to create more balance, unity, emphasis, unity, and clear hierarchy among the elements.

Emotional Design for User Engagement

I examined which emotions the InkWell color palette evoked. While the dark purple added the appropriate mystery I replaced the yellow with red, which is associated with energy, passion, and danger.

Designing for Accessibility

To prepare for people with visual, motor, and cognitive impairments I adjusted the form fields, buttons, and text. I also used web content accessibility guidelines (WCAG) to check the legibility of my elements.

Before
After

Design Language Systems

Here are the style guide and components for any designers and developers that will work on the project.

Click through to view the slide show.

Final Product

The InkWell Mobile Prototype

Reflections

I learned so much from this project and am proud of my final prototype, but there are definitely areas where I will improve in the future:

  • Get a wider variety of users for research and usability testing.
  • Always consult the user personas and their motivations. I realized I did not develop a feature of using the app to test out facial makeup tattoos – which is not featured in other tattoo apps I’ve analyzed.
  • Study common user patterns for similar features in other apps and websites.
  • Use components in Adobe XD early so that I am not painstakingly copying/pasting/altering each element.
  • Consult the WCAG early to make sure the colors and text are legible in my designs.
  • Do more preference testing – these forced me to really evaluate my designs, and were a lot of fun!

Next Steps

I would love to work on other features in InkWell.

  • Talk to more artists and shop owners to see what they would find valuable. The features I focused on are all for tattoo seekers.
  • Ask shops about possible tie-ins so that users who have expressed interest in a shop can get a temporary tattoo for them to try on in real life.
  • Since the augmented reality feature to design and try-on tattoos was so popular, I would add the drawing and script features that test users wanted.
  • Test out facial tattoo try-ons for users to see if there is a real interest there for it.
  • Try out a feature where users with tattoos that have aged can see what a touch up for the tattoo would look like.

Thank you