My Mood Tracker App Redesign

Jorge Tello Aliaga

0

Visual Designer

UX Designer

UI Designer

Adobe Creative Cloud

Adobe Illustrator

Adobe Photoshop

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
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
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
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
Variations for the Main Screen

3. Applying Look & Feel

Applied the chosen visual style consistently across all app screens.
Pill Selection Screens (Sad Theme)
Pill Selection Screens (Sad Theme)
Exercise, Mood Chart, and Notes Screens (Sad Theme)
Exercise, Mood Chart, and Notes Screens (Sad Theme)
More, Select Emotion, and History Screens (Sad Theme)
More, Select Emotion, and History Screens (Sad Theme)
Main and Pill Selection Screens (Happy 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
Icons in Large Size

5. Collateral Assets

Updated the splash screen, banners, icons, and other assets to match the new design.
Splashscreen
Splashscreen
App Icon
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
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.
Like this project
0

Jorge redesigned the My Mood Tracker health app for its version 2 launch, enhancing the user interface with modern visual styles and intuitive layouts.

Likes

0

Views

2

Clients

Aspyre Solutions

Tags

Visual Designer

UX Designer

UI Designer

Adobe Creative Cloud

Adobe Illustrator

Adobe Photoshop

Jorge Tello Aliaga

Senior UI/UX Visual Designer | Figma Expert | Ex-Apple,Adobe

Creating the Design System for the Cisco U.  Learning Platform
Creating the Design System for the Cisco U. Learning Platform
Creating Adobe's Creative Suite
Creating Adobe's Creative Suite
Modernizing ON24's SaaS Analytics Interface
Modernizing ON24's SaaS Analytics Interface
Branding and Marketing Graphics for Cisco
Branding and Marketing Graphics for Cisco