.svg)
Conceptual project for Designlab's UX Academy
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.
Users can easily customize their experience with an intuitive filtering system that allows them to find the perfect picture to color.
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.
Create a clear hierarchy so users aren't confused about where to go first.
Include easy-to-understand icons and labels so users immediately know what things are.
Make user-friendly filters so users can customize their experience and find the perfect picture.
Be sure things are located where users would expect them to be so users don’t become frustrated.
5 interviewees
All enjoyed arts and crafts, including coloring
4 with experience using an app to find and color pictures
I asked things like...
Why do they use an app to color?
What motivates them to continue to use an app?
What frustrations do they face?
What operating system and device do users use these apps on?
This persona helped to guide me as I designed the PictoPalette app.
POV
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.
HMWs
How might we add personalization options that allow users to focus on their favorite parts about coloring?
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.
Had 7 participants
Was an open sort
Used Optimal Workshop
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.
Creating user flows and task flows was helpful in this process. Below is the user flow I created for finding a picture to color.
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.
.png)
I wanted to see before taking the design further, so I conducted usability testing in mid-fidelity.
Unmoderated in Maze
5 flows
7 participants
Key findings:
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.
The icons on the coloring picture page weren’t very understandable.
.png)
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.
.png)
AFTER: Filter options are visible and moved to the top of the page where they can be noticed more easily.
.png)
BEFORE: It's unclear what the icons mean.
.png)
AFTER: Labels have been added to the icons.
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.
.png)
BEFORE: The user had the option to manually save the changes they had made.
.png)
AFTER: The manual save option is removed. Instead, the app automatically saves each thing the user last did, making it more user-friendly.
.png)
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.
.png)
Shades of blue with a hint of purple emphasize the ease of use value as well as inspiration and beauty.
.png)
The Comfortaa font’s pleasant lines and tall x-height brings a sense of ease, beauty, and pleasant feelings.
After three versions of the high fidelity wireframes, the final product was ready! You can see the wireframes and the prototype below.
.png)
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.