Gmail Filtering System Redesign
Role //
Product Designer, Developer
Duration //
September 2023
Tools //
Figma, Next.js
This project is a redesign of the Gmail filtering system. By incorporating folders into Gmail, this project looks at how to optimize user flow accessing important mail by grouping emails that are related using folders and subfolders.
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.
Understanding Current Label and Filter Systems
Journey Mapping
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
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
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