UX/UI DESIGN

here:after

A journaling application designed to support young adults in documenting their emotions and reflecting on experiences.

here:after is here to help you reflect HERE, and think about it AFTER. 

Roles

User Research, User Interview, User Testing, Visual Design, Wireframing & Prototyping

Timeline

4 months

Tools

Figma, Illustrator

Project Overview

Many individuals deal with stressors through unhealthy coping mechanisms

As current university students, we noticed that our peers and colleagues encountered various stressors during the school year, ranging from academics to extenuating circumstances. As a result, they often adopt unhealthy coping mechanisms such as suppressing their emotions and isolating themselves.

Individuals struggle with documenting and pinpointing a pattern in their emotions, often caused by a lack of safe space, time, or motivation. The lack of self-reflection affects individuals’ dispositions and perpetuates emotional imbalance.

The Solution

A space for self-reflection

Here:after is a journaling application designed to support young adults with limited time for self-reflection in documenting their emotions and reflecting on past experiences. 

It is designed with ease of use in mind, prioritizing efficiency, mindfulness and a focus on one’s self.

The Solution: Features

Quick & easy check-in

We provide users with an efficient way of doing a quick check-in and the option to write a full entry. If users choose to write, our application has a prompt generator which guides the user through the process Users can hide and unhide entries, providing autonomy/control to what they want to see in this emotionally heavy process. Every entry can be edited within 24 hours of the initial entry, after which users have to create an afterthought.

The Solution: Features

Efficient filter & search

With all of the testing done on the search function, we were able to make it as efficient and effective as possible. With recent searches available and an easy filter system, this makes the journaling and reflective process all the easier.

The Solution: Features

Adding afterthoughts

The afterthoughts feature addresses self-reflection, which is one of the two main objectives of this app. After 24 hours of the initial entry, users add afterthoughts instead of editing the original entry. The process is very similar to adding the initial entry, but a bigger focus on reflecting, through recognizing/pinpointing emotions and processing thoughts from the previous entry. Afterthoughts allow users to confide in themselves in addition to whatever support they may or may not have outside of this app. 

Comments from RGD Experts

Research

User Insights

Individuals with poor mental health often struggle with reflection

To gain a better insight of the problem, we conducted user interviews on individuals who both do and do not self-reflect and their experience with it.

The participants included 8 young adults who were either in school or in a fast-paced, stressful field.

  • 50% experience anxiety and fear when voicing their struggle mainly due to fear of judgement and a sense of uncomfortable vulnerability.
  • 50% possess a lack of self-reflection routine and do not have a convenient coping mechanism at hand which leads to a vicious cycle of having poor mental health.
  • Some said that they do not journal or self-reflect consistently due to various reasons, but stated that they would like to do these things on a regular basis as they see the benefit in doing so.
  • 20% struggle with documenting and pinpointing a pattern in their emotions, often caused by a lack of safe space, time, or motivation.

Expert Insights

Experts suggest successful strategies on self-reflection and documentation

As mental health is a sensitive topic, we sought insights from a psychotherapist to ensure we were fully informed of user pain points while developing our insights. Our insights from this interview also included successful strategies employed by professionals on self-reflection and documentation.

Competitive Analysis

Existing self-reflection applications

To understand the current market, we looked into what existing applications provided and weren’t able to provide.

Woebot

Pros: gives open-ended prompts that you answer i.e. how are you feeling. The Chatbot can monitor the user’s moods and identify the stressors in their life and the app is password-protected to ensure privacy.

Cons: have to scroll to find previous conversations and the application’s repetitive nature can lose value.

7 Cups

Pros: breathing exercises and self-help guides available. Anonymous participation allows for open communication on emotions or advice through listeners and bots.

Cons: Interacting with others can make users feel worse, and the application facilitates venting over self-reflection. The application doesn’t promise confidentiality.

Notion

Pros: free, easy to use, great for bolding and underlining text, and adding emotion-based tags.

Cons: no automatic date reminder as they doesn't want to manually enter and there’s no prompt generator

CBT Thought Diary

Pros: can add tags, good for travel.

Cons: productivity focused. No mental health resources.

Floret

Pros: can use music in the background.

Cons: Couldn’t easily check mood. Functions more as a to do list than a journal.

Persona

Introducing Shirley & Patrick

Based on the user interviews, two distinct personas varying in different demographics, needs, goals and paint points were developed.

Customer Journey Map

A day in the life of Shirley & Patrick

Customer journey maps revealed that while some individuals were interested in journaling, the process did not fit into their rituals.

User Flow & Task Flow

Streamlined user interaction

A user flow is created to visually map the journey users take throughout the product. A task flows is created to streamline user interactions, providing step-by-step guidance to accomplish specific goals, enhancing efficiency, and ensuring a seamless user experience.

Development

Wireframing

Low & mid-fidelity prototype

Each group member was tasked with designing for one user flow. I was tasked with the search/calendar user flow wireframe.

After feedback from each group member’s low-fidelity, we mocked up the mid-fidelity to ensure we were all on the same page about the design direction.

Click to view low and mid-fidelity prototypes.

Usability Testing

Gathering user feedback

Two usability testing were conducted, including one of the original interviewees and someone unfamiliar with the project premise. These tests benefitted the group immensely as we were able to further develop the solution which addresses the design problem and justify certain design choices.

Design

Inspiration & style guide

In terms of style and design, we wanted it to give off a look and feel that is uplifting, encouraging, friendly, and simple. We wanted to maintain the minimal and simple aspects that the users liked through the color purple, typography, iconography, and layout. All of these choices work together to emulate the tone we wanted to convey.

Final Prototype
Takeaways