Ai Email Client

Generative Ai is taking the world by storm. LLM’s find a home very naturally around text dense workflow. Email is the obvious use case. This is already a product the likes of Google, Microsoft and Superhuman are looking at extensively. I thought it would be fun to play around with an email client straddling human centred design while enabling extensive Ai features.

This design asks questions about what type of user get what benefits, how many colour is too much colour, and the importance of good iconography.

Problem

This email client is the combination of Ai and human aesthetics. The user wants to feel cosy and comfy while the generative Ai presents the most important information to them. The UI should feel modern but familiar. Presenting the tried and true email client feature set in a way which enables Ai without forcing Ai. This email client is not for power users and is not making a play for use in the office. This is for checking e-vites, confirming accounts, finding bills and sending memes.

The end result should be an email client which is a pleasure to use day to day but not something you want to look at constantly. Most at home getting email updates about Animal Crossing happenings.

Product

Header Section

This section is where I’ve departed the most from traditional Email client designs. Moving the folders from a vertical list to a maximises their viability while reducing the total number shown at any time. This is done to enable AI to reorder or create new folders on the fly while keeping the styling consistent and not jarring the user. This is also true of the highlighted icon which can be changed independently to the text to enable even more optimisation from an AI.

I’ve also added the compose button, user information and a settings menu in this section. This allows the user to compartmentalise features and know where to expect things. Ultimately all interaction in this header section will dramatically change what content is shown bellow.

Email List

Here I’ve separated known data from generated data. In the top section of a email card there is the profile picture, date and subject. Beneath that is the generated summary of the email. This give more space to the generated email and enables the use to scan for importance.

I’ve also added abstract list controls here. Refresh, mark all as read, and a sub menu for sorting.

State Management

To keep the design relatively clean I opted to move email specific interaction to a hover state. This approach minimises cognitive load for users who have onboarding but will increase the learning curve. I have also designed states for flagged and selected. The selected state reducing the padding to create an extra indicator and visual connection to the content

Email Content Body

In the upper part of the email content I’ve add something like a bread crumbs but for email. The intention is to add functionality to the “From” attribute by also indicating at what part of the chain you are currently looking at. This also allows the user to navigate the conversation far more intuitively then a more traditional chat style layout. There is also the email specific functions here like forwarding, adding to calendar, remind me etc.

The content body is straightforward. No need to innovate on what already works. Specific this part of the site doesn’t provider any Ai features, so strong and straightforward is the way to go. Equally as mentioned in the problem statement this user base is not spending a very long time reading or writing emails. So pleasant processing is the key.

Here I’ve tried to focus on hierarchy separation and readability. At the bottom there is a response section which I have tried to keep as minimal as possible.

Styling

This project was designed entirely in Figma. I used Hero Icons as I am very familiar with them and I found a great Figma plugin.

The core of the design aesthetically was the left hand interaction cutout. This was inspired by a design I saw on behance. Unfortunately I can no longer find the original. I was drawn to the design because it looked like one of those designs which wasn’t really something anyone would develop. I started thinking through how I would approach developing it with Divs. I still don’t think I have a way to solve that problem. Ultimately this cut-out makes visual space for interactions and icons, give some visual interest and feel very modern without feeling intimidating.

From there the rest of the styling was intended to meet the brief of cosy and practical. Colour selection was done with the help of Real Time Colors. I think the colours are good but my use of them could be better. The UI with this much colour feels cluttered, even though there are not that many elements. This is something I’ll need to work on in future projects.

Process

This was a great case study and a fun playground. However, practically it was a chance to get to know components better in Figma. I had previously used them similar to how I might use components in a web framework like react. Here I tried to really push that utility. The process was a quick brainstorm, then I launched straight into the designing. I worked through wire frames, starting with blocks of colour for spacing and future separation and then fleshed those out to high fidelity.

Finally I wrapped up by creating the presentation screens. I think the next project I work though I would like to spend more time on the product and iterate the wireframes until the concept is really developed. In this project, by the end, I had realised some optimisations and improvements which could have been made however I was too deep and had cemented my self in.

Key Take Aways

• Components in Figma are powerful.
• Icons may just be the most important element of interaction design.
• High fidelity designs really prove the 80-20 rule.
• Colour, even in the absence of elements can feel overwhelming.
• When in doubt recheck your spacing.

Next Steps

I think this was a fun project but not worth keeping going with. If I was to continue I think there are plenty of UX improvements to be made and a pass for mobile would not go amiss.