Making a tattoo appointment

My role: UX/UI Designer

Timeline: January 2023 - April 2023

Team of: 3

Platforms & tools

  • iOS
  • aOS
  • Figma
  • Figjam
  • usertesting.com
  • Google Survey

Context

To assist tattoo artist and customers to share and find a tattoo style or to schedule a session; Ink Tank is a web application that allows tattoo lovers. Looked on ways to search work and artist, also to book

Design Process

Discovery

Discovery:

  • Competitive analysis
  • User flows
  • Personas
  • Card sorting
  • Desk research
  • Survey
  • User interviews
Ideate

Ideate:

  • Low fiedlty prototypes
  • High fidelity prototype
  • Content
Testing

Testing:

  • Moderate user testing
  • A/B testing
Development

Development:

  • HTML Layout

Discovery

The research focused on mobile apps was the following:

  • that shares and display content
  • organizing communication
  • scheduling an appointment
competivie-analsyis-inktank information as possible to the restaurant in advance. Wroked on a mid fiedtly prototypes More detail about the Competitive and UX analysis

Survey

what did we learn?

  • How people prefer to organize their projects.
  • The user prefers setting an appointment
  • looking up ideas, and hiring a professional

User interview

5 participants / zoom

Could not find tattoo artist willing to particpate to learn

survey-overview

Persona: Meet William

From the data provided from understanding the user, I built a couple of personas, William and Danielle. To show how Ink Tank benedicts user’s day-to-day lives, I offered scenarios.

From the data provided from understanding the user, I built a couple of personas, William. I am making the scenarios to show how Ink Tank can benedict users day-to-day lives. Now that there is a better understanding of the users, I created a user flow that shows how a person navigates throughout the app.

William

If William created a new project

userflow2

More detail about the

user stories, user flow, and user journey User survey and interviews overview

More detail about the

user stories, user flow, and user journey

Initial goal:

  • Design a calendar for customers
  • Ability to save and upload images
  • Give ways for customers and artists to communicate and collaborate

Ideation: Thinking about the layout

I created the sitemap with the user flow. To update the sitemap from a user perspective, I decided to do card sorting to see what users think where content will be organized. It was interesting to see the diverse mindset when it comes to going to specific pages and content.

After sketching a low-fidelity prototype, I tested it out with a couple of users to see if the flow was clear enough for them to get to the features. I analyze the feedback and update the sketch and flow from the majority of call-outs. Once I felt satisfied with what was on paper turned the design into a high-fidelity prototype and tested it again with some users.

Low-fidelity prototype

appt-consulation appt-session build-a-project

Finally able to do the fun part, prototyping! When I was styling the high-fidelity prototype, I had a challenge picking the colors. I knew I wanted to go with an orange-red color to translate creativity. I was able to find a shade that is not only WGAG AA friendly but met my expectations. I want to improve the vector images; they look simple and do not connect with the style of the app as much as I want.

How it came all together

Testing

With the testing for time purposes, I conduct a usability test and preference testing simultaneously.

I wanted to see if the user can navigate building a project, finding an artist, and booking an appointment with the usability testing. For the preference test A/B Testing, I tested out the style of buttons. usuability-4

From the data that I've collected from the testing, I've adjusted the errors on the prototype. Some of the changes were pretty easy to change because they were styling issues, but the one feature was a challenge clarifying scheduling a session.

More detail about the testing.

Handoff

For the developers, I did provide the following infromation in the Figma file:

  • Components and elements
  • Clickable prototypes
  • Interaction notes

Takeaways

As a designer, I wanted to figure out the best way for different components to function and support the app's various features. I wanted to make sure that the elements had a flow that the users can recognize and navigate as much as possible with no assistance or confusion—building a layout that focuses on showing photos and building a project or doing a project in the same area.