An iOS application that records emotions through color and gives corresponding suggestions.
· · ·
PROBLEM
No link between emotions and experiences.
Barrett (2016) Study shows that when emotions occur, people need to know what they have experienced in order to grasp physiological and behavioral responses that they may have, and to respond specifically to each specific emotion. Writing diaries are a way to record the experience. But how to recognize and record the exact emotion behind the experience? There is no link between emotions and experiences.
Low efficiency when writing diaries.
However, it takes people a long time to write diaries. And people always don’t know what to write when writing diaries.
Key Findings
1. Emotions are important when recording experiences in a diary, and people need a link to connect emotions and experiences.
2. Need a way for people to write diaries more efficiently.
OVERVIEW
SOLUTION
Write emotional diaries and color your life! Color Diary is a diary App that records users emotions through colors and gives corresponding suggestions. Color Diary provides a link to connect emotions and experiences - colors, and a more efficient way to guide people to write diaries for college students.
My Role
UX/UI Designer
Duration
5 months (Feb 2018 - Jun 2018)
Team Members
Solo Project
Tools
Figma / Adobe Illustrator / Sketch /
Adobe Photoshop / Adobe Premiere
· · ·
DIARY STUDIES - COLOR & EMOTION
Research Assumptions & Goal
Colors may be able to link emotions and experiences together. So if I could find the connection between colors and emotions, then emotions and experiences could be linked.
Research Steps
1. Invite 4 people to do this research.
2. Vote for several colors that best represent emotions.
3. Each student writes diaries for a week, and each diary should contain an emotion and a corresponding color.
4. Analyze data.
Research Subjects
Research Process - Color Selection
Every student votes for colors that they think can represent each emotion the best.
Research Process - Diaries
Everyone wrote a week’s diaries, and the emotion in each diary should correspond to a specific color. These specific emotions were then categorized according to different colors.
Data Analysis 1: Emotions in Each Color
Data Analysis 2: Colors in Each Emotion
Key Findings from Diary Studies Round 1 (Failure)
There is no specific connection between colors and emotions, due to everyone’s different cognition of colors and emotions. So it is necessary to do data processing by reducing the dimension of colors and emotions.
DATA PROCESSING
Dimensionality Reduction
Key Findings from Data Processing (Success)
Positive emotions correspond to grayscale values less than 50, and negative emotions correspond to grayscale values greater than 50. Therefore, these two colors are selected as the corresponding relationship between positive and negative emotions, and the gradient formed by these two colors is exactly the positive or negative degree of emotions.
UNDERSTAND THE COMPETITORS
COMPETITIVE ANALYSIS
After I found a potential connection between emotions and colors, I analyzed several diary applications using colors as emotions, and other diary applications as well.
Key Findings from Competitive Product Analysis
1. Classifications by labels make people more efficient to write diaries.
2. Classifications by labels help generate feedback pages, making people have more desire to write diaries and keep writing.
DIARY STUDIES - CLASSIFICATION
Research Goal
As I found the classifications by labels could help a lot for our diary application, I planned to research what specific labels could help the most for students.
Research Steps
1. Invite the same 4 students to write diaries for another week, and each diary should correspond to a specific label.
2. Analyze data.
Research Process - Diaries
Those 4 students wrote a week’s diaries again, and each diary should correspond to a specific label. Then I counted the number of diaries under each label.
Data Analysis: Number of Diaries Per Label
Key Findings from Diary Studies Round 2
The most suitable labels for college students are:
DESIGN GOAL
WHO: College students
WHAT: A better way to write diaries and record emotions in daily life
HOW: 1. Choose a color for each diary's emotion and get feedback
2. Write diaries efficiently according to labels
USER FLOW DESIGN
Color Diary's Main Functionality
1. Viewing existing diaries
2. Writing a new diary & Choosing a color
3. Diary report
DESIGN
WIREFRAMES
EVALUATION
USABILITY TESTING
Four participants were invited to test these low-fidelity prototypes since they all have experience of writing diaries more or less. During the usability test, they were asked to write a new diary and view reports. I observed whether they mistakenly used and took notes.
EVALUATION
KEY FINDINGS
1. Users did not add a new diary correctly. Most users did not realize there was an arrow in the bottom and tried to click the existing circle in Home page to see if they could write a new diary. One user clicked the report button in the upper right corner.
2. One user tried to click the texts besides the circle in Home page to view the existing diaries. After nothing happened, he realized he should click the circle.
3. Most users had no idea why they need to choose a color after writing a diary.
4. Some users mentioned that they were a little confused about the report. Especially in the weekly and the monthly report, they did not know the specific meaning of these charts and the elements in the charts.
ITERATIONS
After the usability test, I rethought some interactions and optimized, reorganized the information architecture based on Five Hat Racks [1], applied Web Content Accessibility Guidelines (WCAG) [2], and added more user-friendly instructions.
Daily Diary Page
ITERATIONS
Adding A New Diary Page
ITERATIONS
Viewing A Diary Page
ITERATIONS
Editing Labels Page
DESIGN
LOGO DESIGN
The logo was inspired by the first letters C and D of Color Diary, so it was designed as a horizontally flipped D, which is closer to the shape of C. In addition, the circle on the right is both the UI design for selecting colors and the analogous shape of the lock on a real diary book.
· · ·
Reflection
In this project, I learned a new user research method, which is Diary Studies. Different from interviews and surveys, diary studies can record attitudinal and qualitative data for a long period, which helped me a lot to define the functionality and optimize the user experience.
In addition, I understood the human diversity better through inclusive design and realized that I should take accessibility design into account in the early stage. Applying WCAG to an almost completed mobile app would increase a lot of cost, including the cost of redesigning and even redeveloping. Therefore, considering the accessibility design from the beginning of a project can not only lower the cost, but also achieve the design for diversity.
Reference
[1] Anton, N. Design Principle: Organizing information. Retrieved from: https://uxplanet.org/design-principle-organizing-information-343a7ef936a8
[2] Shawn, H. (2018, June 22). Web Content Accessibility Guidelines (WCAG) Overview. Retrieved from: https://www.w3.org/WAI/standards-guidelines/wcag/
[3] Ruben, B. (2019, November 13). Inclusivity guide: usability design for left handedness 101. Retrieved from: https://uxdesign.cc/inclusivity-guide-usability-design-for-left-handedness-101-2bc0265ae21e
Previous Project