ux research drawing app

March 12, 2023

With an ellipse brush, coloring is way easier. Customize your brush, eraser, and even your own palette. Use the filter to choose one of our awesome templates. We’re here to make your coloring experience better. Save your work, keep your own portfolio, share with the community, and view others’ work to enrich your art world!

Demo Video

Hierarchical Task Analysis tree

One difference between Sam and Oliver was the concept of being digital and physical while doing tasks. Oliver’s interpretation of digital and physical is based on the type of artwork (via software or paper & ink). Sam’s interpretation was based on the sharing format, where it doesn’t matter what medium the work was done on. The way Eunice gets inspiration to draw was different from others. For a subtask of drawing a penguin, Sam and Oliver mentioned that they search for penguin images or videos online to see the realistic view of penguins. However, in Eunice’s case she usually gets inspiration from viewing others’ (art) work. She would like to know more on how people choose the layouts or colors.

Observational Study Protocol

We followed Observe user coloring in a coloring book:

(1 min) Introduce ourselves.
(1 min) Ask demographic questions to the participant.
(1 min) Explain class project.
(2 min) Ask about coloring experiences on coloring books:
Ever did it before?
Any coloring tool (pencil, pen, brush, etc) that you prefer to use when coloring?
(2 min) Show an example of coloring on an example drawing.
(5-6 min) Task A: Given a drawing with outlines only, let them color with a circle point brush . Questions to ask: (1) How do you feel as you are coloring?Task B: Now change the tool to a square point brush . Questions to ask: (1) Does your experience of coloring change? (2) Is it easier/harder to color?Tack C: Now change the tool to an ellipse point brush . Questions to ask: (1) Does your experience of coloring change? (2) Is it easier/harder to color?
(3 min) Ask questions about the overall experience:
How do you feel about the artwork you created?
Which brush was the easiest to color?
Which brush was the hardest to color?
Was there a part that you found easier to color with a particular brush? Which one?
(1 min) Thank them for their time.
(1 min) Take a screenshot of their drawing as a record.

Recruiting Message

To recruit participants, we posted on the Facebook group and Instagram page.

Hi everyone! 🥳We are a group of undergraduate students at UC Berkeley. We want to invite you to participate in a study of coloring experience on brushes with different tips. During the study, you will be given a drawing 🎨and three brushes 🖌️ with different brush tips (in shapes) to use to color. You can color the drawing in your own style. Study participation will also consist of a 10-minute 🕒interview to answer questions about your experience. We’re not giving out any monetary compensation, but instead you’ll get to keep the artwork you colored after you’re done! If you are interested in participating, please fill out this Google Form link. Feel free to reply to this message or email us.

Findings from Observational Study

Participant 1

Right handed younger brother, who is an Asian and 21 years old in college.

Introduction

Do you have any experience with coloring books? When?: During kindergarten.

What coloring tools do you like to use when you are coloring?: Color pencils.

Task 1 (Circle)

How do you feel as you are coloring?: Hard to color precisely.

What’s making you uncomfortable in coloring?: Size of the brush and using Photoshop for the first time.

On the scale of 1 to 10, would you use this brush again for coloring?: 3.

Task 2 (Square)

How do you feel as you are coloring compared to the previous one?: Easier to color the curved lines such as the belly part of the drawing.

On the scale of 1 to 10, would you use this brush again for coloring?: 5.

Task 3 (Elipse)

How do you feel as you are coloring compared to the previous ones?: Feels like the size is much smaller, and I feel like I have a better control over details.

On the scale of 1 to 10, would you use this brush again for coloring?: 7.

Overall

How do you feel about the artwork you created?: I feel like my artwork is a little messy.

How was your experience with the three brush tips?: I love the ellipse. I was surprised it worked out so well and it allowed me to draw details more precisely.

I see that the highest rating you gave to a brush is a 7, what other concerns or improvements do you think that can bring the score to a 10 out of 10?: I still feel like there would be other types of brushes allowing more control.

Sketch with a circle brush

Sketch with a square brush

Sketch with an ellipse brush

Participant 2

High School classmate, who is Asian and 23 yrs old. Right-handed.

Introduction

Do you have any experience with coloring books? When?: I have not had experiences coloring a coloring book.

