CASE STUDY
INTRODUCTION
The main goal of this project was to create a web mobile app that would help users find inspiration for their next tattoo, contact artists, and make reservations.
The research conducted highlighted how the process of getting a tattoo can vary depending on each artist's preference (websites, Instagram DMs, etc.). Arranging a tattoo appointment with a specific artist can often be a difficult process; Ink Tank aims to create a consistent, streamlined process.
Ink Tank was designed between August 2020 and February 2021 as part of my UX Immersion course with CareerFoundry. I was the sole designer for the duration of the process, with the support of my tutor and mentor.
THE RESEARCH
Tools: Zoom, Google Forms, pen & paper
The research phase was essential to understand the point of view of users and identify their behaviours, needs, and pain points in the process of booking a tattoo. A successful product responds to user needs - and the first step was to identify those needs. This was done through a survey and user interviews.
User survey
The purpose of this survey was to collect general data about users' preferred types of tattoos (custom, flash, etc.), what aspects they take into consideration when getting a tattoo, and potential features of interest. The survey was completed by 27 respondents via Google Forms. These were recruited through social media appeals, and CareerFoundry's Slack channels.
Insights:
The analysis of the survey results showed some interesting insights. These served as a starting point for the formulation of the questions later asked in user interviews.
• Custom designs are the most popular type of design
• When considering a new tattoo, 70% of users consider aspects such as the tattoo design and style. A relevant portion of users (55%) also considers the choice of the artist as an important step.
•People look for inspiration through Google images, Instagram, Pinterest, and Facebook.
•The features that got the most interest are "view artist profile", "artist reviews" and the booking function. Little interest was shown in the possibility to browse featured artists and browse featured designs.
Example of data collected in the survey
User interviews
Following the survey, it was important to conduct user interviews to get in-depth information and stories from users, and investigate deeper on their experience to identify frustrations and needs. This was my first time conducting user interviews, and I found the process extremely interesting and enriching, as it helped me gain a deeper understanding of the problem space beyond my personal experience.
The four interviewees shared a common interest in tattoos but ranged from experienced tattoo collectors (with more than 18 tattoos) to more casual collectors. The interview questions focused on understanding the following aspects:
-
The inspiration process
-
The process of choosing an artist
-
What makes a good and bad tattoo experience
-
Gauging user interest in possible features
The interviews were recorded and analysed, and findings were divided into four groups: behaviours and attitudes, needs and goals, frustrations, and other quotes. This allowed me to cross-analyse statements from different interviewees and identify common goals, needs, and pain points.
Some of the insights that resulted:
-
All interviewees prefer custom tattoos.
-
The selection process often starts on social media.
-
The selection of the artist is a priority in all cases.
-
The artist's behaviour and the environment are aspects that determine a good or bad experience.
-
The interviewees pointed out several features that would increase their interest in the product, such as favouriting artists and designs, seeing live availability, search function and design upload.
I enjoyed exploring the problem space and discovering the users' point of view through surveys and interviews. In particular, the interviews provided very interesting findings and it was a pleasure to hear about different experiences and slowly forming an idea of how Ink Tank could help our users.
If I could do this again, I would make sure to interview potential users from different age ranges to obtain additional insights and identify new issues. In particular, it would have been extremely interesting to interview older users (45+); tattoo culture is perceived differently in each generation, and I believe that there could be interesting variations in the process. I would also try to involve tattoo artists in the interview process and gain insights into their needs and pain points. After all, for Ink Tank to be a successful product it should also appeal to artists!
PROBLEM STATEMENT
& USER STORIES
Tools: pen & paper, Photoshop (for the report)
Analysing the user interviews allowed me to identify key pain points, behaviours, needs, and issues for users that can be addressed in Ink Tank. Crafting a problem statement and user stories let me condense all these aspects into short statements that guided the next phases of the process.
Problem Statement
The resulting problem statement defines the key user needs that are addressed by Ink Tank, therefore defining the product's main goal:
Ink Tank users need a way to navigate the tattoo design and artist selection process because they want to make an informed decision and feel comfortable in the process. We will know this to be true when we see that users start booking tattoo appointments and placing downpayments through the app.
User Stories
Using the problem statement and user interviews as a starting point, I created a series of user stories. These permitted my immersion in the user's point of view, determining additional needs and elaborating app functions that respond to these needs.
Some examples:
As a tattoo enthusiast, I want to see the work of good tattoo artists in the style I prefer so that I can get inspired for my next tattoo.
As a tattoo enthusiast, I want to be able to have a personal account so that I can save my information and my favourite artists.
As a tattoo enthusiast, I am happy to travel to get an awesome tattoo and I want to be able to see what artists are available in a specific distance range or number of countries so I can find the best match for me and book an appointment.
As a tattoo enthusiast, I want to see an artist's full profile with examples of their work so that I can decide if they are the right artists for me.
DEFINING THE USER AND
THEIR JOURNEY
Tools: Adobe Illustrator, pen & paper
This was one of my favourite phases of the process, as here I started developing solutions to the problem.
Following the research phase and the definition of the problem statement, I gained an understanding of the user's needs and frustrations in regards to their lived experience. In this phase, in particular the user journey maps, I started translating these pieces of information into possible solutions in the digital space.
User Personas
The user interviews functioned as a powerful tool in the understanding of the user and their needs. After collecting 27 survey entries and interviewing 4 individuals, I was able to have a good general idea of what Ink Tank's users might look like. Creating user personas allowed me to create two portraits that summarise Ink Tank's users and merge the different habits, needs, and goals that were highlighted in the research process.
Anne and Josè will work as reference points in the development of the project. For any decision or proposed solution I must think: "What would Anne do?" "What would Josè think of this?".
User Journey Maps
At this point, I know who Ink Tank users are (Anne and Josè) and their stories and needs, and I also have an idea of potential features that would benefit them.
This information allows me to move on to the next exciting phase and develop user journey maps. In these documents I analyse the user experience throughout a specific journey (in the case pictured, the tattoo booking process), identify their emotional journey and break down the process into small steps, defining how to transpose this into a digital product in the 'opportunities' section.
The 'opportunities' section includes a more complete list of potential solutions for specific user problems, while 'thoughts' and 'emotional experience' allow to understand the user's feelings in the process and identify critical areas.
Task Analysis & User Flows
The user journey maps enable identifying the path that users can take to achieve their goals. This translates visually into task analyses (as bullet lists) which are then developed into user flows (as graphs). The user flows provide a first glance into the overall solution process translated into a digital product and set the basis for the next stage: information architecture.
I thoroughly enjoyed this process. I found the process of creating user personas exciting and enriching, as I felt like I got to know the people I was designing for, giving them a name and a face.
Looking back, it is now evident how all the steps involved were necessary for the development of effective solutions that respond to user needs. I believe that this phase is where I learnt the most, and I am looking forward to deepening my understanding of the user and developing user-centred solutions.
INFORMATION ARCHITECTURE
Tools: Adobe Illustrator, pen & paper, OptimalSort
After defining user journey maps and task flows, I had a pretty good idea of how Ink Tank users could achieve their goals. However, some additional features would benefit the user which were not included in these documents, while other elements were determined by business and marketing requirements. All elements had to be organised intuitively in a sitemap.
Sitemap / Card Sorting
I was able to create an initial sitemap using the user flows as a starting point. This allowed the structure to follow the user journey optimally, rather than forcing the journey to fit into a predefined structure. Later I included in the sitemap other elements such as the user profile page, the sign-up flow, and other elements that did not appear in the flows.
The resulting sitemap was functional and included all elements, but required validation from potential users. This was addressed through an open card sorting exercise in which participants were able to organise the various sections according to their own logic.
The results of the card sorting exercise confirmed the initial sitemap and suggested other links between pages and functions that were not considered initially. This is what the final sitemap looked like:
Navigation Design
The sitemap was very clear in regards to what the primary pages of the website would be. Having five main elements allowed a smooth translation into desktop navigation while presenting some challenges in the mobile version.
I wanted to avoid using a hamburger menu, as this would hide the menu options. A flat navigation system would allow increased navigation visibility while providing the user with a well-known mobile pattern.
The mobile navigation was placed at the bottom of the screen to allow easy access with the advantage of a familiar pattern.
I decided to limit the flat navigation to 4 elements to ensure visibility and allow wider touch targets. The Home button was included among these four elements, together with the Search function, Favourites page, and Profile page. This choice was made to prioritise the interactive aspects of the app, as these are the tools a user needs to complete their goals.
The blog section was removed from the main navigation as it was more of a consultative tool; users would be able to access the latest and most relevant blog entries from the homepage instead.
I also decided to place access to private messages in the top right of the screen; later in the process, the notifications icon was also added in this position. This follows the well-known pattern set by Facebook and other social media and provides the user with a logical position for 'live' elements.
FIRST ITERATION
Tools: Tools: Balsamiq, Adobe XD, pen and paper, Zoom
Wireframing with Balsamiq
The sitemap defined the structure of the app, but it was necessary to develop wireframes to determine the internal structure of each page and establish links between its key features. This was achieved using Balsamiq Wireframes; the software allowed me to create rapid solutions and define the layout and links between pages and functions.
Mid-Fidelity Prototype
Once I was satisfied with the wireframes, I decided to develop them further into a mid-fidelity prototype. My goal was to define the user's interactions with the product and refine the design to achieve a testable prototype.
For this phase, I used Adobe XD as I needed to move onto a design software that allowed the creation of a prototype. The prototype was created using the wireframes as a base, and increasing the level of detail and fidelity.
USABILITY TESTING
Tools: Zoom, Numbers, Keynote, pen & paper
In order not to invest precious time on unsuccessful solutions, it was important to verify the effectiveness of solutions early on with user testing. In this case, my objective was to verify the overall usability and navigability of the prototype.
Conducting the test
The test questions focused on three of the main functionalities that were developed in the prototype and had the following goals:
-
Determine learnability of the onboarding process and errors.
-
Determine clarity of homepage and navigation: can the user understand their purpose?
-
Determine learnability and efficiency in the search function.
-
Determine learnability and efficiency in the booking function.
The six participants were aged 21 to 35. For this test, five participants had previous experience of booking tattoos, while one was interested in the topic but did not have direct experience.
Five interviews were conducted remotely, with users testing the mobile prototype via their desktop devices; one interview was conducted in person on a mobile device.
The interview started with a brief introduction to the project to prepare the participants for the tasks ahead. Participants were given a chance to ask questions and sign the informed consent form.
After asking relevant demographic questions, the interview continued with three scenario questions that had the objective of analysing the user's progress through the onboarding, search, and booking flows. The interview also included several open-ended questions aimed at collecting information about the user's overall impressions and expectations on specific pages.
I decided to avoid a follow-up questionnaire, and measure difficulty through single-ease questions after each task.
Each interview was recorded; I was able to analyse the recordings and read through my notes to gather insights.
The resulting data was analysed through affinity mapping. The objective of this analysis was to determine common observations and feelings, quotes, and errors to identify the issues to prioritise.
I also made use of a rainbow spreadsheet, which allowed me to not only identify the most common comments and errors but also propose solutions while having a clear view of the solutions that should be prioritised.
The findings are described in Ink Tank's Usability Test Report, which you can read here.
Although all users were able to complete the test tasks, I made some mistakes due to a lack of experience. In the first interview, I quickly realised how one of the scenario questions was phrased wrongly, as it included too much information and distracted the participant from completing the search. I was able to rectify the mistake in the following interviews.
I also learned how important it is to clarify that the prototype is not a functioning app and that some options/choices are limited due to the prototype limitations.
I was also surprised to find out that testing the prototype on a mobile device provided a better idea of the possible user interactions. Compared to the remote tests, the participant who completed the test on mobile made use of the horizontal scrolling functions. Furthermore, no mouse icon was there to suggest possible interactions; the participant was not biased and engaged in more genuine interactions.
As my first user testing experience, this was an important step in my training as a UX Designer. I am proud of the results, but also aware that there is much more for me to learn!
Preference Testing
After identifying and prioritising the usability issues in the prototype, I decided to run a couple of preference tests with different objectives.
I planned not only to implement changes in the prototype but also to increase the level of fidelity in the next iteration. In light of the upcoming changes, I needed some external input in understanding the best way forward. For this reason, I designed two different visual renditions of the onboarding process and conducted a preference test through Usabilityhub.com.
The participants were mostly recruited through CareerFoundry's Slack channels. Out of 14 participants, 86% preferred the first image. Some of the reasons were better readability of the text and the traditional button shape which was easier to identify.
SECOND ITERATION
Tools: Adobe XD, Adobe Illustrator
This phase started with the improvement of the prototype by addressing the issues that rose from user interviews. In addition to this, I started applying visual design principles to the current prototype, taking steps towards the definition of Ink Tank's look-and-feel.
Prototype Improvements
Following the feedback from users in the testing phase, the app was improved by including more detailed pricing information throughout the app, reviewing the copy on several pages, and implementing more information on the artist page, such as location info and availability tag.
Visual Design
The first steps in the definition of Ink Tank's visual design were the implementation of Gestalt Laws and visual design principles to the mid-fidelity prototype. Following these principles allowed me to create a consistent, intuitive interface while respecting the original layout.
In this phase, I also had the chance to explore Google's Material Design. This was an incredible opportunity to explore visual design standards and consider the inclusion of some of these aspects in the design of Ink Tank, to create a familiar look and inspire confidence in the user.
At the end of this process, I was able to develop the design documentation that defines Ink Tank's brand identity. I was familiar with this process thanks to my background in graphic design, but it was extremely interesting to be able to adapt it to a digital product, for example including specific information about button design and navigation items.
You can see the full design documentation at this link.
Peer Feedback
For this second iteration, I sought advice from fellow designers. I appreciated the opportunity to take on feedback from other designers to assess not only the functionality but also the visual design of the product.
This was done through Adobe XD's "Design Review" sharing mode. I was able to obtain feedback from five other students, my tutor, mentor, and a professional visual designer. This process highlighted several aspects that I did not consider, demonstrating how it is important to involve others in the design process.
THIRD ITERATION
Tools: Adobe XD, Stark
After collecting feedback from fellow designers, I was able to implement changes to the prototype and get even closer to Ink Tank's definitive form. I decided to take on board some of the comments, based on my perception of effectiveness and priority.
Prototype Improvements
After collecting feedback from fellow designers, I was able to implement changes to the prototype and get even closer to Ink Tank's definitive form. I decided to take on board some of the comments, based on my perception of effectiveness and priority.
Implementing Accessibility Guidelines
Accessibility was the protagonist of this third iteration. I had the opportunity to explore WCAG Accessibility guidelines and review Ink Tank's prototype to make sure it complies with the standards. I was able to identify and rectify several issues - the most severe of which was the insertion of input field labels within form fields (see example below).
The plugin Stark allowed me to run a contrast checker and colourblind simulator, which resulted in the modification of button colours, error messages, and the calendar widget.
This phase was one of the most interesting to me, as it helped me realise how many aspects of accessibility can be easily overlooked by an untrained designer. I would love to explore this aspect further in the future.
You can try out the latest version of Ink Tank's prototype at this link.
WHAT NEXT?
Of all the issues that arose in the user research phase, not all have been addressed in the current version of Ink Tank. Therefore, it is important to keep working on these issues to implement features that respond to user needs.
In particular, the next hypotheses will address the topic of loyalty: experienced tattoo collectors expressed a slight aversion to paying deposits, as they feel that this practice affects their experience. For this reason, I think that Ink Tank users would welcome a feature that rewards regular users with benefits, such as optional or reduced deposit rates. I predict that this might encourage users to engage regularly with the product to obtain their "top user" status.
Some interviewees also expressed their need to have detailed information about the space where the artist will work - not only cleanliness but also privacy and design are aspects that users consider when making a reservation. For this reason, Ink Tank will feature more detailed location information in future iterations. This will hopefully increase user confidence and increase their trust in the product.