Version 1 (View in Tablet): https://chromairo.herokuapp.com/
Invision Prototype: https://invis.io/KDACYIGUG
Project Team: Cassandra Balbas: UX Designer and Illustrator,
Maria Galindo: UX Designer and Researcher,
Alex Panganiban: Researcher and Developer
Christopher Sandoval: UX Designer and Developer
Invision Prototype: https://invis.io/KDACYIGUG
Project Team: Cassandra Balbas: UX Designer and Illustrator,
Maria Galindo: UX Designer and Researcher,
Alex Panganiban: Researcher and Developer
Christopher Sandoval: UX Designer and Developer
Project Overview
“Chroma” is a simple coloring application designed to help monitor, track, and improve users’ moods. The user would login, rate their mood on a scale from happy to sad, complete a coloring sheet based off their mood selection, then reassess how they’re feeling after completing the activity.
Problem statement
When given the task to "make something to improve the world," our team knew that the best place to start was our UCI community. At the time we started this project, one of the more prevalent issues was the stigma around mental health and the lack of resources we had on campus. Considering their busy schedules, (including our own, since we only had seven weeks to complete this project,) our goal was to design an application that would provide an experience that was simple, easy, reflective, and flexible to their lifestyles.
process
Competitor Analysis
Due to the lack of mental health apps available on the app store at the time, we based the design off of coloring apps. Nearly all had their color palette at the bottom 10-15% of the screen and the image taking the remaining space.
Due to the lack of mental health apps available on the app store at the time, we based the design off of coloring apps. Nearly all had their color palette at the bottom 10-15% of the screen and the image taking the remaining space.
Wireframes & Low-Fidelity Designs
Low-fidelity mockups and a general user flow of how the app would be used were then sketched and recreated on Balsamiq.
Low-fidelity mockups and a general user flow of how the app would be used were then sketched and recreated on Balsamiq.
User Testing
Via UsabilityHub, user testing was completed for ambiguity regarding instructions and layout.
The question was "Where would you click if you were feeling 'good'? After that, how would you go back to change your mood?" We received a total of 39 responses.
Based on the heat map, we found that majority of users ended up selecting the correct areas. Several testers tapped/clicked in incorrect locations however; our team believes these testers failed to read the instructions given at the beginning of the test. We then included "Please read all instructions" at the beginning of the question.
High-Fidelity Design
Because the goal of our app was to make our users feel more calm, we created a clean and simple interface that did not distract or take away from the content. The monochromatic style, and limiting our palette to only tones of gray was primarily used to make sure that the color palettes would not clash with the overall design— especially after the user finished coloring. We also did not want to add too many decorative elements so that the user can put their focus into the mandalas that they work with throughout their use of the application.
Because the goal of our app was to make our users feel more calm, we created a clean and simple interface that did not distract or take away from the content. The monochromatic style, and limiting our palette to only tones of gray was primarily used to make sure that the color palettes would not clash with the overall design— especially after the user finished coloring. We also did not want to add too many decorative elements so that the user can put their focus into the mandalas that they work with throughout their use of the application.
High-Fidelity Demonstration:
User opens application for the first time and is asked for their current mood. They move the dial at the top of the circle to their appropriate mood. (Displaying mood options in this format vs in a Likert scale prevents scoring and devaluing their feelings if they are having a bad day.)
User opens application for the first time and is asked for their current mood. They move the dial at the top of the circle to their appropriate mood. (Displaying mood options in this format vs in a Likert scale prevents scoring and devaluing their feelings if they are having a bad day.)
Based off their mood, they are able to choose their coloring sheet and color palette. By limiting the users’ options, they are able to complete the activity sooner. Design palettes also reduce the amount of time users would take in completing the activity, and may also boost confidence because the colors work well with one another. (Design palettes below were found on www.design-seeds.com.)
The user is ready to color. Once they are done, they are required to confirm so on the top right corner of the screen.
The user is then asked to reassess their mood after the activity.
At the end of the full session, they are then asked if they would like to make an account, where they would be able to see their moods from previous sessions and a gallery of completed coloring sheets.
User Walkthroughs
We completed four walkthroughs then interviews to gain a better understanding of the effects on our users’ mental health after using Chroma. Participants were in college, or were prospective college students. During the walkthroughs, we had users complete one full session- open app, set mood, color, and reassess mood. Overall, we found that most of our users had a good understanding and positive reaction of the app, but we received comments of enlarging the size of the instructions and moods.
We completed four walkthroughs then interviews to gain a better understanding of the effects on our users’ mental health after using Chroma. Participants were in college, or were prospective college students. During the walkthroughs, we had users complete one full session- open app, set mood, color, and reassess mood. Overall, we found that most of our users had a good understanding and positive reaction of the app, but we received comments of enlarging the size of the instructions and moods.
User Interviews
During the interview, we asked them the following questions:
How did you feel after using the app?
How did you feel about having pre-selected color palettes?
How do you feel about the overall interface design of the application?
Do you have any design suggestions?
During the interview, we asked them the following questions:
How did you feel after using the app?
How did you feel about having pre-selected color palettes?
How do you feel about the overall interface design of the application?
Do you have any design suggestions?
OUTCOMES & LESSONS
I'm happy with the work that our team was able to do in the 7 short weeks. Not only were we able to design the app from scratch, but we were also able to develop it too. The positive feedback we received from users during our testing phase was reassuring and motivating that we needed more wellness apps geared toward reducing stress and anxiety.
For future iterations of the app, I would like to partner with students and faculty that are in Psychology and the Wellness Center to help with the research and user testing of the app.
In addition, I would have liked to go beyond the feeling of "good - bad" and would like to track other feelings such as jealous, guilty, anxious, etc.