What coloring tools do you like to use when you are coloring?: Watercolor.

Task 1 (Circle)

How do you feel as you are coloring?: I like the circle brush.

Do you have anything that makes you uncomfortable when coloring?: Size of the brush.

On the scale of 1 to 10, would you use this brush again for coloring?: 6.

Task 2 (Square)

How do you feel as you are coloring compared to the previous one?: I find the square brush coloring faster and not necessarily harder to use.

On the scale of 1 to 10, would you use this brush again for coloring?: 8.

Task 3 (Elipse)

Do you have any opinions on the ellipse brush?: Yes, I find the ellipse brush to be easier on coloring specific gaps and shapes, but the length of the brush sometimes makes it harder to color certain areas. Also I noticed the brush size is smaller.

On the scale of 1 to 10, would you use this brush again for coloring?: 9.

Overall

How was your experience with the three brush tips?: I like the ellipse a lot, and I was surprised it worked out so well. I also liked the size of the square brush, as it painted the drawing much faster without sacrificing too much of the detail.

How do you like the drawings you did? Which is the best?: I am pretty happy with how all of them turned out, but the best one is the ellipse brush drawing. As I have finer control over the small area. I also wanted to cover the tail and hair, but I don’t think it will look good with the size of the brush.

I see that the highest rating you gave to a brush is a 9, what other concerns or improvements do you think that can bring the score to a 10 out of 10?: I think by having a reference image of what the brush tip looks like (a preview) can help me judge which brush I can use for the specific testing.

Anything else you would like to add or express?: No.

Sketch with a circle brush

Sketch with a square brush

Sketch with an ellipse brush

Participant 3

Female friend studying computer science at Stanford.

Introduction

Do you have any experience of coloring a coloring book? When?: I do it sometimes in my free time, but rarely.

What coloring tools do you like to use when you are coloring?: Crayons, brushes (paints), color pencils, etc.

Task 1 (Circle)

How do you feel as you are coloring?: The circle brush is easy to color shapes with curvy lines, like the holes in the cheese for example.

Scale 1 to 10 of this brush.: 7. It’s not bad, but it’s hard to color narrower shapes. It’s also hard to color the edges of the shape that aren’t curvy. It will be easy to color with this on drawings with a lot of curvy lines.

Task 2 (Square)

How does it feel now with the square brush? How’s your experience?: Square one is harder to color than the circle one. I don’t like the square brush because I can see that it is not smooth and rather has a zig zag finish on curvy lines. It’s only smooth when I’m coloring on straight lines.

On the scale of 1 to 10, would you use this brush again for coloring?: 4. I prefer the circle brush more than the square one. I would use it if I had to color squared shapes.

Task 3 (Elipse)

How does it feel now with an ellipse brush? How’s your experience?: So far I like it, better than the first two. It is a complement to both the circle and the square one, while it keeps its smooth texture of the circle, it is better to color narrower shapes. The coloring is more precise and I can handle the brush better.

On the scale of 1 to 10, would you use this brush again for coloring?: 8. I liked how the vertex of the ellipse allowed narrower coloring better. The best out of three.

Overall

How do you feel about the artwork you created?: I think it’s cute but I think I should have used different colors for some parts.

How was your overall experience with different types of brush tips?: It was great, all of them were easy to color wide areas, but then it got harder when I had to color narrower areas or certain outlines. I liked the ellipse brush the most and I find it surprising. When I was given an ellipse brush I expected the circle one to be better.

Was there a particular type of brush that was better to handle?: Ellipse brush! As I said before it’s a complement of both the circle one and square one. Still, it’s hard to color precisely in parts like Jerry’s fingers but way better than the first two.

Sketch with a circle brush

Sketch with a square brush

Sketch with an ellipse brush

Synthesis

Preference for a certain brush (ellipse) over the other two. Participants found ellipse brush the easiest to handle, such as coloring narrower areas, filling the gaps, or coloring certain shapes. In other words it was the easiest brush to control and the result was more precise than the other two (they were closer to what the participants desired). Having more control on the tool not only produced more satisfactory results but also led to faster coloring in time.

