UX/UI Design Case Study

OVERVIEW

Chatterbox is a native mobile messenger app designed to house all your messages and contacts. The easy-to-use interface makes messaging your contacts stress-free.

Purpose + Context

Chatterbox was a short project from the UI Immersion course from Careerfoundry. The project focused on creating mockups of a messenger app that reused common components. I also created custom animations of the screens in Flinto.

MY APPROACH

Color

Typography

Icongraphy

Elements

Features

The chat screen displays all of your chats. You can hit the add button to draft a new message, hit the trash icon to delete a message, and hit the search icon to search keywords found in messages. Users are able to tell if contacts are offline or online and identify any unread messages.

The conversation screen displays the contact and messages between that contact.

The contacts screen shows all contacts organized alphabetically. Users can search contacts with the search icon. Users can edit and delete contacts.

This custom animation demonstrates how a user would navigate through the app using the navigation bar and how they would recieve messgaes.