Metlife

Upwise App

Metlife

Upwise App

Metlife

Upwise App

The MetLife Upwise App project aimed to create an engaging, user-friendly mobile app to help consumers manage their finances positively. My responsibilities included developing a comprehensive design system, conducting user research, and crafting intuitive UI/UX designs.

Roles

Product Design

Product Design

User Research

The MetLife Upwise App project aimed to create an engaging, user-friendly mobile app to help consumers manage their finances positively. My responsibilities included developing a comprehensive design system, conducting user research, and crafting intuitive UI/UX designs.

Roles

Product Design

Product Design

User Research

Web Development

The MetLife Upwise App project aimed to create an engaging, user-friendly mobile app to help consumers manage their finances positively. My responsibilities included developing a comprehensive design system, conducting user research, and crafting intuitive UI/UX designs.

Roles

Product Design

Product Design

User Research

Emotional & Functional Color Strategies for Upwise

The MetLife Upwise App employs a detailed color token system to ensure visual consistency, accessibility, and to convey users' emotional states regarding their financial status.


Highlight colors are the brand colors used primarily throughout the user interface, while specific shades represent various emotions such as anxiety, confidence, and contentment. Additionally, category colors help streamline navigation and enhance user understanding. Each color choice meets WCAG AA standards for readability, ensuring an accessible and cohesive user experience across the app. This structured approach supports intuitive design and effective communication of financial emotions.

01
Color TOkens
01
Color TOkens
01
Color TOkens
02
Typography
02
Typography
02
Typography

Noto is a global font collection for writing in all modern and ancient languages. Noto Sans is an unmodulated (“sans serif”) design for texts in the Latin, Cyrillic and Greek scripts, which is also suitable as the complementary choice for other script-specific Noto Sans fonts. It has italic styles, multiple weights and widths, and 3,741 glyphs. via Google Fonts

03
Pictographs
03
Pictographs
03
Pictographs
04
Emotional Status Illustrations
04
Emotional Status Illustrations
04
Emotional Status Illustrations

Creating Harmony through Collaboration

Working on the MetLife Upwise App, I had the pleasure of collaborating closely with the UX research team and developers. Together, we designed a comprehensive library of reusable components. These modular and adaptable components made development smoother and ensured consistent design, providing a cohesive user experience throughout the app. This teamwork and structured approach allowed us to create a visually harmonious and user-friendly application, blending efficiency with intuitive design.

05
Components
05
Components
05
Components
06
Money Screens
06
Money Screens
06
Money Screens

The Money section of the Upwise App provides users with a comprehensive overview of their financial accounts, including checking, credit cards, cash, insurance, investments, loans, and more. I contributed by developing a design system to ensure consistency, designing an intuitive interface for easy navigation, and conducting user research to align the section with user needs. This collaborative effort resulted in a user-friendly and visually appealing Money section that helps users manage their finances effectively.

07
Credit Score Screens
07
Credit Score Screens
07
Credit Score Screens

The Credit Score feature for the Upwise app empowers users with tools to track and improve their financial wellness. Designed with clarity and accessibility in mind, these screens allow users to view their credit scores in real-time, receive personalized financial tips, and track progress through intuitive visualizations.

Next Project

Copay Family App

Next Project

Copay Family App

Next Project

Copay Family App

Home

About

Work

Merch

Comming soon

Contact Us

©Spectre XD 2024

Home

About

Work

Merch

Comming soon

Contact Us

©Spectre XD 2024

Home

About

Work

Merch

Comming soon

Contact Us

©Spectre XD 2024