Stephnie Michelle Fernando

UI/UX Mood Tracker App

UI/UX – Mood Tracker App (Figma Design)

Project Overview:
The UI/UX design project for the Mood Tracker App aims to create an engaging and user-friendly interface to help users track and manage their emotional well-being. The design focuses on delivering an intuitive user experience with a clean and modern aesthetic. It is intended to help users monitor their mood over time, offering insights into emotional patterns and providing tools for emotional self-care. This project includes both mobile app UI/UX designs and the core features that ensure a smooth and effective user experience.

Features

Branding Design:

  • Logo Design: A clean and simple logo symbolizing emotional well-being and mindfulness, aligning with the app’s purpose of tracking moods.

  • Color Palette: Calming, harmonious color tones that promote a sense of peace and relaxation, ensuring users feel at ease during app use.

  • Typography: Modern, legible fonts with a friendly, approachable style to enhance readability and user comfort.

Mobile App Design:

  • Mobile-First Approach: Designed primarily for mobile screens, ensuring ease of navigation and a visually appealing, functional layout for smaller devices.

  • User Flow: Clear, logical user flow for mood tracking, profile creation, daily input, and insights, minimizing complexity.

  • Interactive Prototypes: Fully interactive prototypes created in Figma to simulate user interactions and demonstrate how users can log, review, and reflect on their emotions.

UI Components:

  • Buttons, Forms, and Icons: Custom-designed UI elements such as colorful mood selection buttons, simple form fields for notes, and intuitive icons to enhance interaction without creating clutter.

  • Component Library: A reusable library of UI components for efficient updates and consistency across screens and versions of the app.

User Experience (UX) Design:

  • Wireframes: Low-fidelity wireframes outlining key screens and interactions, focusing on layout and structure before detailed visual design.

  • High-Fidelity Mockups: Pixel-perfect high-fidelity mockups to communicate the final design, ensuring clarity and visual accuracy for development.

  • User Research: In-depth research into emotional tracking habits and user preferences, aligning design choices with their emotional well-being goals.

  • Usability Testing: Iterative testing and feedback collection through tools like UsabilityHub, ensuring ease of use and refinement for optimal UX.

Insights and Tracking:

  • Mood Logs: An interactive interface to help users log their daily emotions, tracking specific moods and the reasons behind them.

  • Emotional Insights: The app visualizes emotional patterns and provides actionable insights, helping users understand their mood swings and triggers.

  • Personalized Feedback: Users receive personalized advice and encouragement based on mood tracking to promote well-being and mindfulness.

Tools Used:

  • Figma: For UI/UX design and prototyping.

  • Adobe Illustrator (optional): For custom logo and branding elements.

  • Adobe Photoshop (optional): For image manipulation and photo editing.

  • UsabilityHub: For gathering user feedback and conducting usability testing.

 

Figmal Link