Bicarakan's Journaling Page
Introduction
Bicarakan.id is an online platform that offers practical and easily accessible psychological counseling services to people all across Indonesia. The company wants to add a new journaling feature for the mobile application that will provide an opportunity for daily positive self-talk and improve mental health.
Collaborators
Anisah Vahira - Product Manager
Fandi Ramadhan - UI/UX Designer
Role
UI/UX Designer
Illustrator
Tools
Process Overview
In this particular project, I worked as a UI/UX designer and Illustrator. When I joined the team, I discovered that a fellow designer had already conducted some research that validated the proto-persona. I used this research data and analyzed the users' needs. Then I created information architecture and wireframes to ensure that users can access all the information they need. After this, I designed the first phase of the project which included the main functionalities, and conducted usability testing.
Problem
Users' feelings cannot be fully expressed due to limited space.
The content and style are outdated.
Unnecessary quotes and articles.
Lack of visual hierarchy, no visual highlight.
Confusing layout, spacing, and font size.
Analysis
First of all, we conducted a heuristic evaluation of the previous Journaling page to identify any issues. One of the most significant problems we found was that the screen layout was confusing and difficult to understand. Additionally, there was not enough space provided to answer guided journal questions.
User Persona
All insights from the 1:1 interview method with 5 people who were interested in writing daily journals were synthesized into a user persona to empathize better with a possible user.
Information Architecture
After analyzing the users’ pain points and goals, and evaluating the previous design, I identified three main features: Personal Journaling, Guided Journaling, and Mood Tracker. Here is the information architecture that I created :
User Flow
Through the use of sitemaps, I was able to design a flow that goes from the initial visit to the journaling page to finishing their journal entry, which includes writing, responding to certain questions, and recording their mood to help users track their behavior.
Main Features and Structure
Wireframes
I started by brainstorming ideas and then created high-fidelity wireframes to visualize and plan out the stages of the user flow. The touchpoints for each task should be easy to complete, more importantly, the navigation and visibility status should be intuitive and not overwhelming. To create a consistent design, I used grids and implemented an icon set, layouts, design patterns, and primary copy onto my wireframes.
Brand Identity
Color Palette
As this project is linked with other features in the Bicarakan mobile app, I used the pre-existing design system provided by the company and improved the style to be more up-to-date.
Fonts and Icons
Illustration for Landing Page
After testing our landing page wireframes, we found that the text and icons were plain and not very engaging for our users. The founder of Bicarakan suggested creating a mascot for the Bicarakan application, and I collaborated directly with the founder to determine the most suitable illustration that would accurately represent the company's mental health services. The mascot, named Ara, is a 29-year-old woman who bears scars that symbolize human imperfections. This character portrays the message that it is okay to have imperfections and encourages individuals to embrace and accept themselves.
Initial Iteration
Final iteration
Initial Sketch
Final Design
I modified the page's opening quote to a question about users' current feelings to motivate users to start creating a journal.
I reduced the size and added a close button to the mini-article about the journal's benefits for users who already know the information.
I made the floating button less distracting while keeping the focus on creating a journal.
Once the UI kit was established, the product was ready to be visualized with all the necessary elements. Below are some comparisons between the previous design and the new design of the Bicarakan mobile app. Users begin by accessing the Journaling home page, then create a journal and track their mood through simple statistical data.
Home Page
What I improved :
I transformed the paragraph style into bullet points for easy comprehension.
I changed the journal illustration into a picture of an expressive writing analyst so the users can get a piece of new information.
I added a button so users can directly go to create a new journal page after reading the journaling benefits article.
Mini-Article Page
What I improved :
I modified the page's opening quote to a question "How are you feeling today?" to motivate users to start creating a journal.
I reduced the size and added a close button to the mini-article about the journal's benefits for users who already know the information.
I made the floating button less distracting, while keeping the focus on creating a journal.
Journal Entry Page
What I improved :
Guided Journal Page
What I improved :
The information structure of the guided journal has been simplified to make it less overwhelming.
The design of the journal entry has been simplified to give it a clean appearance that allows users to focus entirely on answering the questions. Additionally, I have included the size of the answer entry box to ensure that users feel comfortable while sharing their stories and expressing their emotions in the journal.
Usability Testing
Overall ease of use and UI experience while navigating through the app.
How users make assumptions and respond to the Information Architecture of the product.
Complete user flows (Journaling page - Journal entry - Mood tracking).
Any pain points or confusion throughout the process.
Testing Goals
Does it actually work?
I presented the initial high-fidelity prototype of my app to a group critique session and also conducted usability testing with a group of users. The participants were proficient in using smartphones and were interested in expressing themselves through writing. The testing was conducted remotely using communication platforms while navigating through the mobile app.
The prototype was highly successful, and all the users provided great feedback. They found the app's objectives easy to understand and accomplish. Additionally, they loved the concept and visuals, which kept them curious and engaged on the app.
"It's instinctive, simple, and nice design journaling feature." - Bobby
"It's not just a journal, it's a mood tracker! definitely would continue using this!" - Brenda
"Really helped me return to journal writing, you can learn a lot about yourself." - Diana
Key Takeaways
Don’t be afraid of being criticized
In this project, we had the opportunity to talk to our users in person. They gave us very insightful feedback, but sometimes their honest feedback hurt. I once heard a user say, “I don’t like the design and it is disconnected to me” in person. It hurt in the beginning, but then I asked him what made him disconnected from the design and what elements he did not like. It was not as scary as I thought and also greatly helped us iterate the final design.