WEB APP DESIGN CASE STUDY
INTRODUCTION
The main goal of this project is to create a web mobile app that helps users find inspiration for their next tattoo, contact artists, and make reservations.
The research conducted highlights 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, supported by my tutor and mentor.
Some of the tools I used: Zoom, Google Forms, pen & paper, Adobe Photoshop, Adobe Illustrator, OptimalSort, UsabilityHub, Balsamiq, Adobe XD, Stark.
THE RESEARCH
Goals: understand the users' point of view and identify behaviours, needs, and pain points in the tattoo-booking process.
User survey
The purpose of this survey was to collect 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 conducted via Google Forms and was completed by 27 respondents. These were recruited through social media appeals, and CareerFoundry's Slack channels.
Analysis of the survey results showed some interesting insights. These served as a starting point for the formulation of the user interview questions:
• Custom designs are the most popular type of design
• When getting 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 garnered the most interest were "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
User interviews allowed me to get in-depth information and stories from users, and investigate deeper into their experience to identify needs and frustrations. 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 interview questions focused on understanding the following aspects:
-
The inspiration process
-
Artist selection
-
What makes a good and bad tattoo experience
-
Gauging user interest in potential features
The interviews were recorded and analysed, and findings were divided into four groups, allowing me to cross-analyse statements from different interviewees and identify common goals, needs, and pain points.
Overview of the interview participants.
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 carrying out interviews and discovering the problem space. 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. 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
Goal: condense user pain points, behaviours, needs, and issues into short statements that will guide the next phases of the process.
Problem Statement
The problem statement stems from the analysis of user interviews and defines the key user needs that are addressed by Ink Tank, and 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 down payments 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, allowing me to determine 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
Goal: translate user needs into possible solutions in the digital space.
User Personas
The user interviews functioned as a powerful tool in the understanding of the user. After analysing the survey results and conducting the interviews, I was able to have a good general idea of what Ink Tank's users might look like. The two user personas (Anne and Josè) are 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è have worked as reference points in the development of the project.
User personas: Anne and Josè
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, which set the basis for the next stage: information architecture.
This was one of my favourite phases of the process, as here I started developing solutions to the problem. I found the process of creating user personas exciting and enriching, as I got to know the people I was designing for.
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
Goal: organise pages intuitively in a sitemap.
Sitemap / Card Sorting
I was able to create an initial sitemap using the user flows as a starting point, allowing the structure to follow the user journey optimally. Later I included in the sitemap other elements that did not appear in the flows such as the user profile page and the sign-up flow.
The resulting sitemap required validation from potential users. This was addressed through an open card sorting exercise in which participants were able to organise the various sections in a way that made sense to them.
Card Sorting results
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 looks 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 used a flat navigation system at the bottom of the screen to allow visibility while providing the user with a well-known mobile pattern.
-
I limited the flat navigation to 4 elements (Home, Search, Favourites, Profile) to ensure visibility and allow wider touch targets. The most interactive pages were prioritised, as these are the tools that users need to complete their goals.
-
The blog section was removed from the main navigation due to its consultative nature; users would be able to access the latest and most relevant blog entries from the homepage instead.
-
I placed 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.
Mobile navigation sketch
FIRST ITERATION
Goal: create a mid-fidelity prototype with key functionalities.
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 increase the level of detail and fidelity of the wireframes to achieve a testable prototype.
For this phase, I used Adobe XD as I needed software that allowed the creation of a prototype.
USABILITY TESTING
Goal: verify overall usability and navigability of the prototype, identify errors.
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.
Five interviews were conducted remotely, testing the mobile prototype via the participant's desktop device; 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.
After asking relevant demographic questions, the interview continued with three scenario questions that had the objective of analysing the user's progress through the tasks. The interview included several open-ended questions about the user's overall impressions and expectations on specific pages. Task difficulty was measured through single-ease questions.
Usability Testing participants
Affinity mapping of the errors encountered in the testing phase.
Each colour is associated with a participant.
Each interview was recorded, and I analysed recordings and notes through the following methods:
-
Affinity mapping to determine common observations and feelings, quotes, and errors and identify the issues to prioritise.
-
Rainbow spreadsheet to identify common comments and errors and propose solutions.
The findings are described in Ink Tank's Usability Test Report, which you can read here.
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 the better readability of the text and the traditional button shape which was easier to identify.
SECOND ITERATION
Goal: improvement of the prototype by addressing the issues that rose from user interviews, application of visual design principles.
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.