IKEA
Designing a way for users to list second-hand furniture
Community is a big part of tattoo society, as enthusiasts utilize it to gain recommendations, share inspiration for designs, or build an association with one another. Despite having a diverse community, the ability to find artists that fit a customer’s criteria may be difficult to achieve without the proper elements to aid in their quest.
Inklink provides a social media aspect for users to book tattoo artists as well as provide a platform for both customers and artists to virtually design tattoos by integrating an AR system.
the challenge
Tattoo enthusiasts need a hub for both artists and customers to share and find ideas, design tattoos with one another, and have an easy booking system to fulfill their needs.
the solution
role
UX/UI Designer
time
80 hours
tools
Figma, Figjam
project type
Capstone Project
01 research
For business reasons, I've decided to do some research on both the customer and the tattoo artist user base in order to understand what each party prioritize during the tattoo process. Given that I only have my own tattoo experience to work off of, I opted for secondary research to fill in the gaps I would need to understand my demographic.
I’ve researched some top competitors in the marketplace in order to find similarities of how they display their app or website to Inklink. I then compared and contrasted each apps' similarities to find the most important aspects that could be potential elements to add onto Inklink.
Viewing an artist’s profile should resemble a portfolio for easier viewing. Artist's style and abilities are important to display for customers to make decisions.
Different experience screens for both customer and artist. Design needs to accommodate for both the customer and artist user journey.
How might we help new or seasoned customers find new artists and have the ability to design tattoos together?
After gathering intel about the data received from the research phase, two personas emerged from the insights gained. The first persona is a tattoo artist who is crafted to serve as a guide for the goals and frustrations of established tattoo artists in the industry. The second persona is a customer, who was developed to foster a sense of empathy to the customer user base and to understand their objectives.
The features I wanted to focus on were the ones that would lend to a social media-esque outlook as well as any features that ensured easier tattoo collaboration between artists and customers. These included:
"For you page": Full of inspiration images for designing
Direct messaging: Keep in contact with artists
Booking page: Helps artists stay organized with their schedule
Search with filters: Narrow down searches for a streamlined experience
AR Collab tool: Despite being high effort, the impact is also high due to easy and fast collaboration between artist and customer as the tool is virtual.
Before moving onto the drafting phase, I wanted to cement the goals that I wanted to accomplish. At this point, it was necessary to create flows for both the customer and artist.
After understand the important features to include, I built a sitemap that takes into account the functionality and ease of use for the customer. The mapping includes a navigation bar that includes features that allow the customer to easily find and communicate with the artist. One of the most important features I wanted to include in the site map was the AR tattoo tool, as it is the main aspect of the app.
Keeping the features I wanted to implement in mind, I crafted a visual representation of a customer’s journey while navigating certain aspects of the app. These flows incorporate the process of booking artists, using an AR tool, completing the task, and using a filter function.
With the task flows in mind, I sketched out some ideas in order to understand the layout of the screens. I explored potential solutions that would keep the user’s goals in mind while implementing a familiar and user friendly interface. Because I wanted to implement an AR design collaboration system, a mobile app was chosen for its ease of camera capturing and accessibility.
In the perspective of the customer, there were 5 main elements on the navigation bar that lent to the aspect of community: location, search, collaboration AR function, chat, and profile. Artists have a slightly different navigation bar — replacing the location widget for a booking widget.
Once I have established the wireframes and user flows, I crafted a style tile complete with the brand’s color palette, font choices, buttons, and cards. Inklink’s overall vibe encapsulates the feeling of sophistication, classiness, and artistic abilities. Due to these values, I opted for a primary dark mode — emphasizing on grey monochromatism with bright red accent colors for visual interest.
04 TESTING
I conducted non-moderated usability testing with 12 participants — all of which completed four task flows, which includes filter searching, private messaging artists, AR tattoo tool, and the artist booking page from the artist’s POV. Overall the flows were finished with a 83.3% success rate, which emphasizes the efficiency of the website’s navigation. The goals of the testing are as follows:
Accomplishing goals in the short time possible
Minimize errors or roadblocks that prevent task completion (ensuring app is easy to navigate)
Build consciousness of missing or excess features that could be added or removed
Because 16.7% of users didn’t complete the flows, I knew that there was room for improvement to better streamline the process.
In response to the feedback received from the usability testing, I took the most common and prominent pain points and reiterated them.
Users experienced issues with the Body Placement model as it was too small to see, which may cause accessibility issues. They suggested having a zoom-in element to enhance visibility.
It was not clear what the stylized filter icon meant. In order to locate the filtering aspect better, the icon was changed to something more familiar.
Users experienced issues with the Body Placement model as it was too small to see, which may cause accessibility issues. They suggested having a zoom-in element to enhance visibility.
final designs
I focused on creating high fidelity wireframes that emphasized greatly on easy navigation, given that tattoo planning is already a daunting cognitive load on a customer’s mind (especially if they are just starting out). In order to translate the digital wireframes to high fidelity in a refined way, I ensured that the interface was easy to navigate while keeping in mind the app’s individuality as well.
Customers are able to use the search function to find an artist or studio to fit their tattoo needs. From here, users are able to browse the artists' portfolio and book them.
Both artists and customers can collaborate virtually through a tattoo AR tool. This encourages both users to plan ahead of time and prevent mental cognitive load.
As a business/artist exclusive function, artists can view their bookings and the details within the calendar. This helps artists keep their day organized.
reflection
learnings
The creation process for an app on dark mode was a lengthy one — given that there were a lot of different factors that went into it compared to light mode. There were different rules and different ways elements were situated on the page which posed a challenge. In the end, I managed to mostly implement a AA ratio on the color palette chosen.
Building an AR system was a great learning curve for me; it made me explore different routes to seamlessly implement tattoos onto a real life - person. I’ve taken inspiration from features from competitors such as the use of filters on a camera and phone editing software.
The feedback gained from testing was largely helpful in iterating the app. Even if it was concerning that there was quite a lot of users who couldn’t finish the task, it was an eye opener on what to include and what to remove from the prototype.
I was previously unfamiliar about the process artists use to complete their job. Now I have a better understand on what artists usually prioritize for their work, and surprisingly, it wasn’t the tattoo session itself but more so the preparation it takes to get there.
if there was more time...
In order to streamline the process even more, I would have optimized Inklink for tablets because a large amount of artists use tablets to draw their tattoo designs.
Due to time constraints I only stuck to screens that were relevant to the goals I was trying to achieve. If given more time, I would have prototyped the location and profile tabs for the customer, and an image posting system for artists.
A lot of the solutions provided focused more so on the customer's POV, given that most of the user research participants were customers. Gathering a larger tattoo artist participant pool could have lent for a deeper understanding to the artists' user journey.
Community is one the key values of the app, therefore, direct messaging for artist to artist and customer to customer could be worth exploring.