Tatu
Tatu is a web app designed for a community of tattoo enthusiasts to help them find tattoos, artists and studios.
For this project I completed a large range of UX processes including competitive analysis, surveys and interviews, user personas, user journeys and mental models, user flows, UX design, visual design, prototyping and usability tests. The whole process took four months and I completed the project in November of 2020.
Target User
Tattoo enthusiasts or anyone looking to get a tattoo
My Role
UX/UI Designer
Problem
Because many people regret the tattoos they get, users need a way to find a tattoo artist and the style, color and placement of a tattoo that fits them best.
My Process
1. Discover
4. Edit/Document
1. Discover
Competitive Analysis
To get a sense of their strengths, weaknesses, opportunities and threats, I analyzed two competing tattoo apps. I looked at their usability, layout, navigation structure, CTAs and how I could differentiate my app from theirs.
InkHunter
I learned from InkHunter the importance of keeping my app's layout very simple for displaying tattoos. I also learned that the quality of the tattoo images and using on-skin images is very important for users to see.
I learned from Tattoodo the importance of creating an easy path for users to connect with artists and studios. I also learned to avoid being inconsistent when designing buttons.
Tattoodo
Surveys & Interviews
To help inform the design of Tatu, I conducted three interviews and 27 surveys were completed by target users. I had three research goals for these surveys and interviews.
1. To document user pain points when researching tattoos, getting tattoos, and using tattoo apps.
2. To collect data on the context in which users would use a tattoo app.
3. To understand what tasks users would like to complete when using a tattoo app. I used my findings from the surveys to inform my script for the interviews.
Then, once the interviews were completed, I analyzed all the information I had gathered using three affinity maps. This research gave key insights about our target user’s wants/needs. The main insight was that most users believe that communicating with a tattoo artist is the best way for them to figure out what tattoo will work best for them.
2. Define
User Personas
To give my research a human face and narrative, I created three user personas. I based these personas on real data from the users I interviewed.
View User Personas →
User Journeys & Mental Models
In an effort to understand exactly what our users want to accomplish, I created user journeys and mental models. Mapping each persona’s state of mind throughout a process helped identify how they would accomplish a set of tasks or a larger goal.
View User Journeys & Mental Models →
User Flows
Informed by the personas, I then made three user flows. These helped me discover what screens were needed before I began the UX design phase of the project.
View User Flows →
3. Design
IA/Wireframing
I created a sitemap to outline the hierarchy of the app. I used a strict hierarchy, but realized as I was building the prototype, that a co-existing hierarchy would work better for this app, so I modified the design as it developed to reflect this.
I also tested my architecture using card sorting and after analyzing the results of the test, I made a slight change to the sitemap to include a messages link on the home page. This would allow easier access to messages without the user having to navigate to a subpage.
I then created low-fidelity wireframe prototypes for both the mobile and desktop screens that displayed the most important functions of the app.
Find an Artist
Prototyping / Usability Testing
The wireframes informed the creation of working mid-fidelity prototypes, which I then used to perform usability tests with potential users. I had three goals for the usability tests:
1. To observe and measure if users found it easy to navigate through the prototype.
2. To see if the users made mistakes, to see how they recovered from them.
3. To observe each user’s overall satisfaction with the app.
I took the results of the usability tests and created an affinity map and rainbow spreadsheet to help organize the information gathered.
View Affinity Map & Spreadsheet →
I then took the findings from the spreadsheet and made changes to address the issues users had during the usability test.
Evidence: 2 out of the 6 testers thought having two magnifying glass icons was confusing and one tester thought the community icon was confusing.
Error Rating: 3
Suggested Change: Change the home icon and add text under all main navigation icons.
Tatu
Visual Design
With a tested, revised prototype in hand, I then used my mid-fidelity prototype to design a high-fidelity prototype and build out the functionality of the important parts of the app.
View, filter and save tattoo ideas from many artists and studios, to get a better idea of what kind of tattoo you want.
Find and filter artists based on location and view their work.
Message artists you like and then book an appointment to get inked.
Make friends with similar interests, share ideas and get inspired.
4. Edit/Document
Design Collaboration
Once the high-fidelity prototype was complete, I collaborated with some of my peers to see how well my prototype worked and to see if there were ways I could improve it. I took the feedback and made a few edits to the design.
Comment:
I feel the icons for save, heart and comments can be a bit bigger to ensure they are properly accessible.
Agree:
I made each icon larger and modified the shape of the bookmark icon to make the height of the icons consistent.
Comment:
The contrast of the icons to the background is very low which can be an issue for accessibility. Why not make the icons in white color as well (like you have for the borders for the fields?)
Agree:
I gave them 100% opacity when active so they’re easier to see.
Comment:
I feel there should be different background color for chat messages.
Agree:
I gave the response messages a light grey background to make it easier to see the difference between the message and response. I also moved the response text slightly closer to the icon to show the association.
Design Language System
Once the edits were complete I created a design language system in preparation for handoff to developers.
Working Prototype
What I would do differently
Because of my limited time, I wasn’t able to fully design every page of the app including desktop and tablet sizes. My course ended shortly after editing the high-fidelity mobile prototype. So if I had the opportunity to push this even further, this is what I would do:
- Perform a usability test with the mobile high-fidelity prototype
- Test high-fidelity prototypes for tablet and desktop sizes
- Add more UI animation to increase user enjoyment
- Cherokee Brick — Website Redesign
- UX/UI Design