My Mood Tracker App Redesign

Client: Aspyre Solutions

Role: UI/UX Designer

Tools: Adobe Illustrator, Adobe Photoshop





Introduction

Aspyre Solutions is a software developer focused on health apps. Their primary product, "My Mood Tracker," helps users monitor their emotional well-being and medication intake to manage mood changes.

The Challenge

The initial version of the app was outdated in terms of look and feel, necessitating a comprehensive redesign to improve user engagement and usability.



Original UI Design

Process

1. Visual Exploration

Created multiple visual styles for client selection, incorporating emojis instead of plain buttons to enhance user interaction.



First Round of Visual Explorations



Ensured the new style worked with various color backgrounds, each linked to a different emotion being tracked.



Second Round of Visual Explorations



2. Refining UI Layout

Experimented with different positions of UI elements to optimize usability and enhance the user experience.



Variations for the Main Screen



3. Applying Look & Feel

Applied the chosen visual style consistently across all app screens.



Pill Selection Screens (Sad Theme)



Exercise, Mood Chart, and Notes Screens (Sad Theme)



More, Select Emotion, and History Screens (Sad Theme)



Main and Pill Selection Screens (Happy Theme)



4. Icon Creation

Designed a diverse set of icons in Adobe Illustrator to represent all moods and medications, ensuring each icon was available in three sizes.



Icons in Large Size

5. Collateral Assets

Updated the splash screen, banners, icons, and other assets to match the new design.



Splashscreen



App Icon

6. Background Maker

Devised a method to create multiple backgrounds using a few PNGs with translucent patterns overlaid on flat colors, optimizing graphics space. Provided developers with instructions on how to implement this solution.

Instructions for Developers

7. Exporting Pieces

Sliced and exported all elements as JPGs, PNGs, and ICOs using Adobe Photoshop, ensuring compatibility and ease of integration.

Results

The redesign was successfully completed, and all assets were delivered to the developer. Version 2 of My Mood Tracker was released promptly, receiving excellent customer reviews for its improved design and functionality.