back
Written by Arthur Jensen — March 14th 2023

Redesigning Outlook Email

Redesigning email clients like Outlook to improve user interactions and customization through innovative micro-interactions.
Outlook email logo and branding colors.
Outlook email logo and branding colors.
Taking a Look at Existing Email Platforms

Let's take a look at existing email platforms to see their strengths and weaknesses, as well as identifying possible opportunities and threats. Conducting a SWOT analysis in the design process helps designers gain insights into strengths, weaknesses, opportunities, and threats, guiding informed decision-making and strategic planning for effective product development.

SWOT analysis visual displaying the strengths, weaknesses, opportunities, and threats of leading email platforms in the market.
SWOT analysis visual displaying the strengths, weaknesses, opportunities, and threats of leading email platforms.
What Improvements can be Made?

After reviewing the SWOT Analysis, I noticed that there were several issues relating to filtering, labeling and organizing emails. Users of these platforms value efficiency and clear organization. Well-organized email accounts enable users to quickly find and respond to important messages to enhance productivity and prevent delays in responding to critical emails.

Insights

Users want to streamline their ability to filter through non-urgent emails
Users value a way to filter newsletters and spam notifications from important emails from clients and coworkers.

Users value the ability to visually customize labels and indicators to organize their email inboxes based their needs
Users value a way to view their emails that are coming from various domains. This could include a customizable color coding system.

Users value quick and effective communication when using emails to collaborate with co-workersUsers want to improve their communication when collaborating on a team.

Labeling Emails and Email Folders in Outlook

Many users receive a large volume of emails on a daily basis, including work-related messages, personal communications, newsletters, promotional emails, and more. Managing such a high volume of emails can quickly lead to inbox overload, making it difficult to stay organized. There needs to be away to easily manage all of these messages.

Allow users to add a color-coded icon to name folders

I noticed in Notion that users have the option to add a color-coded icon to their folders. I wanted to incorporate this feature within Outlook.

Notion interface example using icons and color for organization.
Notion interface example using icons and color for organization.
Allow users to add a color highlight to existing and incoming emails

I noticed in Notion that users have the option to add a color-coded icon to their folders. I wanted to incorporate this feature within Outlook.

Apple Mail's email highlight feature emphasizing important messages.
Apple Mail's email highlight feature emphasizing important messages.
Using Icons and color to indicate time-zone and region

For team members who work across a cross-functional team across various regions and time zones. I would like to incorporate a way to add time zone labels and sun and mood icons to indicate what time zone the email receiver lives in.

Apple Mail's email highlight feature emphasizing important messages.
Apple Mail's email highlight feature emphasizing important messages.
Visualizing these Microinteractions

In order to visualize the user pausing the recording, I sketched out the action of someone using their finger to hold down the button to record, and then releasing the record button to pause. This interaction could potentially give more control to the user while they are recording.

Flowchart: Color-coding Icons

For team members who work across a cross-functional team across various regions and time zones. I would like to incorporate a way to add time zone labels and sun and mood icons to indicate what time zone the email receiver lives in.

A flowchart depicting the interaction of users adding a color-coded icon to distinguish folders in Outlook email.
A flowchart depicting the interaction of users adding a color-coded icon to distinguish folders in Outlook email.
Flowchart: Highlighting Emails

For team members who work across a cross-functional team across various regions and time zones. I would like to incorporate a way to add time zone labels and sun and mood icons to indicate what time zone the email receiver lives in.

A flowchart depicting the interaction of users adding a color highlight to an email line in Outlook email.
A flowchart depicting the interaction of users adding a color highlight to an email line in Outlook email.
Flowchart: Highlighting Emails

For team members who work across a cross-functional team across various regions and time zones. I would like to incorporate a way to add time zone labels and sun and mood icons to indicate what time zone the email receiver lives in.

A flowchart depicting the interaction of users adding a color highlight to an email line in Outlook email.
A flowchart depicting the interaction of users adding a color highlight to an email line in Outlook email.
Creating Wireframes Based on the Sketches

After sketching, I moved onto creating Low-Fidelity wireframes to build out the design of the Voice Memos microinteraction. I wanted to maintain a similar layout to the original design by having the red record button stay at the center of the interface. For my redesign, I created a new feedback design with the red circles pulsating out of the record button to indicate that recording is in progress. I also added a "Pause" and "Play" icon in the center of the red record circle to further convey what mode the user was in.

Within the redesign, I also incorporated a blue stop button to end the voice recording, which lives on the bottom right corner of the interface. After the user is done recording, the new recording would pop up on the intial "start recording" screen.

High-fidelity wireframe of Outlook email redesign.
High-fidelity wireframe of Outlook email redesign.
Pitching the New Features

After discussing and sharing my prototype in class, I realized there were a couple issues with my design based on the feedback given. For example, if the user was recording a long message, they would have to keep holding their finger on the record button. Let's say a user likes to typically talk with their hands. They wouldn't be able to do so because both hands were occupied the user needed to hold down the record button with one of their hands. I understood that there needs to be a way for users to record their message on one hand while the other hand needed to be free to gesture movements. I also received feedback on making the stop button larger and easily identifiable to the user.

This is some text inside of a div block.