PORTFOLIO > INK TANK
INKTANK
FIND YOUR PERFECT INK!
PROJECT
CareerFoundry UX Immersion Course
MY ROLE
UX Research, Information architecture,
interaction design, UX & UI design
DURATION
6 months
TOOLS
Adobe XD
Photoshop
Illustrator
InDesign
PROBLEM
The tattoo market is huge. But there is little out there to bring artists, studios and customers together and make it easy to communicate. I wanted to create an online platform that made it easy for people to find tattoo inspiration and connect with artists and studios and equally give artists and studios a better way to showcase their work.
The Process
LEARN
DEFINE
DESIGN
TEST
REFINE
LEARN
Competetive Analysis – Tattoodo
My first step in the learn phase was to see what competition is on the market already and what we’d be up against.
Though I wanted to be able to analyse multiple competitors, the only site that came close to offering what Ink Tank will was Tattoodo. With that in mind I decided to dig deep in to their site, what they do well and where I felt they fell short.
Usability
Great information architecture.
Mobile not as easy to navigate.
Layout
Everything is where you would expect it to be.
"Get started" CTA goes straight to designs, could put users off that are looking for studios/artists.
Navigation Structure
Sticky header works well when scrolling through so much content.
Mobile menu is crowded and difficult to close.
Compatibility
Well optimised for all screen sizes.
Emphasis on native app for mobile, but still performs well.
Differentiation
Has a lot of functionality I'm looking to incorporate into Ink Tank.
User journey not obvious. I will look to guide the user from start to finish.
Calls to Action
Would benefit from more CTA's and triggers.
Clickable links and assets are not clear and obvious.
Survey
To learn more about the prospective users of Ink Tank I carried out an online survey. The questions were based on how the users look for tattoo inspiration currently, if at all, and what’s important to them when choosing where to get a tattoo and who with.
Participants: 22
Format: Google Forms
When: 7th Nov 2020
Key Survey Insights
%
of people look for a new artist every time they get a new tattoo.
%
of people look for a new tattoo artist regularly.
%
of people consider reviews when choosing an artist or studio.
%
of people use Instagram for browsing tattoo designs and looking for artists.
Interviews
To further enforce and explore my findings I then carried out a series of interviews. My aim here was to dig deeper into what is important to users when searching for tattoo inspiration and choosing an artist and studio and what they thought could be better from the current resources available.
Participants: 3
Format: Video Call
When: 16th to 18th Nov 2020
Key Interview Insights
Tattoo inspiration is a personal thing.
Final designs come from the artist so it’s important to choose the right one.
People need to feel comfortable with the artist as they will spend a lot of time with them.
For small pieces ratings and reviews can be really useful.
Information on different styles is lacking where people normally browse designs.
An effective way of communicating with an artist would be really useful.
Being able to filter designs when browsing would be a great feature.
The first tattoo can be an anxious experience. Some guides would be useful.
I felt that the findings from my survey and interviews created a solid foundation for the project and put me in a great postition to move on to the next phase.
DEFINE
Personas
To bring my goals to life I created two very different, but equally important personas that I would be designing for. This gave me a better direction and allowed me to think about each persona specifically for each task and flow.
Ashley – The Enthusiast
Ashley is a 31 year married female living in Brighton, UK. She works in a vintage fashion store and spends her free time going to gigs. Ashley uses her phone for regular social media posts, taking photos and keeping in touch with her friends.
Goals
- Ashley wants to be able to contact an artist as soon as she sees a design she loves.
- She needs to get to know an artist before getting work done by them.
- She also needs to be able to share what she finds quickly and easily with her friends.
Motivations
- Ashley wants to document important aspects of her life with her tattoos.
- She wants to explore different styles and techniques.
- She is always looking for ways to push the boundaries and gets bored quickly.
Frustrations
- Ashley feels that with modern tech the process of booking an appointment could be improved.
- She also gets frustrated that you can’t filter designs when browsing on social media.
Activities
-
Walks to and from work along the seafront.
-
Uses the internet to keep up to date on fashion and music.
-
Posts daily stories and engages with friends on Instagram.
-
Constantly on the lookout for her next experience.
Internet & Device Usage
- Desktop 35%
- Mobile & Tablet 90%
- Social Media 90%
- Tech Savvy 45%
Quotes
“I like new things. Whether it’s clothes, music or tattoos, I never go without for long.”
“I see myself as a trend-setter and love it when I post something that gets a good reception.”
“I love Instagram, but it would be great if there was something out there specifically for tattoos.”
Irene – The Newbie
Irene is a 26-year-old female student living in Barcelona, Spain. She is studying law and spends her free time travelling and eating out. Irene uses her laptop for researching travel and her phone as her camera and for social media posts.
Goals
- Irene needs to feel comfortable before she can enjoy an experience.
- She needs to be guided through the process of getting a tattoo as it’s completely new to her.
- She also gains confidence from customer reviews, so would need to see them.
Motivations
- Irene loves to travel and would like to have tattoos done in different places to remember the trips.
- She has always wanted a tattoo but needs design inspiration.
- She wants to prove to herself that she’s brave enough to get a tattoo.
Frustrations
-
Irene thinks there is a lack of information and guides on tattoos that are readily available.
-
Irene prefers researching on a larger screen so would rather a desktop app than mobile.
Activities
- Irene has a hectic schedule with studying and seeing her friends.
- She is alsways planning the next adventure and loves researching where to eat and travel to.
- She uses social media to keep in touch with friends in different parts of the world.
Internet & Device Usage
- Desktop 75%
- Mobile & Tablet 55%
- Social Media 55%
- Tech Savvy 40%
Quotes
“I have so many questions. Does it hurt? How long does it take to heal? How much will it cost?”
“I wonder if there are any good studios where I’m travelling to next.”
“Yeah, it looks good, but what do the reviews say?”
User Journeys
To gain a greater understanding of how my personas will use Ink Tank my next task was to plan out their user journeys through the app and how they will feel along the way.
Ashley – booking her next tattoo
SCENARIO
Ashley loves getting new tattoos. For her next, she wants something in a realism style but would like to find inspiration by browsing designs in this style and sending them to her friends to get their opinion before finding an artist to do the tattoo.
PHASE
Find tattoos to browse in a realism style.
TASKS
– Navigate to the browse function.
– Apply a filter to show realism designs.
THOUGHTS
“I know the style of tattoo I want, but need some inspiration”
EMOTIONS
Ashley is excited about her new tattoo.
OPPORTUNITIES
– Browse function for designs.
– Filter function to show designs in a specific style.
PHASE
Decide on designs she likes and save them.
TASKS
– View design details.
– Save designs she likes to favourites.
THOUGHTS
“I’d like to save designs I like so I can see them all in one place.”
EMOTIONS
Ashley is inspired by designs she sees.
OPPORTUNITIES
– Design details page.
– Save to favourites function.
PHASE
Send her favourite designs to friends.
TASKS
– Choose which designs to send and how to send them.
– Send the designs.
THOUGHTS
“I’d like to be able to send the designs from within the app.”
EMOTIONS
Ashley is anxious to see what her friends think of the designs.
OPPORTUNITIES
– Share function within the app.
– A choice of how to share.
PHASE
Find an artist who specialises in realism.
TASKS
– Browse artists.
– Filter artists to find one that specialises in realism.
THOUGHTS
“I hope I can find a suitable artist to discuss my tattoo with”
EMOTIONS
Ashley is excited to progress with getting her tattoo.
OPPORTUNITIES
– Browse function for artists.
– Filter options for artists.
– Messaging function.
Irene – learning about tattoos and finding her ideal studio
SCENARIO
Irene is planning a trip to London and would like to get her first tattoo whilst there. She has never got a tattoo before so would like to learn about the process and would like to find some suitable studios before she travels.
PHASE
Research different aspects of getting a tattoo.
TASKS
– Search for tattoo guides
– Read up on the process
– Read up on different styles
THOUGHTS
“I want to learn more about tattoos before getting one.”
EMOTIONS
Irene is anxious about her lack of knowledge but eager to learn.
OPPORTUNITIES
– A guide to getting your first tattoo
– Information describing different styles.
PHASE
Decide on style and placement of tattoo.
TASKS
– Browse tattoo designs
– Make a note of designs she likes
– Get opinions from her friends.
THOUGHTS
“I’ll know what I want when I see it – I just need to find it.”
EMOTIONS
Irene is overhwelmed by all the designs.
OPPORTUNITIES
– Save to favourites function.
– Sharing function
– Filter designs by styles and placement.
PHASE
Find suitable studios to get her tattoo.
TASKS
– Decide on an area.
– Search for studios in that area.
– Read customer reviews.
THOUGHTS
“I would only book a studio that has great reviews.”
EMOTIONS
Irene is starting to feel excited about her tattoo.
OPPORTUNITIES
– Area radius search function.
– Customer reviews for studios.
PHASE
Get in contact with suitable studios.
TASKS
– Check favourites list and decide on studios.
– Send enquiries to studios.
THOUGHTS
“I’d like to see the different studios I’ve enquired with.”
EMOTIONS
Irene is really excited about her trip and getting her tattoo.
OPPORTUNITIES
– Enquiry function within the app.
– Filter favourites to show studios to which an enquiry has been sent to.
Based on the User Journeys of my personas and time restraints on the project I decided to focus on 3 main functions to create a Minimum Viable Product.
Browse designs with filters.
Save a design to a favourites list.
Share a design with a friend.
User Flows
Now that my personas journeys through Ink Tank had been planned and I had decided what functions to focus on it was time to move on to creating flows of how they would complete certain tasks and explore what screens they would encounter and how they would interact with the app.
Ashley’s Objective
As someone who knows the type of design she’s looking for and likes to stay organised, Ashley needs to be able to filter designs by style and save designs that she likes so she can see them all in one place.
Task Analysis
1. Create account
2. Login
3. Select “browse designs”
4. Choose “realism” from style filter options.
5. Choose a design
6. Add to favourites
Irene’s Objective
As someone who doesn’t know a lot about tattoos, I’d like to share designs with my friends via Whatsapp so that I can get their
opinion.
Task Analysis
1. Login
2. Select “favourites”
3. Select design
4. Select “share”
5. Choose “Whatsapp”
6. Select friend
7. Send
DESIGN
Wireframes and Mockups
At this point, I felt I had built a solid foundation of Ink Tank and was ready to start sketching out ideas for the screens of the app and building my prototype.
I decided to adopt the mobile-first design technique and once I was happy with a screen for mobile then adapt it for desktop.
Navigation
My first thought for the navigation was a bottom-bar type menu with icons, but on reflection I decided that this wasn’t common in responsive web apps, more so native apps, so I changed it in to a hamburger icon and a slide in page for the navigation.
My initial sketch of the bottom bar navigation.
Quickly followed by my sketch of the slide in menu screen.
Mid-fidelity wireframe of the navigation page.
Final mockup of the navigation screen.
Home/Landing Page
My initial thought for the homepage was to have a featured design, artist and studio of the week and have them on the screen above the fold. However, after discussions with stakeholders it was decided that this would be a good idea but to have this further down the page and for above the fold to be filled with a large hero image, the Ink Tank logo and a tagline that would grab the users attention.
My initial sketch of the homepage with the three ‘featured’ sections.
The first mockup of the new ‘hero image’ homepage. Here I decided to have the onboarding section as an option if the user wanted to learn more.
I felt that the whole screen could do with being lighter. I chose a brighter image and brightened the colour of the buttons. I had also worked on a new logo design.
After asking fellow students for feedback on my work, it was suggested that the emphasis should be placed on the main CTA to improve the hierarchy of the page.
Additional Screens
Once I had the initial elements of the app I designed out the remaining screens according to the user flows I’d planned out.
Before designing out these screens I had discussed the flow with my stakeholders and we decided that a user could want to go straight to the results page and add filters at that point should they want to rather than being asked to add filters first.
Browse
Results
Add Filters
Details
Save to Favourites
Share Options
Once I had the first iterations of my other screens I compiled them into a clickable prototype and took them on to usability testing.
TEST
OBJECTIVES
– Determine whether users understand the purpose of the app quickly and how satisfactory it is to use.
– Observe how easily users learn how to use the features of the app, including filtering designs, saving designs to a favourites list and sharing the design with their contacts.
METHOD
The tests were moderated and carried out remotely using Adobe XD and Zoom. The sessions involved an introduction, task performance and a brief discussion.
PARTICIPANTS
I recruited 6 participants that fit within the personas I’d created.
TASKS
– You’ve searched on Google for tattoo inspiration and clicked through on to Ink Tank. Using the app, find design inspiration using filters to tailor your search.
– You’ve found a design that you like and want to save it to a list specifically for this tattoo. Use the app to save the design.
– You would like to send the design to a friend to get their opinion before talking to the artist. Use the app to share the design via WhatsApp.
Key Findings
Positives
“I find the homepage visually appealing.”
“The navigation is easy and intuitive.”
“I like the minimal design.”
“I think the onboarding is a nice overview of the app.”
Negatives
“I would expect to see more information on the homepage.”
“I thought the design would be saved after naming my project.”
“I found the options on the save screen a bit confusing.”
Observations
“Intrigued to see the other functions of the app.”
“Not sure why I have to register to share the design.”
“Expected a different share icon, but knew what it was.”
“There is limited information for people with little tattoo experience.”
Errors
“I had to choose a style filter, I couldn’t just filter by placement.”
“After viewing the design the filters had gone from the results page.”
Take Aways
The errors the participants ran into came from issues with the prototype rather than my designs, which would be easily fixed.
There were a lot of positives to take from the testing, which was great and confirmed I was on the right track.
I found some great insights in to how to enhance the app and make it more enjoyable and starightforward to use.
I felt the results from testing provided a lot of great aspects that I could work on and refine.
REFINE
Browse Screen – Revision
I felt that my original Browse screen was unbalanced, with the emphasis all down the right side with the images. I also wasn’t happy with the images. I found images that suited the purpose better and stretched them across the whole screen with the titles incorporated into the image. The result was a far more balanced screen and enhanced aesthetics.
Original
Revised
Original
Revised
Details Screen – Revision
Similarly to the browse screen, my initial design for the details screen was unbalanced. In addition, participants in my usability tests were confused as to what the title was.
I feel creating the cards for the artist and studio profiles gives a more defined layout and also balances the screen.
Applying Filters – Revised Flow
After earlier deciding to open up a default view when selecting browse, I wanted an option to add filters once the user was on the results screen. These are the final 3 screens for the flow from results to adding filters to results with the filters added.
Save Design to Favourites – Revision
For the favourites function in Ink Tank I wanted to make it that a user could save to one big library or create specific projects to keep their favourites organised. i wanted to do this as it can be common for people to be planning more than one tattoo at the same time, with differing styles or placements.
I decided to focus on creating a new project. My initial flow included 3 steps to save the design to a new project. Selecting ‘New Project’, name the project and confirm selection. The user would access this from the heart icon on the details screen.
Original Flow
There were 3 things that came up during testing.
- Participants thought the explanation of each option was unnecessary.
- Participants were expecting the design to be saved once they entered the name for the project.
- Participants found the wording to make this their default setting confusing.
With this in mind I revised the flow, to include less steps and made the wording on the default setting option clearer.
Revised Flow
Prototype
This is the full mobile Ink Tank prototype in its current state. Please feel free to have a click through and see what you think.
Ink Tank is still very much a work in progress and some of the functionality is yet to be added. You should, however, be able to complete the tasks I’ve outlined in this case study.
if you have any comments feel free to connect and let me know.
Presentation
This is my presentation of Ink Tank in its current state.
It’s a walk through of all the functions it includes so far.
Road Map
As I’ve mentioned, there are still screens that need to be added to Ink Tank to complete it’s functionality.
The next step will be to add the studio and artist results and details pages. These will follow a very similar design to the designs as will adding them to projects and library.
The messaging and guides also need to be added.
Once these functions have been added each screen will need to be developed into desktop versions to make the app responsive.