Motivation/inspiration:
I had a heart surgery when I was 3 years old and it left me a 4 inches scar which is still quite noticeable today. It did effect my confidence and personality a lot and I've tried so many methods to cover it over the years. The idea of this project just came up to me, I thought I can create something memorable to reconcile with my scar and those experiences it carries.
Year:
2022
Duration:
3 months
Type:
Mobile App
Role:
Individual Project
Problem statement:
There are a lot concerns people may have and factors to be considered while people trying to get a scar-covering tattoo.
They may have limited time and access to those resources and some are not comfortable showing scars to people for consultation.
Scars can be hard to deal with, tattooing has proven effective in reducing or covering the visibility and effects of scars and stretch marks.
Not every scar can be covered with a tattoo. Some tattoo artists refuse to tattoo scars if they determine the tattoo will make the scar worse.
Scar-covering tattoo is a complex process, it takes a lot of assessment and numerous factors to decide whether it is worth the risk of tattooing.
Digital Solution
An AI-powered tattoo generation app that provides people more intelligent suggestions on getting a personalized scar-covering tattoo, and also allows AR try on before purchase.
Through online consultant and AI generation, we try to provide user quick access to intelligent recommendations and virtual try on experiences before they reach out to local tattoo store and get permanent tattoos.
Main Features
![[Mockup] iPhone 15.png](https://static.wixstatic.com/media/90cc52_9028484fe00c4579a59cd849e57fb7b1~mv2.png/v1/fill/w_250,h_506,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/%5BMockup%5D%20iPhone%2015.png)
Home page
-
showcases exploring
![[Mockup] iPhone 20.png](https://static.wixstatic.com/media/90cc52_d0390ededd544153a1c44c15718a65ef~mv2.png/v1/fill/w_250,h_506,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/%5BMockup%5D%20iPhone%2020.png)
Profile page
-
find tattoo artist
-
see past creations
& purchased
![[Mockup] iPhone 18.png](https://static.wixstatic.com/media/90cc52_d9d27436b08b451884410005831efed6~mv2.png/v1/fill/w_250,h_506,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/%5BMockup%5D%20iPhone%2018.png)
Chatbot
-
collect information
-
evaluate scar condition for future tattoo
![[Mockup] iPhone 19.png](https://static.wixstatic.com/media/90cc52_67170a621ba849eea7961302d2d2f2e1~mv2.png/v1/fill/w_250,h_506,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/%5BMockup%5D%20iPhone%2019.png)
Generation
-
generate scar-covering tattoo
-
input prompt
![[Mockup] iPhone 16.png](https://static.wixstatic.com/media/90cc52_97a3c3a5b68f4d90bdbda09070920f3a~mv2.png/v1/fill/w_250,h_506,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/%5BMockup%5D%20iPhone%2016.png)
AR
-
try on tattoos before purchase
![[Mockup] iPhone 17.png](https://static.wixstatic.com/media/90cc52_100a2218fba44b649465542976e5f68f~mv2.png/v1/fill/w_250,h_506,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/%5BMockup%5D%20iPhone%2017.png)
Cart
-
purchase digital files for favorite tattoos
Primary Research
Understanding our target user's needs and behavior through guerrilla research.
Method:
Interviews
Number:
10 interviewees
Group:
College students, & young professionals with scars; Tattoo artists
"I only need the digital file if customers have their own patterns for tattoo. Almost all tattoo store has transfer paper and printer."
---Tattoo artist A
"I once go to several tattoo stores for consult, some suggest me to wait few month to let the scar rest but other says they can tattoo it right away. It's really confusing."
---Young professional C
"I always want to get a scar-covering tattoo but I'm afraid I would regret, it will be really helpful if I can see the outcome before getting a permanent tattoo."
---Student B
"I had a lot of tattoos on me, but sometimes I do feel bored of the current trending style, having the option of an AI tattoo artist designing for you may bring in new inspiration for the industry!
---Tattoo artist D
Persona
Identifying specific use cases through personas helps us better scope our service.
Our audience expect an solution at low-cost, has AR try on before purchase, educational information provided and having fun with AI generation at the same time.
Secondary Research
What technology is needed to provide all those experiences?
Technology - AI image generation using keywords and references
Like many other apps that create generative art - is basically based on two artificial neural networks that work together to create the images. The names of these two networks are VQGAN and CLIP. VQGAN is a neural network used to generate images that look similar to other images.
Technology - Model training
Artificially generated Tattoo by Vasily Betin
Use Machine Learning to train StyleGan2 model on the tattoo images.
As the reference showed above, here are the following steps:
Step 1 : Get & clean data(images) from Pinterest & Instagram
Step 2 : Train our StyleGAN2 network model through Google Collab
Summary:
To adjust these methods in order to accomplish our goal, we need to change the input data from tattoos to scars & scar covering tattoos, training the model to imitate the process of scar-covering with tattoos according to different input & prompt.
Technology - AR ( augmented reality) for virtual try on
Example A: Ink Hunter
Using AR(augmented reality), and AI(artificial intelligence) to create a virtual fitting room for tattoos.
Example B: Tattoo Filters ( Ins & Snapchat)
Skin Segmentation technology developed by Facebook Reality Labs.
I did a few mockups of scar covering tattoo filters.
Summary:
By using the Skin Segmentation technology, we're able to locate the scar area and cover it with the tattoo mesh to achieve the AR fitting room feature.
Service Blue Print
Using service blue print to visualizes the relationships between different service components — people, props (physical or digital evidence), and processes — that are directly tied to touch points in a specific customer journey.
Site Map
Based on my research, I defined my value proposition and outlined the main features to define the scope of this project. I created an information architecture that gave clarity to the user flow.
Wireframes
Key frames for each features
sign in
landing page
showcase detail
AR try on
purchase
cart
checkout
process of generating a scar-covering tattoo
profile
Use comparative usability testing to figure out the best way to collect & present information about scar & provide better suggestions
Method A: Conduct a survey for user to respond step by step.
Feedback:
-
"Having strong eager to skip since it's mostly educational info and tired of reading"
-
"​I think it's quite clear since there's only few steps and are single choice questions"
Method B(final direction): Using chatbot to have a conversation with user.
Feedback:
-
"Chatbot makes me feel like I'm talking to a ai/person, I think it suits this high-tech app very well"
-
"It seems to give me more freedom for answers, if I have different one that is not listed"
Prototype Transition
-
Browsing featured showcases
-
Exploring different categories of tattoos
-
AR fitting room for tattoo try on
-
Direct purchase access of the digital files
-
Pre-generation survey to collect basic information to evaluate scar condition
-
Process of generate a scar-covering tattoo
Identity Design
Logo
Color Palette
Logo
#453396
#FED000
#6E4CFA
#21B3FF
#9C47ED
#FFFFFF
#000000
Font
Tangerline Regular
INK IT
Inter Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
!@#$%^&*()
Inter Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
!@#$%^&*()