Problem Space

Gmail has built-in features that allow for more advanced organization of emails—users can create labels that group emails together, or create filters that filter through emails—that are not widely implemented by users. Most of the time, users utilize the search bar or scroll through their inbox to find their mail. In this project, I look at how to bring the two functionalities together, optimizing the user flow to locate important emails.

Research

Identifying pain points

To understand the pain points of the current Gmail labeling and filtering system, I conducted interviews with people around me (college students who understand technology). After affinity diagramming some of their concerns with the current system, I was able to conclude that :

1. The current label and filter systems are hard to locate for novice Gmail users. Most interviewees did not use the features often.

2. There are Gmail designs that users enjoy to use: Starring Emails, Select Button.

This is good, because all the functionalities are there. However, there could be a better user flow to access the functionalities.

Current UI Systems

Understanding Current Label and Filter Systems

Journey Mapping

From the pain points identified by Affinity Mapping, I created a Journey Map to see how I could design the folder feature to help aid the user throughout the process of locating emails.

I pinpointed that users feel the most frustrated when they have to select many options to customize and locate their emails. As a result, when users are selecting options to create folders, it is especially important for the menu to be easy and intuitive to understand.

Journey Mapping

Prototyping

From the Affinity Diagramming, I wanted to incorporate a new folder feature that integrated well with current designs in Gmail that users have become accustomed to.

Components

Iteration 01 : Existing Features

For the first iteration, the prototype explores how to combine designs of existing features from Gmail with the new designs of a folder system. The button that sorted through read/unread, starred/unstarred emails, and the ability to color labels were integrated as a part of my design.

Demonstration of Iteration 01

Iteration 02 : New Features

In the second iteration, I tested a more compact version of the first iteration—rather than having the features to choose folder color be in a seperate place, I combined all selections in one window.

Demonstration of Iteration 02

Final Solution

Final Solution: Existing Features from other applications

After testing the first and second iteration prototypes, I concluded that:

1. The prototypes were not well-designed for cases of large amounts of folders.

2. In the case that there are a lot of folders, the path to accessing a specific email becomes tedious.

In the final design, I looked at designs of pre-existing applications such as Folders in Google Drive, Finder on Mac, and Folders on Windows to see how I could create a folder system that can handle huge amounts of data.

Demonstration of Final Solution

Dragging Interaction

Development

Live Website Github

Next.js Development

Final Thoughts

From this project, I learned how to design for recognition, and create design solutions that users are familiar with. This idea was able to aid my design decisions, especially because I was introducing a new feature that might come with a learning curve.

Thoughout this process of testing and iterating for this project, I also thought it was interesting that I was able to understand the reasoning behind the UI that exists for current systems that deal with storing and sorting through large amounts of information.

Before and After