Gmail Settings
While there have been major design improvements to Gmail’s core interface, the settings page has gone untouched for over a decade. Executives at Google aren’t happy with the outdated design and would like a new proposal and fresh ideas.
The settings page doesn’t have the same feel as Gmail’s core interface. It has a static feel and nothing stands out in terms of hierarchy. The navigation displays across the top and there are a couple of form fields below it.
Biggest Problem
Brand consistency
The biggest problem I experienced was there wasn’t that Google brand consistency and visual language we find appealing in their other G Suite tools. While customers were happy with Gmail’s main interface, the experience wasn’t as engaging the deeper you dove in.
Project Goals
- Update the UI to Google’s Material Design language.
- Initiate a consistent brand experience and introduce personality when possible.
- New ideas
Design Principles
Before starting anything, I wanted to set up a couple of principles I was going to be basing my design decisions from.
Organized: I would revisit the information architecture and improve the overall hierarchy.
Scannable: At a glance, customers should know where they are and what actions they can take.
Efficient: No guessing games. Did the customer complete their task? Were the settings saved?
Meaningful Chunks
As humans, we find it easier to comprehend information when it’s broken down into meaningful chunks.
In the general tab, the content below it can be organized into their own sections to improve the scannability. So here we can take sections like Language and Phone Numbers and place them in a subsection named Language + Region. Settings that have to do with composing an email can have their own section and settings that affect what you see or don’t see in the interface can have their own section.
Form logic
I set up a couple of ground rules for guidance.
Checkboxes: When you can select more than one option from a list.
Radio Buttons: Keeping the radio buttons but only using them when you can only select a single option.
Switch: Introduction of the Switch and use it for when you can only toggle things ON or Off.
Rules in play
An example of when applying these rules.
Fields that once looked like the example on the left would be simplified into the example on the right. There was redundant copy that was removed and still communicated the same message.
Phasing
The first step was to apply Google’s design language and layout recommendations.
Phase 1: I decided to switch the navigation from across the top to the left side. This way it would be familiar to how you navigate in Gmail’s main interface. I organized the content into those meaningful chunks and applied contrast in between to help with the scannability. The layout reminded me of Facebook’s and I felt I could tone down the contrast a bit.
Phase 2: Reduced the contrast to apply more emphasis on the actions but I felt I toned it down too much, where the elements looked like they were floating and not contained.
Phase 3: Finally settling on this and finding that happy medium.
Final Demo
No more guess work
A snackbar would appear to communicate that there was a change made to the settings.
View Preview
I noticed in the current settings page that when making changes that impacted the interface visually, you only would see and experience the change after saving and exiting the settings page. I felt we could show a preview of what to expect before saving those changes.
New/Fresh Ideas
The settings page could get a bit overwhelming with the amount of content and options. So I introduced a search field to make it easier to narrowing down your search. I felt this was also a great opportunity to highlight Google’s personality by adding their voice search feature. Voice commands were something that I hadn’t seen in any of their other G Suite tools.
The current page also displayed all of the settings to feature that were even turned off. This took up a lot of real-estate and felt we could display the settings once the feature was turned on.
