Quick Reply

Front


  • UI Design
  • Prototyping
  • User Testing
  • 2018

Introduction

Front for iOS is the ideal companion to triage and reply to emails when you are on the go. With more and more Front users relying on it, we decided to revisit the composing experience. For this project, we focused on context and speed when replying to conversations.
Users were not able to get the full context of a conversation while replying to a message, increasing the reply time and lowering the quality of the replies.

Replying with context

Replying to a message can be straightforward, but sometimes it requires more effort.
That’s why having access to the full history of a conversation can be helpful in a lot of situations. In Front, not only can you be looking for information in past messages, but also from activities and comments added by your teammates. That’s why it became clear to us that the user should be able to compose and browse a conversation at the same time.

Quick reply composer

A flexible experience

In addition to our main goal, we took this opportunity to also simplify and enhance the composing experience. By removing advanced features and focusing on the core experience, we were able to provide the right amount of flexibility at the right time. In order to build this new experience we focused on a multi states composer. Instead of having a single fullscreen experience for the composer, we decided to split it into 3 different states:
• Collapsed: The content of the draft is not visible. This mode is used when the composing experience is paused and the content of the conversation is the main element of focus.
• Adaptive: The composer will be responsive, based on the content of the draft. This allows the user to focus both on the content of the conversation and the composition of the reply.
• Expanded: The composer is shown on top of the conversation. It can be used for longer drafts.

Composer states concept
Different states of the composer

Multi channels

While a lot of conversations in the app are emails, Front supports a variety of different channel types. Facebook Messenger, Twitter, SMS, and others are available.
This requires the composer to support additinal features; providing an optimized experience for each channel. The Twitter composer provides a username autocomplete as well as a character count. The SMS composes displays a character counter. The SMS composer is displaying a SMS counter.

Twitter composer
SMS composer

Other explorations

Some early explorations focused on a mini toolbar that could be used to provide more options to the composer. The initial mockups focused only on replying with text, and we also explored a small system with attachment management.
We ended up revisiting the signature UI and switched from a floating pill to a new action available in the mini toolbar.
We also designed an attachment viewer with the ability to see file name, file sizes and image previews.

Image attachments

Outcome

After the release of this new composer, we measured the adoption of the new composer. 75% of our users rely on the new quick reply mode while 25% prefer to use the fullscreen mode.
This project was an opportunity for the design team to focus on providing a more adaptive experience in the app; allowing the user to choose the UI that matches their need, while offering more context enabling efficiency.