Users tend to be consistent with coloring connected shapes. Users tend to fill shapes (open area) with one color before changing to a different shape with a different color. People tend to be consistent with how they distribute the drawing for coloring. For example, participants were consistent about dividing the drawing into parts as ears, body, cheese, and belly and colored each part with the same color within the drawing even though their color palettes changed.

Low fidelity sketches

Sketch Synthesis

Our sketches share a similar toolbar consisting of features including an ellipse brush, size & angle adjustments, a color picker, and a save button. We also agreed on implementing tips and guides as effective features for new users to learn and use our drawing application. One team member suggested having a mouse wheel control the size and angle of the brush. While we think this is a great idea, this feature could be changed depending on the spare time we are given for the project.

Figma Prototype

Home Page

Templates Page

Canvas

Color Picker

Finish

Portfolio Page

Sharing to community

Popular artwork detail

Findings from Usability Study

Usability Test Notes

Do you have any experience of coloring a coloring book? When?: A. Took classes in middle school, and I draw for fun sometimes. B. Took classes in elementary school, and I drew for fun on an ipad.

Initial thoughts on our app?: A. I think the app is straightforward to use. I liked the idea of networking. One confusing part is the purpose of three cards at the top of the home page. Seems good for first time users, but repetitive and annoying for frequent users. B. The little toolbar at the bottom seems not intuitive. + - buttons are too close to the actual tool. Also it would be better to keep the toolbar simple.

What would you prioritize more in the toolbar?: A. Being more intuitive. For example, the trash icon seems a little confusing. Does it throw away everything? B. Make it simple. Feels like the color picker and brush positions should be swapped and icons should be spaced out a little more.

What do you think about having colors as default?: A & B. I like to choose the color myself, maybe better to give a color palette.

What do you think about having a gradient color option and how many colors would you like to have?: A & B. Great, I suggest having 6 basic colors and 2 gradient colors!

What do you think about portfolio and community pages?: A & B. Intuitive and clear. It will encourage the users to share their work on the platform.

Reflection & Synthesis

We learned that the parts we initially expected to be intuitive can still be confusing to the users while observing their interaction on our prototype. We designed our interface aiming for clear navigation, so that users can use and utilize every page. We think we succeeded in this part because they followed the exact steps of what we planned. One unexpected part from the user was that they found the toolbar at the bottom of our canvas page confusing. They mentioned how the purpose of some icons in the toolbar were not clear and needed to be simple. Users suggested having a color palette in the toolbar for people who do not have a good sense of color combinations. These observations will help us acknowledge what users would love and expect to have on a coloring app. We would like to improve our prototype again to be more user-friendly and intuitive based on our usability test and study.

Revised Figma Prototype

Change 1

Users said that the three cards at the home page seem unnecessary. Although having three cards might be useful for first time users, this feature would be repetitive and unnecessary for frequent users. Therefore, we decided to add a button on each card to allow users to dismiss them.

Change 2

While on the canvas users were confused with the zoom in and zoom out button, specifically with its usage and function. We think that it was confusing since it is inside the tool bar, leading the user to think of it as one of the tools for coloring. We decided to move it out from the toolbar to make it more visually clear that it’s for the canvas zoom in and zoom out.

Change 3

Users suggested that they like to have an option to customize their palette. We added more colors to be shown on the palette and let the users add/remove the colors. These colors will be saved.

Interactive Prototype

Description of the interface and interactions

Our home screen navigates to three main pages and notifies users with updated features. In the templates page, users can choose templates to color which navigate to canvas. Our canvas has ellipse brush as default, but users can customize brush shape and angle by their preference. We have a customizable eraser and color palette where users can pick, save, and delete colors. Once they’re done, they can download their work. Portfolio page is where users can view their saved works. Users can share their work to the community page, where they can view popular drawings from others.

Pain points

We found out users had struggles with changing tool styles while coloring. To ease this, we put sliders where they can easily modify brush styles while using it. We also discovered users had a palette they use consistently. If they wanted to use a color from the past, they had to pick that color again if they changed colors in between. Thus, we added a color palette where users can freely pick, save, and delete colors to keep their palette. For even better experience, we added keyboard shortcuts for users to only focus on coloring without leaving the coloring area.

Github Repo

Github

Project Team

Eunice Lee, Oliver Lee, Sam Kim