Email Client Redesign: UM Mail

Thu Mar 14, 2024

Brief

In this 3-week project we will redesign the interactions users have with desktop email clients - your outlooks, apple mails, and windows mails. Things we all use daily and expect to work seamlessly, but that have the power to disappoint and make a mountain out of a mole. We will focus our attention on:

the ability or micro interactions to make those digital chores easier, simpler, more enjoyable - and less noticeable.
the power of the well-designed user interface to move the task to the periphery, and to bring forward the delight of being able to communicate instantly across the globe.

View Prototype

Phase 1 - Research & Exploration

Process

Find 3-4 of the most popular existing email clients and review them for Strengths, Weaknesses, Threats and Opportunities - see instructions page. You can review and compare them as a batch creating a single SWOT diagram.

Identify 1 task that you will focus on in this project - it can be organization, composition, or contact and relationship management, or any other tasks of your choice. The opportunities and the threats section from the SWOT diagram should help.
Research and review precedents: applications or products tackling a similar issue. It can be another email client, but certainly doesn't have to be. Look at the tools in the adjacent areas to see if you could identify good solutions or problems to avoid.
Find 3-5 relevant examples, more if need be, and analyze their approach to the similar UI challenges. Focus on what you could borrow and adopt, and what you should watch out for.

SWOT Analysis Diagram

Selected Email Clients: Windows Mail, Apple Mail, Gmail, Mozilla Thunderbird

Problem: Solving for In-line Replies

After reviewing the current email clients and their features, I decided to focus on exploring a more intuitive and streamlined process of in-line replies or quoted replies within emails. For my research, I analyzed four examples of other apps that approached a similar user interface challenge.

Email Clients: Gmail & MailBird | Add-On Extension: Reformat Gmail Inline Replies

Gmail & Mailbird are email clients that offer in-line replies with a quote feature nested inside text formatting. However, formatting it can be difficult and users have to cut and copy the selected content. Sometimes the quote feature is difficult to find, nested within several menus. Visually, it can look overwhelming like Mailbird in the second screen where there’s too many quotes and indents. The best visual option I’ve found is using add-on extensions such as “Reformat Gmail Inline Replies” on Chrome but the extension didn’t work in my Gmail and extensions won’t apply to OS mail apps like Windows Mail.

Messaging Apps: Messenger & iMessage

Messenger and iMessage are messaging apps with in-line replies that allow you to reply to specific messages in a string of texts by using the “reply” button or holding text down on mobile to specify what you're responding to. This example is the most intuitive and convenient method of the examples, especially as selecting the specific message automatically copies it over when you reply to it. For this project, a similar feature to enable users to highlight specific parts of the received email that will be automatically pasted in your reply could be a user-friendly feature.

Online Forums: Reddit & Keyboardmaestros

In online forums like Reddit and Keyboardmaestros, block quoting is an important function of communication that allows users to quote sections of another user's response in a reply. When communicating online in a forum, people may write out long responses and have several points where block quoting can can help break down responses into blocks in one reply.

To use this function, users can click the quote button or add a “>” in front of their paragraph to create a quote block. This method of block quoting can be an easy implementation for email, with quotes being a feature already in some mail clients though the functionality could be more streamlined and visually clear like the forum quote blocks.

Web App: Google Docs

Web applications like Google Docs include a "comments" feature that allows users to highlight sections of text/imagery in a document & add call-out comments. Users can review comments on the side bar with the specific sections highlighted next to them. With limited space in email, it might be better to condense highlighted comments / replies to the main screen. This feature is ideal for collaboration among several people though on email, the use case is more likely for 1-on-1 communication.

Micro Interactions Flowchart Diagrams

I focused on three micro interactions that make up the core of in-line replies in an email user interface. I detailed the user flow of each micro interaction in a flowchart diagram.

—