Luis Uribe
UX Designer
Made with

GOEMETREE: Coloring relaxation app

Case Study - December 2019

Design Process

My Role: UX Researcher & UI/UX Designer

Duration: 4 Weeks (Potential return to the project in the future)

Team or solo project?: School Team Project

Tools & Devices: Figma, Illustrator & Photoshop

Members: 

  • Justin Ballard - Project Manager/UI Designer

  • Nathanial Bui - UX Designer/Graphic Designer

  • Orion Jackson - UX Designer

  • Seoul Lee - UX Designer

  • Luis Uribe Zambrano - UX Researcher/UI Designer

Context

GEOMETREE is a proposed coloring app for mobile devices that promotes joy, creativity, and mindfulness. It would procedurally generate mandala patterns and other designs for users to color, which may provide a soothing effect. 

The Problem

Anxiety, depression and other related illnesses prevent people from realizing their fullest potential every day. When symptoms manifest at inconvenient times, there is a need for more tools to supplement treatment beyond medication, as medication’s soporific nature precludes any other task being fulfilled. Our team wanted to see if we could design an app that would serve this function of lessening the severity of anxious or depressed events, if not to the same degree of a benzodiazepine then simply enough to allow our users the opportunity to regain control of their derailing thoughts. The theory we pursued is that there are such methods, which we could derive from the arts and creative thinking. One of the lessons learned from the recent trend of adult coloring books is that many people find complex coloring to be cathartic. We wanted to transform that idea for mobile, which we believe offers several advantages over traditional books and pencils. The first of which is its convenience; a smartphone is something a person would already have on them, as opposed to the clutter of various coloring books and art supplies. Mobile devices’ other key advantage is discretion, which would be helpful with avoiding gathering too much-unwanted attention and distractions while drawing. Finally, mobile devices as a platform can simply do more than paper, allowing us the flexibility to be a little whimsical with our ideas. With all of this in mind, we designed GEOMETREE to do good and spread joy.

Step 1: Research

Design Foundation

Before we delved into heavy research, we shared our own experiences with ways we cope when we feel down and had many discussions about what the app would do that lead us to create some rules for GEOMETREE before going forward.

GEOMETREE must be simple. Our lives are complicated enough as it is. In our ideal use case of staving off potential anxiety attacks, the user would need to access the core functionality of the program with as little in their way as possible, so we knew early on we must have a minimal and efficient UI that is as intuitive as it is elegant.

Social features were often discussed, among the team as well as potential users. To clarify the former point, we asked users in a survey we put out on our social media accounts and concluded that multiplayer features in GEOMETREE were largely counterintuitive. While a system for users to share their creations sounded fun, we believe such systems would foster competitive attitudes and engender users comparing their works against others. This would be antithetical to the goal of GEOMETREE, so we decided against many social or multiplayer functionalities at this time. One of our potential multiplayer ideas that did fit within the agenda of GEOMETREE was the ability to collaborate on the same projects. It would no longer be a competitive aspect, but rather a cooperative one where friends could help each other on more complex projects.

