COLAB10 - Web App


A Product to help individuals who struggle with identifying and documenting their emotions in real time

Problem Background  

Anxiousness, feeling unheard, shaking, crying… these are all things people experience when in an emotionally taxing interaction with a loved one, colleague, boss and so on. Our data revealed that 90% of individuals wish they had a quick or guided outlet to understand, overcome and release those interactions and the negative feelings that they evoked.

Anyone who attends therapy, suffers from a mental health disorder and/or wants to better their communication and relationships with their friends, family, significant others and most importantly themselves, our app is for you! It is imperative that we continue to find solutions so our peers can effectively communicate their emotions and how they feel towards the important people in their life!

We now know that it's difficult to recall the exact emotions and events of an intense interaction after the fact. This is why we offer two options to our users depending on their needs. They can either choose to quickly jot down their experience and get out, or explore and understand their experience, with a little help. Our users can then come back to their entries if and when they are ready to reflect. 

Research Insights

We conducted a user survey, and received 29 respondents based on our user survey we determined that our user persona and target audience were women between 26 and 35 years old that struggle with their mental health. 

Our research determined that 76% of respondents struggled with mental health and that 34% had seen a mental health provider for more than a year. Of those 76% , 62% would be comfortable sharing their journals and emotional states with a mental health provider.

Our research showed that people’s mental health affects their relationships, regulating emotions, and contributes to interpersonal conflict. 68% of our respondents stated that they couldn’t resolve their conflicts in the moment and 46% had trouble remembering the details or the conflict and their emotional states. This information validated our problem statement and let us know that solving this user problem had merit. 

User Pain Points

Our target users are individuals who suffer from mental health disorders and struggle with emotional intelligence. By completing surveys, interviews and other forms of research we identified the following user pain points.

1. Not having a quick outlet to document what they’re currently feeling.

2. Not having guided resources to help them process what they’re feeling at that moment.

3. Not knowing how to effectively express how they’re feeling to their spouse, partner, friends or family.

We hypothesize that if we can help users identify what they’re feeling during these moments of conflict and provide an outlet to get their thoughts out they can improve their communication, emotional intelligence and overall well being.


Our preliminary user research showed that our target users are in need of a resource to help guide them through what they’re thinking and feeling. 

Solution Explanation

Based on our target users’ pain points, we knew that we wanted to build a solution that would allow users a way to quickly write about their experiences while also providing a solution that would allow users to be guided during times of interpersonal conflict. 

As a part of our research phase, we did a comparative analysis of over ten different mobile and browser-based applications. Three applications stood out above the others: The Dime Game, Coupleness, and DBT Coach. We learned vital things from each app that helped guide our initial design decisions for iJournal. 

The Dime Game is a mobile app that follows a dialectical behavior therapy (DBT) skill. The app is intended to help its users improve their ability to set boundaries in their relationships. This app was valuable to our design process because it was based in science and provided a guided and simple experience which is similar to what we accomplished.

DBT Coach is a mobile app that intends to help users improve their lives through the usage of DBT Therapy skills. This app did not have a very detailed entry system but it did offer a variety of DBT skills for users to utlize. However, these skills were not guided. We want to offer a guided experience for our users so that they could easily use their journal to share with their counselors or loved ones. DBT Coach led to me exploring different DBT skills to allow us to base iJournal in science.

We decided to look into Marsha Linehan's skill book for DBT to find an emotional regulation skill that would work well in a journal experience. We decided to use “Check the Facts” skill for our guided journal experience. We wanted our user’s to be able to not just document their emotional experiences but to be able to improve their ability to communicate and regulate their emotions during interpersonal conflicts and this specific skill fit perfectly for our user’s needs. 

Another important element of our design process was the development of iJournal’s branding. We wanted our users to enjoy a peaceful and calming experience to encourage user’s to relax during these emotional events. 

An aspect of our branding development focused on consistently, modifying and adhering to the idea of promoting calm. We improved upon these ideals throughout the process from picking a color palette, font face, the copy, and even focusing on improving the fluidity of the logo to make it welcoming. 

It was very important to our group to find a color palette that met WCAG 2 accessibility standards while adhering to color psychology principles to find a palette that would promote calmness, serenity, and bring elements of warmth into our user’s experience. 

Our developer, Saana was key to making sure that the copy for our app was welcoming. We thought about every aspect of the copy from how to create a welcoming landing page that would convert with out CTAs as well as thinking about what a user would see if they typed in a password that doesn’t match. 

