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.

Affinity Diagramming and understanding Current 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.

Gmail color palette and type

Components

Figma Frames

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.

Bringing it all together

From these issues with my previous iterations, I thought of designs that could address the problem of large amounts of emails and folders:

1. Included folders at the top of the page. Once users click into a folder, subfolders will display at the top of the page.

2. Included a tab that showed recently accessed folders. Similar to Google Drive, users would be able to navigate directly to the folder from the tab.

3. Further explored what types of options should exist for filters when users are creating a new folder.

Demonstration of Final Solution

Development

Work in progress. Currently working on a fully-functioning prototype using Next.js from Figma designs. Website is deployed using Vercel.

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.