User experience design
Gmail_HomepageSMALL.png

Gmail Website Redesign

Gmail_Hero.png
 

GMAIL WEBSITE REDESIGN


Overview

TASK: SET INBOX TO DISPLAY UNREAD MESSAGES FIRST

I completed a qualitative research assessment of Gmail to evaluate the specific task of setting an inbox to display unread messages first. Through researching the target market, user flow and task analysis, I user tested the current design and determined pain points and areas of improvement. With this information, I was able to redesign a new set of wireframes to address the solution.

Role

Researcher

Product Designer

UX Designer    

Timeline

10 weeks

Deliverable

Medium-fidelity wireframes


The Problem

Gmail is a distinguished, established and trusted e-mail platform popular among users across the board. As more and more people are converting to it for both personal and business use, Gmail needs to have a design that is easily understood and user-friendly for everyone. As Google, its parent company, is known for its simplistic and minimalistic brand design, one would think that Gmail would adapt and integrate the same framework.

Even some of the simplest tasks seem to have a complicated and confusing approach. One such problem tasks is that users are struggling to find how to sort their inbox by unread messages first.

The Process

Beginning with the research phase, my aim was to gain a better understanding of Gmail’s target audience and analyze the pain points of the current design. I performed contextual inquiries and surveys with target users to define the problem and identify areas of improvement. Through this research, ideation, and testing, I completed a redesign of the website to provide users with the most efficient and easy way to accomplish the task at-hand.

SWOT Analysis

I started with an overall SWOT analysis to assess the bigger picture and identify all of Gmail’s strengths, weaknesses, opportunities, and threats.

 
Gmail_SWOT_SMALL.png
 

Personas

I created personas to empathize with Gmail users and better understand audience demographics, behaviors, needs, and goals.

Gmail_PersonasSMALL.png

Flow & Task Analysis

Once I was able to empathize with Gmail’s target users, I completed a task analysis of the user flow to understand the experience they were having during the task. Navigating through each sub-task, I evaluated the outcome of each and identified the pain points. The major problem areas included redundant and unnecessary clicks, buried content, and confusing headings (outlined in the analysis below).

 
Gmail_TaskAnalysis.png
 

Current Design

Currently, Gmail has the inbox sorting options buried deep in the Settings section. This requires users to go through multiple layers and clicks just to set their inbox to display unread messages first.

Gmail_CurrentDesignSMALL.png

Contextual Inquiry & Survey

A contextual inquiry and follow-up survey were conducted with four target users to gain insight into Gmail’s site design, specifically pertaining to the task of setting the inbox to display unread messages first.

ObJectives/Goals

  • Understand Gmail users and their site expectations

  • Determine how to organize site content and layout

  • Gain new insights in redesigning Gmail — pertaining to the task at-hand

Pain points

  • Participants could not initially find the Inbox Settings within the Settings page

  • Participants did not register what “General Settings” were (versus other Settings categories) — information hierarchy is confusing

  • Flow was not intuitive — participants did not realize they had to go to Settings to change inbox display

Suggestions

  • Pull out and reveal the most important and necessary information users need

  • Implement a better and more defined information hierarchy — clearly define each task/sub-category

  • Increase page legibility by creating better spacing on the page

Sketches

To brainstorm some possible solutions to the pain points, I started sketching some alternate wireframes. Through this process I explored moving the most frequented and important information to the home page, making the copy/headers more descriptive, and decluttering each page.

 
Gmail_SketchesSMALL.png
 

Solution

Through the brainstorming phase, I settled on the solution of increasing discoverability by adding a drop-down menu to the top of the homepage.

Revised User Flow

With this new solution, the user flow is extremely simplified and all of the previous unnecessary steps and clicks have been removed. The flow is more direct, succinct and easy to navigate.

 
Gmail_NewUserFlow.png
 

Sitemap

In the updated layout, the sorting options are moved to the homepage, with a dropdown menu in-line with the other inbox commands at the top of the page. Bringing this task to the forefront of the homepage makes it much easier/faster for users to find and complete, while minimizing the amount of clicks and pages they have to go through.

 
Gmail_Sitemap.png
 

Redesign Wireframes

Gmail_Wireframes2SMALL.png

Heuristic Evaluation

Using the principles of Nielsen’s Heuristics, I evaluated the violations and severity of the current design and recommended my solutions to each problem.

Heuristic Violation 1: Recognition rather than recall

Severity: 3

Minimize The user’s memory load by keeping organization categories visible

When users sort their inbox to display unread messages first, Gmail gets rid of their original categories and merges all emails into one giant inbox. So rather than distinguishing between categories such as “primary,” “social,” and “promotions,” users are now only presented with “unread” and “read.” This causes the user to have to remember the original categorizations from one interaction to the next, and extract information buried deep in their inbox.

I recommend keeping the original categories present and visible at the top when users sort by unread messages first. This way, each category has the unread messages at the top, but the inbox stays organized and information is easily retrievable.

Gmail_Heuristics3SMALL.png

Heuristics Violation 2: Match between system & real world

Severity: 2

Simplify the task by making the language/terminology more relatable and direct

When conducting my contextual inquiries, one of the problems that kept arising was that the terminology was confusing and didn’t make sense in relation to the task of setting your inbox to display unread messages first. Participants were not connecting “Inbox type” to how their inbox was sorted.

It’s important for an application or website to speak the language of its user base – so I recommend changing the settings option/command from “Inbox type” to “Sort.” This simplifies the task and makes the language more direct.

Gmail_Heuristics1.png

Heuristics Violation 3: Aesthetic & minimalist design

Severity: 2

Minimize redundancy and reveal important information upfront in a clutter-free design

Gmail currently has a few violations regarding aesthetic and minimalist design. First, the site has redundant information displayed on the page (see first “current” screenshot). When you click the settings icon, you then have to click “Settings” again from the dropdown menu. This creates unnecessary clicks for the user and displays too much information that isn’t useful. Second, there are too many settings subheads/category options hidden within the Settings page (see second “current” screenshot), making it difficult for users to find information relating to the task and creates confusion with so many unnecessary elements on the page.

With my recommended solution, the task to sort your inbox is displayed on the homepage with a minimal dropdown menu, revealing only the basic and necessary information. This creates a clutter-free experience for the user.

Gmail_Heuristics2SMALL.png