Easy Draw
Easy Draw
Background: School Project, personally developed into a product.
Team: 2 people including me. Credit to Chenlu Wang.
Duration: 1 week of research, 1 week of ML model training, 2 weeks of design and iteration.
Contribution: User research; UI/UX design; Technique feasibility verify
Quick Draw
Two clicks to colorize and polish a draft sketch, with the least user input.
Smart Draw by Indication
Colorize and polish a draft sketch based on user-indicated colors
Smart Draw by Reference
Colorize draft sketch based on targeted color reference
Partially Smart Draw
Select an area to colorize or polish.
THE PROBLEM
NOVICE DRAWERS GAVE UP
IN THE MIDDLE OF THE DRAWING BECAUSE THEY ARE NOT SATISFIED WITH THEIR DRAWING
The Challenge:
“How might machine learning facilitate novice drawers to finish a drawing without grabbing their joy of creating?”
DESIGN PROCESS
EMPATHY
UNDERSTAND MOTIVATION AND FRUSTRATION
Why do amateur drawers start drawing even though they won’t have any economic reward?
Key Insights from User Interview:
Gain excitement and pleasure when drawing because it is the process of actualizing their beautiful image in mind.
Gain great fulfillment and satisfying work when finished drawing.
Gain fulfillment when sharing their final drawing.
User Stories:
As a person who loves drawing and traveling, I want to remember the moment and draw this splendid scenery. When I saw the beautiful sky, I had a fantastic image in mind, and I could hardly wait to turn this image mind into an actual drawing.
As a person who is crazy about games and loves to draw, when I see a cool style, I want to draw my favorite character in that style because I am eager to see what my favorite character will look like in that style.
What are users’ frustration and pleasures during drawing?
Frustrations:
Pick colors that fit with other colors to create the right “feeling” or certain cool styles.
Modify details to create shadow and light.
Pleasures:
In the beginning, when drafting out the ideas
In the end, if they successfully finished with a satisfying drawing
In the middle, when they get over the frustration and know how to draw.
Deeper Insights:
Novice drawers feel frustrated when drawing the color and details because they don’t have the high-definition finished drawing in mind. Their drawings in mind are obscure.
OPPORTUNITY
OFFER INSPIRATION IN DRAWERS’ FRUSTRATION MOMENT
Inspirations of color compositions:
When users are stuck on how to combine different colors to express certain feelings, our inspiration is to present the result of various color compositions for the user to choose.
Inspirations of details:
When users are frustrated about how to modify details, our inspiration could facilitate users to create more details about light and shadow relationships.
DEFINE
EMPLOY THE TECHNOLOGY
Targeting User:
Primary Users: Amateur novice drawers who want to create impressive drawings while enjoying the joy of drawing by themselves.
Secondary Users: Professional drawers who want to get quick inspiration or hope our tool could save their colorization time.
Devices: For our interview, lots of users use Ipad and personal computers (with graphic tablets) to draw. So, our first version will be on PC.
Product Goal:
***Give inspirations when drawers are stuck without grabbing their fun of drawing by themselves.
***Create a seamless experience between drawing and inspiration, making sure drawers will immerse themselves in the drawing process without being disturbed by inspirations.
** Make sure the final result is beautiful and satisfying enough so that drawers can share.
*Create a community for innovation and keep empowering the drawing tool. (next version)
Machine Learning Model
For the first version of the tool, we focus on the drawing of “anime characters.”
We used to Pix2Pix model and trained 2000+ pics for 475 epochs.
Data source: https://www.kaggle.com/datasets/ktaebum/anime-sketch-colorization-pair
Some Result:
We tested out the result with potential users(5), and all of them said that they were inspired by the colorization result and thought it would be helpful to deal with their frustrations.
IDEATION
HOW MIGHT WE INSPIRE USERS WITHOUT GRABBING THEIR FUN OF DRAWING?
Instead of one click to get the final result, I split the whole process into two parts.
Feature 1. Colorization:
The result of colorization is not the finished colorized drawing exported from the model. Instead, it simplifies the detail of the intermediate result when the Epoch is 50. When users are stuck on picking and combining colors, users can perceive what “vibe” different colors created and enjoy drawing details by themselves.
Feature 2. Polishment:
The result of the polishment is the finished colorized drawing exported from the model when the training epoch is 500. It contains more details and polishes the relationship between light and shadows. When users are stuck on refining the details, users can get a polished result from our tool.
FURTHER IDEATION
MAKE SURE THE INSPIRATION FITS INTO THE USERS’ DRAWING FLOW SEAMLESSLY
Situation 1:
Users want to try different colors and quickly find out what colors will create the feeling they like.
Feature 3: Color Indicator
Users draw simple color indications and let the system colorize the sketches.
Situation 2:
Users find a drawing style they love and want to see what their favorite characters look like in that style.
Feature 4: Reference Color
Users can import their targeted style and let the system colorize their draft sketches into that style.
Situation 3:
Users get stuck after they colorize a part of their drawing and have no idea what the other part should look like.
Feature 5: Select an area or layer to colorize
Let users colorize a selected area or a selected layer.
USER FLOW
COMBINE THE TOOL IN THE DRAWING FLOW
WIREFRAME
FOLLOW USERS’ EXPECTATIONS ABOUT DRAWING TOOLS
Quick Test: History VS Layers
Users find “layers” will be their familiar way of organizing their process.
They are not used to having a “history bar” taking up to a large place for every colorization or polishment result, excluding other drawing steps.
Ctrl + Z will be enough for the first version.
Before
After
Wireframes:
THE ITERATION
DIG INTO USERS’ PERCEPTIONS
WHEN INTERACTING WITH EASY DRAW
For the usability test, I designed four tasks for users to do:
Get a finished colorized drawing without having to draw by yourself.
With a targeted reference on your computer, make your sketch colorized in that style.
Get a finished colorized drawing merely with some color indication instead of colorizing the whole image.
Colorize by yourself and look for the tool’s inspiration when getting stuck.
During the test, I asked the following question and observed users’ reflections when they conducted those tasks.
How helpful is the tool in dealing with your frustrations in drawing?
- 5/5 think it helpfull in dealing with frustrations in colorization
Can you still gain pleasure from drawing by yourself with this tool?
- 4/5 think they can still gain pleasure, 1 worried that it would make her lazy about drawing by herself.
Can you quickly find the “colorize” and “polish” buttons and know how to use them to finish the task?
- 5/5 can easily find those buttons and know how to use them.
How hard can you combine this tool in your drawing flow by seamlessly switching from drawing by hand to auto-colorization/polishment?
- Some confusion happens: see below.
How hard can you understand the logic of layers, menu bars, and functions?
- Some confusion happens: see below.
How hard can you combine this tool in your drawing flow by seamlessly switching from drawing by hand and auto-colorization/polishing?
Confusion 1:
Some users cannot find select area options.
Before:
It is on the drop-down list as one of the ways to colorize
After:
It becomes an additional tool for selecting an area.
Following users’ habit of using other drawing tools, I put the colorization and polishment buttons on the top left. So most of the operating functions are on the left. Tool functions and layers are on the right.
Confusion 2:
Most users felt that automatically forming a new layer for the colorization/polishment result is a convenient and wonderful feature. One user felt confused when our tool didn’t inform her before creating a new layer.
Before:
Automatically form a new layer for the colorization result.
After:
Let the user choose if auto-create a new layer or not. Users can enjoy a seamless experience by selecting “create a new layer for the result”.
After:
By default, or if users choose not to auto-create a new layer, Easy Draw will inform users when building a new layer for the colorization result. Easy Draw also allows users to cancel the information for a more seamless experience in the window.
How hard can you understand the logic of layers, sidebar, and functions? - Confusing
Confusion 3:
During the task, users always ask: what is the relationship between layers and colorization result?
To deal with this confusion, I studied lots of software that drawers use. Figma, Illustration, Procreate, and Photoshop. Their adjustable properties are tied to different layers(for PS) or frames(for Figma)
Before:
Users feel confused seeing the former coloration result still here when a new layer is formed. They wonder if they click another selection of the result, what will happen?
After:
Tie each layer with its colorization/polishment result menus and treat them independently. The former layer’s colorization menu will disappear when building a new layer.
After:
Tie each layer with its colorization/polishment result menus. The left colorization/ polishment result menu is tied with the selected layer. When going back to the former layers, the left menu will change based on the selected layer.
After:
If users want to change former selections, they could go to that layer and polish/colorize again.
Final Result:
Other Projects
Traffic Status V1.2: SaaS system Iteration
Collegrize: Web-based Software Design