The process for designing the bubbles.

1. The bubbles are neater than the original emails.

We find emails often contain quotes (which are from the past emails) and signatures. They are distracting when users read the core email contents. 

That’s why that we hide quotes and signatures in the bubble view. That can help users focus on the core contents.


2. The bubble is with better readability and contains consistent tapping area which is the access to the email details screen.

In our real case, most of the users don't have avatars. So we have to set default avatar based on their initial letters. In that condition, we have to show names for them, or the users won't be able to recognize who sent these emails. Comparing the senders' name, time is less important. That's why I place time at a less noticeable area.

Our first proposal is based on iOS Messages and FB Messenger. But for our case, the readability is affected. Because users usually have to check the senders' names, as the senders usually just have the default avatars.

How do I improve the readability for the bubbles.

For 1 on 1 conversation, the 1st version is fine. But it doesn't work well for group conversations.

The final version also provides a consistent and big enough space to tap for checking email details screen.