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). Some of the key insights were:

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.

Filtering and grouping buttons and their modals

Prototyping

I wanted to incorporate a new folder feature that integrated well with current designs in Gmail that users have become accustomed to. I first started with lo-fi prototypes, getting a look and feel for the different concepts.

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.

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

From past iterations, I noticed the need to simplify the process to creating the filter. I expanded the Folder Creation Popup, limiting the process to two main interactions: Typing and Selecting.

Folder Creation Components

Typing

Select

Dragging Interaction

Dashboard Mockup

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.