CBT Thought Diary
Mobile App Redesign | Client
“It was great to work with Christina and her team. They were able to very quickly identify important issues, come up with a creative and elegant solution, and then validate it with users. Their solution is already being delivered to users with positive results!”
Design Challenge
How might we simplify processes to create a more intuitive and engaging app for users?
Research
“I journal to manage my emotions”
Key Takeaways:
Journal to improve mental health
Benefit from structure & guidance
Difficulty self-regulating thoughts
To discover user needs, goals, frustrations, and behaviors, we conducted user interviews with 10 participants. Our client provided a list of current CBT Thought Diary app users. Given time constraints, we had a mix of current user and avid journalers.
Identifying Opportunities for Change
Feature Inspiration
Direct Competitors: stoic., MoodNotes, Jour, Daylio
Indirect Competitors: Headspace, Calm, Youper, Woebot
Our client provided a list of direct and indirect competitors in the mental health, wellness, and journaling spaces. We conducted competitive and comparative analysis following a task analysis, feature inventory, and Pluses & Deltas approach to further inform the ideation for our design solution.
Key Features:
“I have so many different thoughts, but don’t know how to process them”
Tracy is an amalgamation of current user demographics and users interviewed and is representative of a typical CBT Thought Diary app user. To fulfill our client’s request of streamlining the onboarding flow, we focused on new users. Tracy was referred to throughout our design process to ensure that our design decisions were made with CBT Thought Diary users in mind.
Design Solution
Streamlining Steps to Reduce Stress
Onboarding Process
To streamline the onboarding flow, we implemented a “Learn More” button to provide the option of skipping numerous frames
Journal Entry Creation
By shifting “Daily Reminder” from Onboarding to after first journal entry creation, we hope for an increase in user engagement and commitment for reminders
Highlighting Positive Elements in Every Design
Through insights from user research, we individually sketched website redesign solutions and collaborated in a design studio. With this rapid, iterative approach, we solidified our design with a mash-up of the best elements from each sketch.
Key Redesign Elements:
Brand Voice: Dr. Fauci
Creating a structured and guided journaling process that users feel comfortable turning to requires a voice similar to Dr. Fauci’s. During our initial stakeholder meeting, our client stated CBT Thought Diary’s brand voice to be down-to-earth and professional/scientific.
Testing & Iteration
Finding Clarity in the Confusion
Task 1: “Walk through the onboarding process”
Results:
54% of users glossed over bulky text blocks
69% of users skipped “Learn More” option
85% of users experienced difficulty finding “Skip For Now” option on subscription screen
Task 2: “Show me how you would create your first journal entry”
Results:
77% of users signed up for Daily Reminders when prompted post-entry completion
46% of users experienced difficulty understanding which items were clickable
54% of users experienced confusion responding to prompts
Clear, Concise, & Structured Guidance for Simplicity in Self-Reflection
With key takeaways from usability testing, I formed recommendations and created a second iteration of our high-fidelity prototype.
Onboarding:
Keyboard:
Journal Entry Creation (Guidance):
Default “Help” Pop-up — added guidance for each step of journal entry process
Activities — “Select all that apply” for simple direction
Distortions — cut-off for clear scrolling indication
Focused Frames on Figma
My Contribution:
Designed and built Onboarding pop-up screens and all Journal Entry and Homepage screens
Designed and created components for progress indicators (i.e. progress bars and pagination dots), call-to-action buttons, and Mood icons
UX Writing for Onboarding, Journal Entries, and pop-up screens
Incorporated Figma plugin (A11y — Color Contrast Checker) to check for color accessibility and meet WCAG standards
Implemented changes based off usability testing takeaways for final iteration of prototype
Led Prototyping and Wireframing in Figma
1. Onboarding
Skippable Onboarding — provides users with opportunity to “Learn More”
Graphics represent main features — Mood-tracking, Thought-journaling, and expressing Gratitude
Progress indicated — progress bar and pagination dots
2. Journal Entry
Starter Prompts for keyboard — provides guidance and helps users when stuck
Option to click “Save” or “Continue” — solely track mood or continue with thought-journaling
Default pop-up for first-journal entry creation — provides guidance and explains significance
Progress indicated — progress bar, consistent with onboarding
Default pop-up — defines cognitive distortions and explains significance behind identifying them
“Select all that apply” — clear direction for users
Scrolling indication — cut-off at bottom of screen to indicate scrolling
3. Homepage
Gamification — introduced in “Insights” pop-up, 3 more journal entries to unlock insights
Guided journaling prompts — introduced in “Discover” pop-up
Daily Dose of Motivation — increase motivation, increase in user engagement, and create more positive associations with app
Prototype
Goal: Walk-through Onboarding and Create Your First Journal Entry
Conclusion
Through streamlining the onboarding and journal entry processes, we provided a more intuitive way for users to track their moods/thoughts and efficiently reflect. Since presenting to our client, several of our features have been implemented (i.e. skippable onboarding, “Entry” button, keyboard starter prompts, gamification, and homepage pop-ups). With simplified onboarding and journal entry flows, we expect an increase in user conversion, user engagement, and in correlation, user retention.
Reflection
Identify. Challenge. Reframe. Repeat.
“Zooming” into our initial client meeting, I prepared stakeholder questions to understand and define project goals, expectations, scope, and constraints. “Zooming” out of our client meeting, I left with an endless list of goals to tackle. Feeling overwhelmed like our user, Tracy, I took to self-reflection and identified actionable steps for prioritizing tasks and narrowing the project scope. After conducting various user research methods, I was able to reframe my thoughts and hone focus on goals that met both user and business needs. Introspection and a constructive mindset throughout the project allowed me to manage my time, adjust with scope creep, and successfully meet client expectations.
What People Are Saying
“+1 on catering towards accessibility in the design system! The prototype is 👏, very in-depth and reflects a calm design for mental health.”
— Jeanie Son, UX Designer“I really loved the look and design of the prototype. I thought it was very sleek, and the color choice is calming.”
— Brendan Kim, UX Designer“Journaling can be very delicate for some people, and your solution makes it so easy to start writing down thoughts.”
— Anabelle Garnier, UX Designer