Think Ink
A one-stop shop for
getting inked.
Think Ink is an app for easily finding tattoo design inspiration, looking for a tattoo artist, and booking appointments.
It is a one-stop shop for anyone who is interested in tattoos, from novices to experts. This app is designed to make the process of getting a tattoo painless! Until you get to the salon that is…
Background
This project was completed as a part of the Career Foundry UX Immersion Course. The goal of this project was to use the UX design process to create a clickable prototype with a mobile first approach.
Role
Sole UX Designer
Time
5 months
Tools
Adobe XD
Balsamiq
OptimalSort
Design Process
For this project, I applied the design thinking process with an iterative approach and ensured that any design decisions made were user-centered. In this case study, I will explain how I used each step of the UX design process to create a mobile prototype that is useful, delightful, and provides value.
1. Understand
The Problem
People looking to get a tattoo need one place they can go to find a tattoo design, find an artist, and book an appointment because they are currently having to scour multiple different platforms and to get the information they need to find a design they love and find an artist they trust.
We will know this to be true when we see users contacting artists through the app and trusting them enough to book an appointment with them.
Competitive Analysis
There are not many products in the market that serve as a one stop shop for finding tattoo designs and artists, so I chose to analyze an indirect competitor, Inkbox, and one direct competitor for finding tattoo artists, Tattoo Artist Finder.
User Stories
The last task I did to get an understanding of potential users was creating user stories. The user stories helped me get an understanding of which features I could include in Think Ink, and I was able to refer back to these throughout the design process.
2. Observe
User Research
In order to gain a further understanding of the motivations people have to get a tattoo and what they enjoyed/disliked about the process, I interviewed 3 people from my personal network about their experiences getting tattoos.
Key Findings
Tattoos are extremely meaningful for some of those who choose to get them, as they can be reminders of things that are important to them. Because of such strong motivation, users will find a way to create the right design even if it takes a long time.
Researching tattoos designs is more about finding a style rather than a finished design. It matters to users how flexible the artist is to work with the user to develop a design.
Users need one place to store tattoo images that is easy to look back on. They search for images in multiple places, like Google Images or Instagram, and easily lose track of which ones they like.
3. POV
User Research
Because users with different levels of experience getting tattoos will be approaching the process with different mindsets and different needs, I created 2 user personas: Sarah, who reflects someone who has never gotten a tattoo before and is new to the process, and Luna, who has multiple experiences with tattoos.
Mental Models
After creating user personas, I went one step further and delved into the mental models of each persona. This allowed me to see how each persona would interact with Think Ink and gave me valuable insight to use in the ideation phase.
Task Flows
Based on the mental model for Sarah, I created a task flow based on how she would interact with the app. Doing this gave me a good picture of the steps a user would take to complete a task and which screens I need to design to allow a user to effectively complete the task.
Core Features
Save an image to an album
Since the personas, mental models, and task flows allowed me to better understand my user’s needs, I was able to narrow down core features to focus on for the remainder of the project.
Search for a tattoo design
Share a tattoo image
with a friend
4. Ideate
Original Sitemap
With these features in mind, I created a sitemap to outline the information architecture of the app.
Card Sorting
I then conducted a card sorting exercise using OptimalSort with the goal of either validating the original sitemap or identifying what changes need to be made.
I chose to use a closed card sort because I already had a good idea of the categories I wanted the structure to branch from, but if I were to redo the exercise I would use an open card sort so I could learn how the users naturally browse the content instead of assessing whether they can sort the topics into the correct category.
Popular placements matrix
Most of the card placements confirmed their locations from V1 of the sitemap, but a couple changes to make would be allowing the user to make an appointment request and access the artist’s chat box directly from the artist’s page.
Updated Sitemap
The changes made to the sitemap were to allow the user to make an appointment request and access the artist’s chat box directly from the artist’s page. The quiz questions were chosen to be simple and concise.
5. Wireframe
Low and Mid-Fidelity
Wireframes
I started the wireframing process by sketching out low fidelity screens for each core feature, then moved on to creating the mid fidelity screens in Balsamiq.
Mid-High Fidelity Wireframes
To further increase the fidelity of my wireframes, I used Adobe XD, which gave me more control over some of the details in the design. I used XD to create a clickable prototype that I conducted usability testing with.
6. Test
Usability Testing
To test my prototype, I recruited 6 participants from my personal network and conducted moderated remote testing over Zoom.
The goal of the test was to assess the functionality of the app and observe new users interacting with the app for the first time.
Participants were asked to complete a few scenario-based tasks and whether they were satisfied with the ease of the tasks. I then compiled the results from the tests into a rainbow spreadsheet.
Visual Design
Design Principles
After making improvements to the prototype post-testing, I moved forward with developing the visual design of the app. To do this, I used Gestalt Visual Design principles and grid fundamentals.
Design System
To ensure that the design stayed visually consistent throughout the app, I created a design language system.
Typography
Colors
Icons
Think Ink prototype
Reflection
Challenges
I can be quite a perfectionist sometimes, which is useful when I need to do detailed tasks, but I found myself spending a lot of time trying to figure out minor details when I didn’t need to, like in the low and mid fidelity stages.
User interviews and usability testing was also challenging because I struggled with asking the “right” questions. Reminding myself that this is an iterative process and I can always conduct more tests to get more information later was helpful.
What can be improved?
Now that I have learned about visual design principles and using grids, I would incorporate them earlier in the design process to avoid rework later.
Next Steps
For this case study, I only focused on 3 features, so next steps would involve expanding the feature set to include the artist profiles, messaging, and booking appointments.