Project Overview
LifeLens is an intelligent journaling application I developed for my Human-Computer Interaction (HCI) course at Thompson Rivers University in April 2025. It's designed to transform journaling from a simple text-entry task into an insightful, interactive experience. The goal was to create an AI-powered companion that helps users capture thoughts, track emotions, visualize progress, and gain deeper self-awareness effortlessly.
Watch a walkthrough of the LifeLens application below:
Core Objectives
- Create an intuitive and engaging user interface (HCI focus).
- Integrate AI for enhanced functionality (formatting, analysis, input).
- Provide meaningful data visualizations for self-reflection.
- Streamline the journaling process with features like quick entry and multiple input methods.
Dashboard & Insights
The central hub of LifeLens is the personalized dashboard. It welcomes the user, offers a one-click "Quick Journal Entry" option, and provides an immediate overview of their journaling journey.
Key Dashboard Components
- Heatmap Visualizations: Track daily Mood, Energy, Productivity, and Creativity levels throughout the year. Color intensity indicates the level, allowing users to spot trends and patterns easily.
- Recent Journal Entries: Quick access to the latest thoughts and reflections.
- Badges & Achievements: Gamified motivation showcasing earned milestones like "Consistency Champion" or "Gratitude Guru."
- Favorites: Quick links to specially marked entries.
This immediate visual feedback encourages consistent use and helps users connect daily inputs to longer-term trends.
In-Depth Insights Page
For a more comprehensive analysis, the dedicated "Insights" page displays the full yearly heatmaps for all tracked metrics (Mood, Energy, Productivity, Creativity). This allows for a deeper dive into personal patterns and how different aspects of well-being correlate over time.
Data Visualization Focus
A key HCI consideration was making complex temporal data easy to understand. The heatmap was chosen for its ability to represent density and trends across two axes (day and month) effectively.
The Journaling Experience
LifeLens aims to make writing, viewing, and managing journal entries seamless and powerful.
Organized Entry Management
The "Journals" page presents a clean, chronological list of all entries. Users can easily view entry details, associated metrics (like Happiness, Creativity captured at the time of writing), and edit past entries.
- View full entry content and metrics.
- Edit functionality for corrections or additions (with fine-tuning planned).
- Ability to mark entries as favorites.
Distraction-Free Writing
Creating a new entry opens a clean canvas, minimizing distractions. Users can set a title, date, and mood rating easily.
Markdown Editor
The editor supports Markdown for text formatting (bold, italics, lists, headings, etc.). Users can switch between "Write" and "Preview" modes instantly to see their formatted text. A handy guide explains the basic Markdown syntax.
AI-Powered Features
The integration of AI elevates LifeLens beyond a standard journaling app, offering unique capabilities to enhance the user experience.
AI Formatting Tool
With a single click, users can leverage an AI tool to automatically format and structure their plain text entry using Markdown. This adds headings, bullet points, and emphasis based on the content's structure, saving time and improving readability.
Image-to-Text (OCR)
Bridge the gap between physical and digital journaling. Users can point their camera at a handwritten journal page, and LifeLens uses Optical Character Recognition (OCR) to extract the text and insert it directly into a digital entry.
Voice Input (Speech-to-Text)
For users who prefer speaking their thoughts, LifeLens includes a voice input feature that transcribes spoken words into text directly within the journal entry editor.
AI Analysis & Suggestions
After saving an entry, an AI model analyzes the text content. It provides scores across various metrics (e.g., Happiness, Energy, Mindfulness, Stress, Productivity) based on sentiment and keywords. It also offers personalized textual feedback and suggestions for reflection. If the user didn't provide a title, the AI can generate a relevant one.
Tech Stack & Design Approach
LifeLens was built with a focus on modern web technologies and user-centered design principles learned in my HCI course.
Core Technologies
- Frontend: React, TypeScript (Assumed based on portfolio structure)
- Styling: Tailwind CSS, CSS Modules, custom CSS, and more.
- Data Visualization:Chart.js, or custom SVG implementation for heatmaps
- AI/ML: Llama models locally for vision and llm capabilities, used LLM basedAI agents for the analysis and formatting
Design Philosophy
- User-Centric: Focused on creating an intuitive, non-intimidating journaling experience.
- Clarity: Ensuring visualizations and information are easily understandable.
- Efficiency: Streamlining common tasks like entry creation and data input.
- Feedback: Providing immediate visual feedback for actions (e.g., saving, AI processing).
Challenges & Learnings
Developing LifeLens involved several technical and design challenges, leading to valuable learning experiences.
Key Challenges
- AI Integration: Seamlessly integrating multiple AI features (OCR, STT, Analysis, Formatting) requires careful API design or model management, ensuring responsiveness without compromising user experience. Handling potential inaccuracies from these models was also a consideration.
- Data Visualization Design: Creating effective heatmaps that are informative, aesthetically pleasing, and performant across a year's worth of data required careful design and implementation choices.
- HCI Principles in Practice: Translating theoretical HCI concepts (like usability, feedback, cognitive load) into concrete UI/UX decisions for features like the editor, dashboard layout, and AI interactions.
- State Management: Managing application state effectively in React, especially with asynchronous AI operations and dynamic visualizations.
Primary Learnings
- Deepened understanding of applying HCI principles to build intuitive software.
- Practical experience in integrating various AI/ML capabilities into a user-facing application.
- Techniques for effective data visualization for temporal user data.
- Reinforced skills in frontend development with React and TypeScript (or relevant stack).
- Importance of iterative design and handling edge cases, particularly with AI-driven features.