Role: Project Lead, IxD Designer, UI Designer (Android)
A native version of Messages was built hastily by a small team of developers to replace a sluggish web view. After the native Messages was shipped to customers, Design was asked to come in and redesign the UI.
We then met to document the problems we would set out to solve.
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d543b290-c486-4506-a6b1-6ddb2774e042/untitled
The Android app
The main Messages screen was difficult to parse
It's hard to find the conversation you’re looking for, and hard to tell the type of conversation you were looking at. Our messaging client integrates with the rest of our church management platform in novel ways, causing three conversation types: Groups, Topics, and Individuals.
1 Teams are now distinguished from Individuals by a collection of small avatars.
2 Groups are now distinguished from teams by a larger group avatar beside a collection of avatars.
3 We now distinguish between the statuses of unread and @mention.
We needed color to mean something.
In a previous project (for the web app), it was decided that color was our primary tool to help users distinguish between different threads in a conversation. We needed to support that decision with more considered use of color throughout the rest of the app's UI.
A We brought the Faithlife brand into the bottom tab strip in a way that aligned with our visual brand which allowed us to leave the top nav a flexible white.
B With a white top nav and neutral colored camera icon in the compose bar, there was no longer unsightly tension between the thread colors and the rest of the UI.
C We decided to carry the colored edge highlight though to the individual thread screens. Paired with a color coded "THREAD"pill in the top nav, this was a more intuitive way to communicate to the user "you are inside a thread". This is especially important when users follow a link from outside the app and are dropped into a thread.
D By eliminating thread-specific chat bubble colors and instead making them all green all the time, we were able to consistently implement "green bubble = me". This is a huge help in navigating busy conversations.
There were small inconsistencies everywhere
The approach here was obvious—create visually dialed components that can be implemented across the native portions of the app that also compliment the styling and interaction patterns of the web views.