UX / UI Design

An overview

  • Needed to be for the Android operating system
  • Needed to be only a MVP
  • 1 UX/UI Design Student
  • 1 Design Mentor
  • Group Critique Sessions
  • 2023
  • 4 Weeks
  • Figma
  • Maze
  • Optimal Workshop
  • StrawPoll
  • Midjourney Bot
  • Zoom

Conceptual project for Designlab's UX Academy

The Problem

People who love coloring need to be able to easily find pictures to color.

Many adults use coloring as a way to relax and express themselves creatively. Studies show that coloring can help to put your mind in a meditative state, reduce anxiety, improve concentration, and even delay the onset of dementia.

Providing ways for people to relax, express themselves creatively, and take care of their mental health is becoming increasingly important. According to the 2022 poll “Stress in America,” stress and mental health statistics of people in the US are getting worse. (stress.org) Long-term exposure to stress can increase the risk of a variety of physical and mental problems. (apa.org)

However, if people can't easily find pictures to color that are personally relaxing to them, they aren't as able to tap into the benefits of coloring, like relaxation and stress relief.

While most coloring apps have ways to find different types of pictures, such as animals versus flowers, they don't give users the option to refine their search further than that.

Users need a way to easily find pictures to color that would specifically meet their needs so they can have fun expressing themselves while tapping into the positive effects of coloring.

The Solution

PictoPalette, an Android-based app where users can find pictures to color

Users can easily customize their experience with an intuitive filtering system that allows them to find the perfect picture to color.

What I did...

Competitive Analysis

What could I learn from other apps that help users find coloring pictures?

I specifically looked for opportunities for improvement within other similar apps. Some of the apps I analyzed included Pigment, Happy Color, and Coloring Book for Me.

The Pigment app
The Happy Color app
The Coloring Book for Me app

Throughout the project, I specifically focused on the following opportunities:

  1. Create a clear hierarchy so users aren't confused about where to go first.

  2. Include easy-to-understand icons and labels so users immediately know what things are.

  3. Make user-friendly filters so users can customize their experience and find the perfect picture.

  4. Be sure things are located where users would expect them to be so users don’t become frustrated.

User Interviews

I had found opportunities for improvement by looking at other apps. Now, I wanted to hear directly from the users themselves.

I asked things like...

"I like to have something relaxing to do in the evenings to take my mind off the stresses of life."

User Persona

I took what I'd discovered in my interviews and created a user persona.

This persona helped to guide me as I designed the PictoPalette app.

The user persona I made based on my research findings.
POVs and HMWs

I created Point of View and How Might We statements that were useful in making sure I focused on the right things as I designed.


The user needs a way to personalize their coloring experience because an experience tailored to their preferences will help them have a fun and relaxing time.


How might we add personalization options that allow users to focus on their favorite parts about coloring?

User Journey

To further illustrate how this app would help users, I created a user journey.

The user journey
Card Sort

Where would users expect things to be located?

I had a mental idea of how the app could be organized, but I wanted to be sure that features would be located and named according to the users’ expectations. So, I conducted a card sort. 

Key finding:

Users expected to see "Settings" and "Account" in the same area of the app. I had originally thought of them as separate sections.

User Flow & Task Flows

I explored the steps required for users to find a picture to color.

Creating user flows and task flows was helpful in this process. Below is the user flow I created for finding a picture to color.

The user flow for finding a picture to color, either from using the filters or from selecting a picture on the home page.
Low-Fidelity Wireframing

After doing some sketching, I turned to low fidelity wireframing to continue refining my ideas.

Since the goal users have for coloring is to relax and have an enjoyable time, I included filter options to help them find pictures that they would find fun and relaxing to color.

You can see this below:

Below you can see the main task flow of the app: finding a picture to color. Because of the project constraints, it was the only flow I took to high fidelity.

Usability Testing & Iterations

Was the design easy to use?

I wanted to see before taking the design further, so I conducted usability testing in mid-fidelity.

Key findings:

  1. The filter option wasn’t visible enough to users. In fact, some users were unable to complete the task to filter for a picture because they couldn't find the filter option.

  2. The icons on the coloring picture page weren’t very understandable.

BEFORE: Filter options were hidden behind the word "Filter," making them easy to miss. Their location in the middle of the page also didn't help.

AFTER: Filter options are visible and moved to the top of the page where they can be noticed more easily.

BEFORE: It's unclear what the icons mean.

AFTER: Labels have been added to the icons.

Hi-Fidelity Wireframing

I chose to create high fidelity wireframes in dark mode because I wanted the pictures to color to stand out to the users.

To make sure the design followed best practices and had a clear hierarchy, I did the following:

1. Created four base shades of the darkest color to use as backgrounds for elements at various heights.

2. Used variations of #FFFFFF for text, changing the opacity depending on the emphasis. 

3. Checked the contrast ratio for every color combination I used.

4. Avoided saturated colors.

As I continued to tweak the high fidelity screens, I found more iterations that needed to be made. I prioritized doing them before considering the design complete because they were important for creating a good user experience.

Below are some of the iterations:

BEFORE: Having the filter options open like this near the top was not as easy to use.

AFTER: Filter options in a sheet at the bottom near a user's thumbs are more user-friendly.

BEFORE: The hierarchy was off, and the bottom area felt busy and cluttered.

AFTER: The color palettes are the most prominent tools visible since they're the most important to the user. Tapping the tool icon expands the other types of coloring tools.

BEFORE: The user had the option to manually save the changes they had made.

AFTER: The manual save option is removed. Instead, the app automatically saves each thing the user last did, making it more user-friendly.


The PictoPalette brand is based on the values of inspiration, enjoyment, beauty, and ease of use.

A simple logo emphasizes the ease of use value. The slightly script-like font remains easy to read while adding a touch of the inspiration and beauty values. 

Shades of blue with a hint of purple emphasize the ease of use value as well as inspiration and beauty.

The Comfortaa font’s pleasant lines and tall x-height brings a sense of ease, beauty, and pleasant feelings.

The Final Product and Prototype

Let's find a picture to color!

After three versions of the high fidelity wireframes, the final product was ready! You can see the wireframes and the prototype below.

The prototype

My Reflections

Next Steps

I created mid-fidelity wireframes for other flows within the app, like changing the settings, signing up, etc. However, due to the project constraints, I didn’t take these flows to high fidelity.

The next steps would include making high fidelity wireframes for the rest of the flows and then sending everything off to developers.


Designing in dark mode has its own set of challenges and at times made the project more complicated. In order to be sure I followed best practices, I read articles and case studies from others who designed in dark mode. I analyzed designs on Dribbble to see what things I could learn as well what could be opportunities for improvement. I also studied Material Design's guidelines on dark mode design. Even though this took more effort, I'm glad I took the time to do this. I'm happy with how the final designs turned out, and the experience broadened my horizons and improved my design skills.