GEOMETREE must be accommodating. When designing the act of coloring, we tried to incorporate a healthy balance between guidance and control. At one end of the spectrum, we had freehand coloring. At the other is paint bucket-esque color filling (in reference to photoshop's paint bucket tool). We found that though most users would prefer to color freely, the option for a "fill" option was desired. So, we decided to have three coloring settings from which the user may choose. They can color completely freehand or they can use bucket fills, and we offer a middle-of-the-road choice, which is bordered freehand. Bordered freehand allows the user to color in as the user naturally would, but detects the separation lines around where the user is coloring and won’t spill over into the next segment.


Survey and Potential User Interview Reflection

Our online survey, comprised of Likert scale questions, was shared with anyone who has felt the need to do something to relieve stress via our personal social media accounts, Reddit and a segment of our cohort. Altogether, we ended up with 52 users who responded. In addition to quantitative methodology, we conducted open-ended interviews with fellow students for an in-class activity in an effort to understand our users’ needs and goals without first coloring or leading their impressions. While the internet survey provided useful data, our in-person interviews (where we told students about our project and asked for critiques) aided us a lot in our design as well by revealing to us certain user desires for which we didn’t originally account. 

That being said, the online survey was also integral to GEOMETREE's design. Questions on there like, “When coloring, do you prefer coloring it in yourself or using a fill option?” and “Would you prefer simpler drawings to fill in or mandalas?” really helped us going forward with our decision making. To elaborate, regarding the former question, we ended up deciding to give users multiple brushes that would have options such as “tap to fill” or “fill in yourself” to give a better user experience for multiple types of users rather than one type. And for the latter question, we ended up including an import picture mode that would allow users to upload a picture to our app and a cool algorithm would convert the image and its properties into something cool like a mosaic or a “drawn-like” black and white outlined image to fill-in. We did this to include a cool feature that would allow a user to color themselves or their friends and/or family in a way that’s calming and perhaps, something to share with others if the user were inclined to. 

Robin is our primary user, generated from research and interviews. Defining her needs empowered us to hone our user's needs and design.

Robin is our primary user, generated from research and interviews. Defining her needs empowered us to hone our user's needs and design.

Personas

Example

After extensive research, we finally created some personas to facilitate the design process.

This persona is from the type of age demographic we expect GEOMETREE to be most popular with, young adults from ages ranging from 18-24.

We believe this is the case as studies such as this one from the Substance Abuse and Mental Health Services Administration (Behavioral Health in the United States, 2012), show that 30% of young adults from 18-29 in the US have anxiety issues. And speaking from our anecdotal observations, this seems to be in-line with what we see.

Greg is what we would call our secondary user. His impact on our main app design is minimal, but his needs informed our idea to expand GEOMETREE to tablets in the future.

Greg is what we would call our secondary user. His impact on our main app design is minimal, but his needs informed our idea to expand GEOMETREE to tablets in the future.

Personas

One of our survey's questions (that was optional) was "What is your age?". And to our surprise, a good amount (roughly 25%) of responders were 50 years or older. The majority of them liked the idea of GEOMETREE and some of them left comments in our "Extra thoughts?" question (really, a text field) declaring that we should consider adding tablet support. 

With this fact in mind, we decided to keep making sure that GEOMETREE is accessible to all.

And before we get to the design aspect, we decided to do one last activity; a user storyboard featuring our first persona, Robin.
Storyboard below:
GEOMETREE: Coloring relaxation app
GEOMETREE: Coloring relaxation app
GEOMETREE: Coloring relaxation app
Step 2: Design
We sketched possible layouts based on our design rules, which also allowed us to begin refining our goals.

We sketched possible layouts based on our design rules, which also allowed us to begin refining our goals.

Sketches

Taking everything we've talked about so far, we each individually created our first UI sketches for. We then saw each other's work and took the best ideas from everybody to start incorporating into the final design. 

Final(?) UI Design
GEOMETREE: Coloring relaxation app

UI Design - Home page (and other screens in it shown above)

*In this section, I'll present all our pages and explain some design decisions regarding the aforementioned.

Design Decisions:

  • We decided to keep in touch with our design foundation of "we must have a minimal and efficient UI" and came up with this home screen

  • The top-left icon is a potential profile page feature we're still considering; if we do end up including it, it'll sort of serve as a page where the user can use their account (planned future feature) on a different device

  • The top-right hamburger menu would offer settings that the user can change, in them, we are considering adding color-blind settings to increase our app's accessibility

  • Swiping right would allow the user to enter our two other modes

  • Mode explanation: 'Color' would simply generate a random mandala, 'Photo Import' would allow a user to upload a picture that would be converted to black and white lines, and 'mood color' would generate a mandala based on the user's choice

This is an example of a piece we could see come from our app

This is an example of a piece we could see come from our app

UI Design - Gameplay page

Design Decisions:

  • The bottom navbar has icons that clearly represent what each of them does

  • Holding certain icons such as the brush and color palette would give the user more options for those features

  • Top navbar is faded a little (but still works the same) to emphasize the canvas for the user to color on

We hope to have a better algorithm that outputs better looking

We hope to have a better algorithm that outputs better looking "drawn" versions of pictures in the future (photo above was done through photoshop)

UI Design - Gameplay page (Photo Import mode)

Design Decisions:

  • Everything from the past screen applies here as well; the image to the right represents a feature we'd like to incorporate: turning photos into pencil versions

Reflecting back: if we come back to this project (good chance we will), we'll replace 'My Work' with 'My Art' as the word 'work' could arguably stress certain users out

Reflecting back: if we come back to this project (good chance we will), we'll replace 'My Work' with 'My Art' as the word 'work' could arguably stress certain users out

UI Design - My Work page

Design Decisions:

  • A simple and intuitive page that allows users to work on saved work

  • Something to note: a piece of art is done whenever the user deems so; there are no criteria for a finished design

  • 'Last opened' information was set in place for a better user experience

Conclusion

Reflections and future goals

While our research portion was fantastic, I personally think that we could've done a bit more UI work. I think that our design is fine, but we could perhaps next time show off some more details like how the screen would look when holding the brush icon and selecting a new one, etc. 

That being said, our research skills improved dramatically after this project and gave us the confidence to make our own solo projects (this project was done before 'Cario' and 'EZii'). The foundational knowledge gained in UX is the biggest takeaway from this project.

All that being said, we are considering to pursue this project further and perhaps, create a VR game where a user can be put in a world where they can pick up brushes (and still have the same and perhaps, more features as the app version) and simply have it as an enhanced experience of this app. 

If not, we'll stick to an app format and perhaps look into some sort of AR implementation. 

Either way, our major (Interactive Media Design) will introduce us to some game development and other cool skills that might push us to explore to expand into some cool mediums.

If the project gets redone, you can expect to see it here on my portfolio around late May 2021.