Inkwell App

Project
Develop an app that helps users explore the inspiration for tattoo designs and match with an artist to execute the design
Course
UX Immersion
Year
2019

Overview

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 going through the UX process, from user research competitive analysis, through high-fidelity prototype testing.

The InkWell Mobile Prototype

Understanding the Context

UX Competitive Analysis

I conducted a UX Competitive Analysis by researching 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.

My Findings
  • 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.

Understanding the User

I had to put myself in the shoes of tattoo seekers, tattoo artists, and shop owners to imagine their goals and actions.

I began by creating user stories that answered what each user role would want to do and their reasoning. But my imagination could only go so far.

So I conducted user interviews to see how users think and feel about tattoos. The interviews showed me opportunities for the InkWell app that I had not thought of.

I completed my user research analysis by grouping my notes 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 Research Lessons

Overall, I was surprised that whether they went on a whim or spent months preparing, many of my interviewees were unhappy with their tattoos. I used this knowledge to safeguard the app from their bad experiences.

Since I pooled my users from my personal network of friends, my results may have been skewed. Thus I tried to get a broader range of user during the User Testing phase.

Developing User Functions

Using my user research, I created two user personas: Janeta “the Millenial” and Carlie “the Early Adopter”. Making them seem as real as possible helped me understand their needs, motivations, and frustrations.

I identified key functions for the app, and employed user journey maps, task analysis, and user flows to show how Janeta and Carlie would approach InkWell.

Concepting

Sitemap

Using the main functions and user flows, I created a sitemap. I used co-existing hierarchies for because I wanted users to be able to access most of the pages at any time.

I later conducted a card-sort with participants to see how they would group information. Since they grouped them the same way, I did not alter my sitemap.

Wireframes

I iterated from pen & paper low-fidelity wireframes to an interactive prototype in Adobe XD.

Low Fidelity Wireframes

I looked at similar functions in other apps/sites so that I had a better sense of design patterns.

Mid Fidelity Wireframes

I had difficulty managing so much info and navigation on a mobile screen. I had to put enough info for users to understand, but not so much that it overwhelmed them.

I streamlined the user flows, including changing a main function from creating a tattoo board to directly trying on a tattoo.

High Fidelity Wireframes

I fleshed out the designs with mock information to get a prototype ready for user testing.

Usability Testing

Usability Test Plan

I wrote a user test plan with the following goals:

  • To monitor the learnability and efficiency of key features of the app for first-time users
  • To observe user frustrations and assumptions
  • To determine the severity of errors that they encounter
  • To brainstorm how to minimize errors and improve user satisfaction

Usability Test Results

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.

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.

Visual Design Principles

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

Emotional Design for User Engagement

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 used web content accessibility guidelines (WCAG) to check the legibility of my elements.

Before
After
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

Reflections

  • Get a wider variety of users for research and usability testing.
  • Always consult the user personas and their motivations. I did not develop a feature 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

  • 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.