TatThat mobile app

Adding permanent art to one's skin can be a scary experience. With TatThat, community involvement and an AR overlay tool were designed to ease that fear.

Timeline

Nov. 2018 - Jul. 2019

My role

UX/UI Designer

Competitive analysis, user research, sketching, prototyping, UI

Results

Iterative mobile app design process for UX bootcamp final project.  

Built with Figma, Invision, Draw.io, Prott, Optimal Workshop, and all the sticky notes.

The information architecture for TatThat was tailored for two main personas, based on their goals and needs.

Tattoo Collector
  • Build a tattoo sleeve with a single artist

  • Time to budget - knowing tattoo artists' rates is a must

  • Fear of permanence or design mistakes - see how a design looks before getting tattoed

Tattoo Artist
  • Collaboration with collector

  • Know what kind of person they will be working with

  • Learn the collectors' needs

Screen Shot 2020-12-16 at 7.29.41 PM.png
smartmockups_jwwmegnu.png
Both personas valued the desire for safety—to know what to expect from other people.
Solutions: 
  • Reviews

  • Publicly displayed rates

  • AR overlay of designs tool

The AR overlay tool proved to be the most difficult user flow to get right. 
What didn't work
  • Multiple locations for tools

  • Sliding drawer holding media library

What worked
  • Onboarding video

  • Having 5 or fewer options in the overlay screens at a time

onboarding-evolution.png
The onboarding process was the second most tricky user flow to get down.
What didn't work
  • Individual screens describing the different features found in TatThat (e.g. profiles, AR tool, etc.)

  • Gathering photo access and location access in the onboarding process

What worked
  • Using coach marks, guiding the user through a variety of features

  • Adding location permission upon first visiting the tattoo shop map 

  • Adding photo permission upon first use of the overlay tool

User testing showed 4 key weaknesses in the high-fidelity prototypes.

Points of Friction

1. User expected to create an account in the menu rather than in the profile section.

​2. The tattoo gallery feature was not used, a more obvious feature was needed to find tattoo shops and artists.​

​3. Steps involved in the design overlay tool were not intuitive. Users did not know what AR meant.​

​​4. There was confusion with the terminology used in the onboarding process; this made users not want to go through it.

Ways to improve

1. Add user sign-up and log-in into the main menu.

2. Combine features of the home and gallery pages into a single landing page.

3. Market the design overlay tool in the onboarding process (e.g. with a tutorial video). Provide coach marks to walk the user through the AR design process. AR name was changed to overlay tool.

4. Incorporate coach marks into landing page.

TatThat Screens
The overlay tool and the onboarding processes
were reconstructed with coach marks and step-by-step guidance. These changes helped address confusion around the TatThat lingo.

© Cassie Castrejon Design 2021