Lofi & Hifi Mockups

Ash designed iJournal from a mobile first mindset. He worked on aspects of the design in chunks in order to be able to hand off to the developers in an iterative way. The hardest part was making sure that the guided journal feature would be as simple and easy to use as possible for our users while being responsive for the developers to be able to build. The image below has an example of the progression from wire frame to high fidelity for the journal feature. 

The iJournal landing page is a place for users to learn more about our product and to get user’s to sign up for the product. Our landing page was designed to be easily responsive to any screen size. Ash designed the illustrations on the landing page in Adobe Illustrator. These illustrations were designed to fit within our branding and add visual appeal to the landing page.

Iterative Design Learnings

After we showcased our prototype to the users again, we learned that users had some specific needs that we hadn’t accounted for in our initial design. User’s had many ideas that we could incorporate into our design but we had to prioritize features that would be the easiest to incorporate into our minimum viable product (MVP) while providing the most user impact. We were able to add these features to our product before launching the live product: integrated physical sensations, ‘Other’ input fields, a quick journal feature, and a simplified homescreen. 

The physical sensations were added as an option based on usability testings and user interviews. Physical sensations are separate from emotional and can be selected in addition to emotional inputs. User’s were hoping to have more control over their emotional inputs. We added an ‘other’ option with an area to leave a description so that user’s could leave what they were feeling if they did not feel that the other descriptors were relevant to their situation. 

The two larger iterations were the quick journal feature and the simplification of the homescreen. User feedback provided us with key insights into the needs of users. They wanted an option that would allow them to quickly get their feelings out with minimal distractions. These changes met those needs and were included in our MVP. 

Another aspect of our product that was iterative was the development of the logo. Our team wanted a logo that was simplistic, recognizable, and calming. This photo below shows the process of our logo development. Our designer, Ash spent time sketching and came to the team with some options. After receiving feedback and doing a preference test, we returned to the drawing table before coming back and fully iterating on the one of the original ideas. Saana and Ash both worked together to come to a final solution for the logo. Saana gave valuable feedback while Ash used Adobe Illustrator to make changes to the design. 

Technical implementation

Where is it hosted? 

  • Netlify

What is your tech stack?

  • React, Firebase, SASS

High level journey of a request

  • Input journal
  • Save journal to firebase
  • Retrieve and display

Technical challenges

What was the hardest part of development?

  • Different time schedules.
  • Designing and planning the data structure 
  • Understanding each other’ s code and organization

What are some key takeaways?

  • Learning to prioritize user experience and general flow of app over adding excess functionality that users may not require
  • Simpler and cleaner is better

Future Steps/Stretch Goals

Stretch goals

  • Ability to track trends of emotions over a set period of time
  • Ability to search and retrieve journal entry using emotion and/or date 
  • Voice recording feature 
  • Ability to share content from app with therapist/ third parties
  • AI prompts to help manage emotions/ offer coping mechanisms


Product Manager Learnings:

Parker Wilson

  • I learned how to adapt to changes and timelines.
  • It is important that every team member feels heard when having discussions.
  • Planning the week out into individual tasks and deliverables are important for organization and meeting project goals!

Designer Learnings:

Ash Gamble

  • I learned how to work in tandem in an agile environment. I had to adapt to a design process that was linear in order to be able to meet the needs of my teammates. 
  • I learned the importance of having a design system in Figma that is friendly for the designer and the developers. I definitely realized that my system was not the easiest for the developers to navigate. This experience has helped me realize that I need to work more on finding developer friendly solutions to the organization of the design file. 
  • I was able to work with developers to discuss their limitations and the feasibility of the project. This allowed me to increase my knowledge of responsive design, Github and how data retrieval systems work. 
  • This experience reinforced my need to be able to advocate for a research plan and ideation early on in a project to give it a solid foundation for the product design.

Developer Learnings:

Sara Munir

  • Learning to prioritize user experience and overall flow of app over adding excess functionality that users may not require. - Sara 
  • Improved pair programming skills and learning how to collaborate with other coding styles.
  • Learned to work within schedules in different time zones

Developers Learnings:

Saana Selvan


  • Gained a window into the process of research, iteration and continuous readjustment of scope
  • Learned how to schedule and execute smaller tasks based on individual skills and abilities for efficiency.
  • Learned to differ regularly to designer to ensure that we as developers stay true to their vision.

Full Team Learning

Overall we learned how to adapt to everyone’s schedules to have high level collaboration to complete our goal of shipping our MVP!