UX/UI DESIGNER
OVERVIEW
Context:
The UK arguably has the highest percentage of tattooed people in the world. London serves as an international epicentre for tattooing holding a history from as far as seventeenths century. The highest calibre artists are found here which makes it desirable destination for the ones seeking self-expression through body art.
Background:
INKit, a responsive website, was created to bring rich London tattoo scene together. Here people could find all London tattoo artists, abundance of tattoo design inspirations and other essential information needed to start their tattoo journey.
My role:
I applied the entire UX design process to create the web app from start to finish. I carried out User Research, Persona, User Flows, User Journeys, Information Architecture, Sketching, Wireframing, UI design, Prototyping, User Testing, Design Language System.
Tools:
Pen & Paper, Sketch, InVision, Optimal Workshops, Usability Hub, Google Forms
Duration:
June 2020-December 2020
Possible Problems
-
Lack of systemised information about tattoos styles and London artists (experience, qualifications, personalities) in one place
-
It is distracting, tiring, inefficient and time consuming to search information on many different resources
-
Lack of easy and simple way to collect, save, share and discuss his inspirations with friends, artists or other users
Potential Solution
INKit - London Tattoo guide providing systemised essential information needed for getting a tattoo:
-
tattoo designs, artists styles, contacts, tattoo parlours locations, health considerations, guidance and important points to note before getting tattoo
-
Enables user to create an account, save, keep, share his inspiration boards and connect with artist to discuss additional specific questions.
DESIGN PROCESS
For process guidance I used Design Thinking "Double Diamond" process model which offers to follow 4 phases:
​
-
Discover – understanding the problem
-
Define – defining the problem
-
Develop – developing possible solutions
-
Deliver – choosing and developing the solution
1. DISCOVER
USER RESEARCH
In INKit project there we two user groups to learn about: tattoo artists and clients. I conducted research using User Interview for tattoo clients and Survey for tattoo artists.
User Interviews
User Interviews was my first choice of research to learn about the tattoo client. I believe this method was the most informative in exploring initial tattoo enthusiasts needs, motivations, goals, problems, and expectations.
​
I conducted Moderated Remote Interviews with 5 avid tattoo lovers. It provided me with great qualitative information of essential knowledge for setting the basic application's features structure. Being able to follow up for more details of unclear moments on the spot and observe the respondent during the interview was great for navigating questions depending the reactions interviewee exposed.
​
User Interview research goals were:
-
to understand users approach on getting a tattoo done
-
to find out how the user chooses the tattoo artist
-
to discover users problems in exploring tattoo industry online
-
to learn about users expectations of using tattoo website
Surveys
The Tattoo Artist Survey was conducted using Google Forms. I placed the survey on Facebook tattoo groups UK Best Tattoo Artists (5.5K members) and UK Tattoo Artists (9K members).
The Survey research goals were to find out:
-
how tattoo artists normally get new clients
-
artists attitude towards being on tattoo websites
-
artists attitude towards tattoo website as a booking platform
USER RESEARCH ANALYSIS
Research results were organised in following way:
-
grouped cards into Behaviour, Attitude, Needs/Goals, Frustrations, Facts using Card Sorting
-
refined and grouped data using Affinity Mapping method
MAIN RESEARCH FINDINGS
-
Users mainly go to Instagram for tattoo design research.
-
Users only appreciate custom-made tattoos. Copy paste, cheesy, faceless designs are greatly despised.
-
Users seeks to find respectable artists with unique style and don’t mind high prices.
-
Users approach tattoo process very personally - it’s about creating a human bond between artist and client, build trust and good understanding.
-
Users want hassle free booking options.
​
2. DEFINE
PROBLEM
Main findings gave me good insights into users needs so I was able to refine and updated Problem and Solution​
Problem
People interested in getting a tattoo in London want to save time and efforts that exploring large variety of sources take.
They need a way to effectively:
-
browse tattoo inspirations
-
find highly skilled London based tattoo artists
-
get in touch with them instantly
Solution
INKit, as a London Tattoo guide, will provide users with systemised and essential information about:
-
tattoo designs
-
skilled artists
-
option to connect artists
-
arrange appointments
-
place deposits
-
create favourites boards
PERSONAS
Using the insights from research results, I developed two personas allowing to better empathise with target groups and prioritise goals according to their needs
Sophia
a busy working mom, tattoo lover.
She is on a tight time budget hence seeks an effective way to search and save tattoo inspirations and artists so she can explore them in depth later.
“Having family responsibilities, it’s hard to find time to get my ideas about getting a tattoo together.“
John
highly appreciates tattoo art and is only interested in custom made tattoos.
He wants to find unique tattoo artists and be able to connect with them instantly as well as book appointments all in one place.
“All my tattoos are done by the most prominent unique artists of certain style.”
MENTAL MODELS AND USER JOURNEYS
Personas Mental Models help understanding beliefs they hold regarding tattoo process. User Journeys show different steps Sophia and John are taking to achieve their goals. Studying their thoughts and emotions helped me notice opportunities where User Journeys could be improved or new ones discovered.
USER FLOWS
Personas’ Mental Models and User Journeys allowed me to crystallise few main User Flows. My focal point for solving the user problems was easy navigation. I identified two key functions the app would have to include in order to perform at its best for Personas:​
​
-
Search tattoo inspiration/artists and save them to Favourites
​
-
Messaging the artists and booking appointments via the INKit app
INFORMATION ARCHITECTURE
After mapping out the main features, I worked on a sitemap. Conducting Open Card sorting (with Optimal Workshop) achieved insights as to how users expect the content to be organised.​
Results
Card Sorting proved to be a useful tool to access additional information from a potential users which allowed to refine the first sitemap with more clarity. Main discoveries:
​
​​​
-
Some participants’ ideas matched well with my initial sitemap. We agreed on those main categories: Tattoo, Artist, FQA, About and Search.
​
-
Category About however included quite a wide range of cards that also belonged to other categories such as Help, Support, Onboarding, FQA and Settings/Account. Therefore it seemed logic to divide About category into more definite ones. I came out with three:
-
Guide (for the tattoo process related guidance)
-
Help (for help in using website at any moment)
-
My Account (under which I put the block of all interactive actions that only user is able to control from his/her account: save, change, organise, share, cancel, delete and so on. This includes: Sign Up/Login, My Favourites, My Inbox, My Calendar, My Settings and Placing a Deposit)
-
​
-
Such way of sitemap organisation allowed me to see two main parts of the website:
-
Browsable content/information that does not require to have an account.​
-
Content/actions managed only by user from a logged in user account.
-
3. DEVELOP
At this point I could clearly define main website tasks and its structure
​
Main tasks:
-
Browse, explore, search, filter tattoo inspirations
-
Browse, discover, search, filter the right artist
-
Create an account
-
Save inspirations to personalised Favourites boards
-
Contacts artist via website
-
Arrange appointments
​
Website's structure consists from two main parts:
-
Content/actions that does not require to have an account
User can browse tattoo designs and artists profiles, search and filters features but cannot perform any other actions such as save, like, contact, etc.
-
Content/actions managed only from user account
All the features that user is only able to perform if he has created an account: save, change, organise, share, cancel, delete and so on. This includes: Sign Up/Login, My Favourite, My Inbox, My Calendar, My Settings and Placing a Deposit.​
WIREFRAMES AND PROTOTYPES
Low fidelity wireframes
I started to ideate sketching with pen and paper plenty of low fidelity wireframes exploring possible solutions, showing key elements and screens that will exists in app’s structure and how those elements and screens will be arranged on order to complete main user tasks fluently.
Mid fidelity wireframes
After reviewing and adjusting paper prototype, I moved on creating mid fidelity prototypes in grayscale using Sketch software. I used some real pictures - designing with actual content helped me think of the actual experience much better.
SEARCH/EXPLORE TATTOO DESIGNS
4. DELIVER
USABILITY TESTING
Affinity Mapping and Rainbow spreadsheet
Using the script, tasks and observation I tested INKit prototype with 6 users to receive qualitative information on a whole concept of INKit website and track the main concept imperfections.
Feedback was summed up using Affinity Mapping and Rainbow spreadsheet methods.
Issues were measured by Jakob Nielsen’s 4 steps error rating system.
This led to iteration of improvement and redesigning process again and again until INKit MVP has been achieved. ​
Main Usability Test findings were:
-
Users do not use Introduction Onboarding (high)
“I always skip onboarding and explore myself”
​
-
Users tries to find an option to message an artist from tattoo image screen (high)
“Why can’t I reach the artist straight from tattoo image I liked?”
​
-
Tattoo screen should include Tattoo categories (high)
“There should be some tattoo grouping on the main Tattoo page (by styles, etc.)”
​
-
Attachment feature on message screen is missing (medium)
“How can I attach tattoo picture when I message the artists?​
​
-
To have Saving favourites feature more effective, users prefer to have an option of pre-made boards (medium)
“Creating collections takes time. I want to save inspirations quickly to pre-made board, such as “Explore later” or so.”
​
​
Participants quotes gave me some other useful hints of how INKit design could be perfected even more. I applied this information while working on prototype:
-
"Tagline on Home Screen confused me to menu"
-
"Artists picture should represent his work so I can see right away what he is about"
-
"I expected to have general search icon on Homepage"
-
"Before using search or filter, I like to explore by scrolling through lots of images"
-
"Tattoo pictures on Homepage were confusing - there were objects like phones or jewellery there too. I only want to see tattoo"
-
"I always use mobile for browsing simply because it’s always accessible"
-
"For adding pictures to boards I prefer + rather than ♡ icon"
ITERATIONS
User testing outcome:
-
I ran few more iterations on prototype design eliminating critical errors and improving screens which led to more intuitive performance
-
The Rainbow spreadsheet highlighted some other errors which were worth taking into account while refining the prototype
-
All the changes reduced the number of steps to complete a tasks and made the screens more simple and intuitive. There was a very noticeable improvement of the app.
Accessibility
I reviewed all the screens to make them accessible for the largest user group possible:
-
adjusted navigation text size
-
added labels above each form and inserted placeholders (e.g. create an account forms)
-
added commonly understood red warning icon in wrongly filled fields (e.g. password entering)
-
added extra option for user to be able to undo his actions (e.g. booking confirmation) and others.
SCREEN TRANSFORMATIONS
The iterative process of building, refining and improving prototype reveals the process of app screens' development very clearly. Screens took many forms of transformation until I got satisfied with the end result.
Key screens evolution:
-
HOME SCREEN
Home screen probably undergone the most metamorphoses of all. Home screen is the first screen that user lands on which makes it responsible for keeping user engaged enough to be willing to move on. I wireframed many Home screen versions till finally finding not ideal but a fairly optimal one which combines Sticky menu navigation, Sign Up/Login options, bold tattoo images with apps bullet points
-
NAVIGATION and FILTERS
1. Since INKit is a responsive mobile web app, initial idea for navigation was to have a hamburger menu. While wireframing I came to understanding that for a user it’d be more comfortable to have main navigation on mobile visible from any screen without any additional clicking. Hence I eventually swapped hamburger menu to a sticky horizontal tab menu.
2. For a My Account navigation I left initially planned sliding out menu. I refined menu making each section's name consists of an Icon + Header + short instructions below to make sure user is confident about the actions he is about to take.
-
TATTOO SCREEN
Tattoo Screen was also redesigned many times in order to achieve the best user-centered version of it.
The insights of my tutor, my mentor and my peers, analysis of iOS and Material Design guidelines as well as researching lots of websites of industry leaders (Facebook, Amazon, Airbnb, Zara etc. to name a few) helped me gradually make changes to Tattoo screen.
-
ARTISTS SCREEN
STYLE GUIDE
Colour Palette
Since INKit tattoo app contains lots of colourful content (imagery), I decided to keep the rest of the elements neutral and easy on eyes. I went for minimalistic and clean style:
-
Grey as a Primary Colour for most of the elements
-
Red as a Secondary Colour for accents
-
White as a background
Iconography
Icons must be simple, conventional and communicate clear message.
Icons size: 24x24 px
Icons touch size of 48x48px
Icons style: outlined with transparent background Inactive icons colour: grey #575757
Active icons colour: red #FF0000
Typography
INKit typeface: Verdana. It is clear and easily legible which works well in small text on colour-busy screens.
​
Typography varies in size and capitals or lowercase letters depending the hierarchy
Headings: centre aligned
Body text: left aligned
Action buttons: Verdana, Regular 14
UI Elements
CONCLUSIONS
WHAT HAVE I LEARNT?
DESIGN
The process of getting a tattoo has to be well organised and thought through, takes time and lots of research as one is going for a life time decision. The main challenge for me was to design an attractive product for tattoo lovers which is complex information wise yet simple and enjoyable to use. The toughest part was to create an intuitive, simple, and clear user interface and navigation. I learned that what helped me the most was to constantly analyse user journeys, navigation and other design decisions on many the most famous and globally popular web apps (Facebook, Amazon, Airbnb, Google, Zara, Youtube to name a few). It made me notice design conventions in practice, pay attention to various details and compare to them the decisions that I came up with on my prototype. I believe this is the best way to follow UX design news as those apps are constantly evolving and working on their designs, perfecting/updating them accordingly to changing users needs.
​
USER TESTING
The part that took me the longest was conducting interviews for user testing. Two participants had to be rescheduled to later dates due to their personal reasons. Also for some technical issue remote interview with one other participant failed to record so it had to be repeated. Note to myself: save some stress with always arranging more interviewees in order to be on a safe side and fit into the planned time frame if someone has to withdraw.
In-Person Moderate interviews worked better in terms of being able to engage with participants much better than Remote. I noticed that participants were more relaxed during In-Person testing as managing a piece of technology at the same added some slight tension. In the future, if situation allows, I prefer to carry out In-Person interviews as much as possible.
It took much longer for me to sort out information received by Remote testing. Knowing that I’ll have the record made me less attentive to what participant had to say. I had to listen to interviews records again later to put down main useful ideas. While testing In-Person and taking notes at the same time encouraged me to be all ears catching those pain points and putting them down to my notes right away.
WHAT'S NEXT?
TESTING
Conducting another round of Usability Testing, preferably using Moderated In-Person method, on latest version of prototype would allow me to catch remaining imperfections.
​
Getting real London tattoo artists involved in testing process. Gather qualitative and quantitative information regarding messaging, booking video appointment features as well as placing a deposit via INKit app would help me polish user/artist interaction features much more precisely. It is especially important now given current global Covid-19 situation when online communication has become so natural.
​
FEATURES
Explore a possibility to implement a feature of trying on virtual tattoos on any part of the body with augmented reality.To see how tattoo will look before it is inked forever could allow people be more confident about their decision.
