Redesigning Gmail

#Visual Design
#Design System

What's it about

UI Design

Prototyping

Visual Identity

Concept Project

INST 728T - Visual Design

Justin Miller ↗︎

Gmail: Context

Gmail is a free email service provider from Google. In many ways, it’s like any other email service: You can recieve and send emails, create address books, and perform other basic email tasks. It is, however, one of the most popular email services.

Problems

Gmail: Currently

Overcrowded

Gmail’s web interface is overcrowded with the mailbox and all the 100 additional options it provides.

Grouping

Gmail has a fantastic grouping functionality, but it’s confusing and tough to use, so it ends up as not being used to its full potential.

Threads

The whole concept of mails and replies is really old now. The threads are very glitchy, and mails and attachments often disappear.

Design System

As part of the deliverables, I built a modified design system for gmail. I started off with a bunch of colors, but after some experimentation, boiled down back to the google colors. The Google Colors have a slight matte, letting it look good and clean in both light and dark modes.
Color System

Iconography

I used the bulk icon set from the iconly library. The bulk set has a mesmerising transparent-opaque combination that really suits the clean and modern theme this is going for. This also set up the base for nice, consistent visuals.
Some icons from the iconly set.

The Interface

I designed some components and built a clean and minimalistic interface around it. My major goal at this phase was to make sure that every feature of Gmail was accounted for, and I wasn't leaving out any important parts.
Lists of emails - or messages
Different button components
Toast Explorations
I used these components to visualise important mail interactions. A major component would be the mail content itself, and my redesign wanted it to look as non-mail(y) as possible. My way out of this box was something we are used to a lot: Messages.
Mail/Message Display Explorations
Creating Threads
Finally, all of this would come together in a beautiful, visually appealing set of screens: The New Gmail. I explored pain points on both sides, Mails and Messages, and experimented a lot to add mail features to messages and bubbles, all of culminate in this gorgeous final product.
Quickly overview all your mails
Composing mails
Gmail's Menu Options cleaned up.
Clean Transactions View with a separate filter.
Finished Product
Product Features

Extras

A final part of my deliverables was to conceptualize a non-digital gmail: A snail mail version. Building on Google's design principles, I came up with a colorful solution to this prompt.
Gmail has a whole new meaning

Outcome

The new design was very much appreciated by people testing out the prototyping. A successful contributing factor to this was a strong design system at its base. Even though this was a system that everyone looks at almost daily, it still recieved strong positive feedback, considering huge visual redesigns like this tend to backlash.

If you liked this project (or didn't), reach out to me! I'd love to talk to you!
Made with ❤️  by Aritro. 2022.