Course Project • UX/UI Design
I designed a tattoo mobile application called InkTank as a project assignment for my UX Design course. I chose this project as I was actively looking to get tatted, using multiple websites and mobile apps for this purpose and finding the whole process quite difficult.
Explore inspiration for tattoo designs according to preferences like artist and style.
Problems and Goals
In order to create a useful and intuitive tattoo app, I looked through a few of the most popular tattoo apps and read their reviews and conducted 3 initial user interviews. I wanted to determine how other people were looking for and organizing their tattoo inspiration and what their experiences were.
What I discovered
The most popular existing tattoo apps have certain user pain points, such as overwhelming interfaces (Tattoodo) or difficult search tools (InkSquad).People were easily overwhelmed when looking for a perfect tattoo and tattoo artist.
Some people had no idea where to start, while others knew what design or style they wanted but didn’t know which tattoo artist to go to. Most wanted some type of consultation.
Most of those I interviewed relied on Instagram or Pinterest to search for tattoo inspiration. While these are great tools for browsing photos, it’s difficult to search for or filter for a certain style/artist location, so users use multiple apps to search for photos and then find a nearby artist.
Problem Statement: Users need a convenient and personalized way to browse tattoo designs and the portfolios of nearby tattoo artists, with the ability to reach out for consultation/feedback in order to get their perfect tattoo.
Who is it for?
I created user personas to help organize different user demographics: the tattoo noob, the tattoo enthusiast, and the tattoo artist. Defining their behaviors, needs, and frustrations helped pinpoint how they would approach and navigate a tattoo app.Full User Personas (Google Slides)
Designing a Solution
Based on the interviews, I knew the main functions must include:
- the explore screen
- ability to bookmark inspiration and easily find them again
- ability to contact tattoo artists directly
I created a site map to work out the basic layout for the mobile application and started sketching out some low fidelity wireframes.
I started off trying to make the interface and navigation as simple as possible, therefore choosing to draw the first wireframes with only 3 main selections and tried to fit all searching/exploring of tattoos and artists on an “Explore” page.
Two potential users felt overwhelmed by the dashboard. There was simply too much going on (and now I know designs should limit the number of actions a user can take per screen!). Splitting the “Explore” page into “Home”, “Tattoos”, and “Artists” would be more relevant to different users, depending on if they were simply browsing or if they were seriously looking for a tattoo artist in their area to book an appointment.
I updated the site map to reflect these changes.
Usability Testing and Feedback
I conducted 6 moderated usability tests to:
- Measure the learnability and intuitiveness of navigating the mobile application for first-time users
- Determine what features need onboarding
- Get general feedback on the usability, design, and structure of the application
I asked users to complete certain tasks during the testing process:
- Sign In/Create an Account: Determine if the process is smooth and users can easily sign in or create a new account
- Onboarding: Determine if the current onboarding process is effective or if additional/less onboarding is necessary
- Explore and Browse the App: Determine is navigation is intuitive and users can easily explore new categories or find what they are specifically looking for
- Message an Artist: Determine if users can easily find a tattoo artist and message them for personalizing a tattoo design or booking a session
- Issue 1: Users had difficulty selecting certain buttons (high severity)
Solution: Increase touch spaces following guidelines suggested by Material Design (48 x 48dp with 8dp of space in between)
- Issue 2: Headings were too close to “back” icons, creating some confusion (medium severity)
Solution: Center headings while keeping the back button left-aligned
- Issue 3: Onboarding screens regarding personalization was overwhelming (medium severity)
Solution: (see below in Polishing the Design)
- Issue 4: Interface seemed unappealing/not mature (low severity)
Solution: Change navigation bar icons in favor of more minimalist/mature icons suitable for target market (age range of 18-40)
Polishing the Design
After fixing the discovered usability issues, I focused on creating a high-fidelity wireframe and prototype. I utilized UsabilityHub for preference testing and gathered feedback from my CareerFoundry mentor and fellow students. I also reviewed the WCAG to make sure the app would be accessible.Design Language Systems
I went over each screen with the same approach and asking the same questions:
- Which features are actually crucial?
- Is there a way to simplify this screen?
- Does the visual hierarchy make sense?
- How would (persona name) want to interact with this page?
I experimented a lot with my designs and constantly asked for feedback on my reiterations. I had a few mentor calls where we just focused on the UI and I bugged my sister and a few friends about more major changes. I ran a couple of preference tests for my sign-in screen, conducted usability tests, and individually messaged fellow students through Slack to check out the prototype.
The data collected from user research helped make the prototype much more intuitive. The overall design now has larger images and fonts while gaining more white space, making it easier to scan through and simplifying the UI.
The initial screens asking users to select their favorite tattoo styles wasn't intuitive, and this was made obvious through testing.
Many participants either spent more time deciphering the screen or completely skipped the step where they could learn more about a tattoo style. I was also told the screen was overwhelming, most likely due to not having enough white space.
I adjusted the flow and was able to eliminate a screen. In addition, the current iteration has a bit more breathing room, with larger images and more negative space in between rows. The informational overlay also feels less cluttered and gives space to show photos one-by-one.
The initial search bar was meant as a master search bar of sorts, where you could type any tattoo or artist name and a bunch of suggestions would be generated. However, users might not realize they can also search for a specific artist or city, and coding this massive search tool could be a huge headache for developers.
Categorizing their searches by tattoos and artists would allow users to find what they were looking for much more quickly.
Results and Takeaways
Problem statement: Users need a convenient and personalized way to browse tattoo designs and the portfolios of nearby tattoo artists, with the ability to reach out for consultation/feedback in order to get their perfect tattoo.
InkTank tackles all aspects of the problem statement, though of course is only one solution to the problem. I learned a lot from working on this project, from spending time with my mentor discussing pros and cons of design choices for each screen, to being reminded from testing that I should never assume my opinions and assumptions will reflect the general user. I'm thankful that I was able to add more tools to my toolbox.