Project Overview

The Goal

The goal was to provide the user with a casual, user-friendly email management experience to reduce time spent responding to emails in a UI that's less boring and more automated. Users should be able to quickly sort through their emails and respond to them more conversationally.

The Problems

The modern online entrepreneur needs an email client that is fast, efficient and a little less formal. Busy people would rather text than email and the user needs features that automate her emails to help her spend less time on email.

Research

User Research

In the past 6 years more and more teams are moving away from email and towards team communications platforms like slack and discord. Many freelancers are also making the move, but it’s hard to constantly invite new people to a slack channel for a limited engagement.

Market Research

Common applications users had for email included clients similar to Outlook and Gmail. They were also familiar with other tools in their business, such as Microsoft Office, iOS Calendar, Discord and Slack. I decided to incorporate similar UI and UX elements that users were accustomed to, while also implementing new solutions to address their frustrations and needs.

Inspiration

User Persona

User Flow

The goal of my user flow was to improve the speed it took to sift through emails and respond to them quicky. To assist the user in being able to find the email he or she is looking for, I added quick actions that could organize their email list further with each action. After the desired email is found, I provide ways to streamline the reply process with AI generated response options. This is all done while simulating a “wizard” like workflow.

Ideation, wireframing, prototyping

In my initial sketches I had the idea to make the app resemble a sorting table found in a mail room. This is also where the app's name, Mail Table, came from. I wanted users to feel like they were standing in front of a flat surface where they had all of their emails arranged in stacks which each stack placed in a row. This is how I organize my mail and postcards at home before filing them away. Each stack could represent an email chain. I then decided to have the emails in a similar aspect ratio as a postcard. When the user clicks on one of these 'postcards' they would expand on the screen.

Visual Design

UI Libraries

Design Mockups

Light and Dark Themes

Email Filtering/Sorting Demonstration

Replying to an Email Demonstration

Usability Testing

Zach

User was given the task to sort and filter the list of emails, using provided search criteria, until the number of emails was reduced to two. The user was able to use the AI generated filter buttons and sort drop-down menu with ease and without help. When trying to enter a custom search term, the user expected that a down-down list of suggested search terms was available. They envisioned the search bar having options similar to Google’s search bar.

Aaron

User was instructed to reply to an email chain using an AI generated response and to perform minor editing before sending. Besides taking a while to realize how to edit a message, the user completed the task without any issues.

Takeaways

This product was an enjoyable exploration on how an email client’s UI can evolve into something completely different from the familiar layouts we have become accustomed to. I decided to challenge myself by using Figma’s new ‘variables’ feature to quickly switch between both light and dark mode themes. There are more email filtering ideas that I would like to experiment with in the future to give users more options to organize their emails.