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