Nov. 2018 - Jul. 2019
Competitive analysis, user research, sketching, prototyping, UI
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.
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
Collaboration with collector
Know what kind of person they will be working with
Learn the collectors' needs
Both personas valued the desire for safety—to know what to expect from other people.
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
Having 5 or fewer options in the overlay screens at a time
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
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.