Published on | Prototyping: From UX to Front End — Medium Alden Tan Hello, G!

In my humble opinion, Gmail is one of the best products ever created by Google Developers. It has stuck through thick and thin together with me as that little hardy mailbox; always accommodating those unread messages while connecting me to the world.

However, most recently, certain issues became more tangible to me. At any rate, I proceeded to engage in an unsolicited redesign of Gmail to address the issues faced by a user like myself. As it is unsolicited, the product is thus largely shaped by my own iPhone user experience and perspectives (therefore, I acknowledge it may not be entirely representative of the spectrum of user experiences out there e.g. Android). However, I did my best to still ensure that I still thought through every single detail and that there was no compromise for overall quality. This unsolicited design project was completed within 3 weeks, and remains to be iterated upon for further improvement.

1. Context

An overview of Gmail’s menu

Gmail contains several functions which are available for the user to manipulate. Upon entry into the app, the user will first hit the landing page: Primary. Thereafter, different actions may be performed: Search, Star, Reply, Delete, Forward, Create New Email…and so on. What’s interesting then, is how Gmail has carved out arbitrary categories for the user — in particular, Social and Promotions. Different messages are thus classified and distributed to these segments.

With reference to the in-app menu, one is able to see more options that have been created by Gmail to possibly facilitate more efficient information architecting (e.g. Important, All emails).

However, on the contrary, I believe that this leads to:

User Pain Point 1: Gmail creates ‘unread spam’.

The creation of alternative categories for messages to be slotted into seeks to instil a sense of structure and organisation. However, it also increases cognitive effort for the user to process more information, located at different points within the product. More often than not, at least for myself, I tend to solely stick to the Primary feed — the place which is primarily important for me. I favour quick and intuitive retrieval of information all in one place, and therefore I do not habitually explore other places within Gmail to try to maximise my user experience. I just stick to the simple, functional stuff. Therefore, my Promotions feed looks something like this:

I feel sorry for the companies wasting their marketing dollars on me…

It is virtually untouched. Also, because I do not see this guilt-trippingly pile of unread mail on the Primary feed, there is a lack of top-of-mind awareness about the presence of this category within Gmail — and the fact that it actually exists (along with Social) gets ignored most of the time. As a result, this leads to a build-up of what I like to call, ‘unread spam’. The content sent by Owler, for instance, may very well be valuable — but because they remain unseen and unread, I gradually perceive anything unread as that of something as undesirable as spam. I wish they’d disappear, but they won’t; and day by day, they simply clog up my inbox. But I pretend to not see it. Ultimately, Gmail is supposed to help me organise my messages effectively, but this does not happen really well.

And speaking of organisation…

User Pain Point 2: Gmail’s information architecture is confusing and superfluous in certain instances — i.e. some features are redundant and adding to clutter!

Here’s the current information architecture for Gmail:

The fact of the matter is that there exists a whole bunch of functions and categories for the user that seeks to increase overall utility; but as with those which are shaded in light red, they present examples of what I perceive to be superfluous categories created by Gmail that serves to negate the entire user experience. Personally, it becomes slightly paradoxical as to how this element of utility may be marginally diminishing in nature; as the more features there are, the less useful they may actually be.

Thus, there are a few questions:

What is the difference between Important and Starred? Won’t I ‘star’ something which is fundamentally important to me…?
Is there much value in Gmail creating custom labels? From the point when I created my Gmail account, I have only created my own labels instead of using Gmail’s. And also, what’s Receipts? For me to save my online purchase receipts in there?
As mentioned in the first user pain point, does the creation of Social and Promotions (that remain chronically unread) take anything away from the whole user experience?

User Pain Point 3: Gmail contains both inconsistent and hidden affordances, which then creates user confusion.

First, let’s take a look at the second half of the menu as you continue scrolling down.

Labels

Then, I’d like to draw your attention to the option Create New. For a moment, I was left wondering if that actually meant creating a new email. And then, I thought to myself, isn’t that denoted by that icon with the pen in the red circle? Why have a duplicate function? After tapping on Create New, I realised that I was mistaken — it actually meant creating a new label. That moment of confusion as a user did stand out for me though. The question then becomes, why not make this affordance clearer, and more salient?

Second, let’s look at what a typical, individual email looks like in Gmail.

The mystery of the envelope and the three little dots

Allow me to draw your attention to two things, mainly located at the mid to top right hand section of the screen.

The three little dots

You’d realise that the three dots located on the nav bar on top will yield functions such as Move To, Change Labels, Mute and so on. And tapping on the visually identical three dots at the bottom gives you nothing like that. It actually allows you to choose to Reply, Forward, or Cancel.

Hmm.

2. The envelope

Notice that envelope icon at the top located between the trash bin icon and the three dots? In case you were wondering what that is, tapping on that actually brings you back to the main feed and renders a read mail to be unread . We can go into debating the value of this function but one thing is for sure: that affordance is clearly unclear.

Third, when you swipe left or right within an email panel, that is what you’ll see:

Wait what’s that green thing!

And immediately after:

Undo, undo!

And in case you were also wondering, Archive is a non-existent category in Gmail. You can’t find it in the menu, or anywhere else! So what happens if you accidentally archived an important message by swiping left or right and not being able to undo that action in time?

The opportunity for error management is low, and additional confusion is created as users will not actually know this will happen unless they were unfortunate enough to encounter such a situation, or they were happily experimenting with the interface.

Another example of a hidden affordance will involve the long press function. In fact, I didn’t know that a long press will yield this:

Wow…

It’s pretty cool, but it doesn’t really matter if I do not even know that it exists in the first place, right?

2. Opportunities

After identifying these core user pain points, I then moved on to flesh out certain design opportunities. I first did some rapid paper wireframing, externalised my thought process, and then transited to digital. On digital, I got my initial designs out, and then iterated on them to enhance the overall UI (according to Material Design guidelines) whilst consistently refining the entire UX flow.

The design opportunities vis-a-vis the various pain points stand as such:

a. ‘Unread Spam’

Gmail already has an All Emails function. Why not derive some inspiration from that?
So, display all the emails in a singular feed. Essentially, making All Emails the default landing page.
Remove arbitrary categories such as Social and Promotions.

b. Superfluous categories

Remove duplicate categories.
Construct a leaner, cleaner information architecture that reduces overall clutter.
Allow the user to essentially have the freedom to organise their own information, however they like — instead of assuming how they’d like it to be done.
Evaluate which are, basically, the most important categories to be preserved and made as visible as possible.

c. Hidden and vague affordances

Ensure that icon usage has a salient affordance. Where possible (considering visual variables), substitute icons with words as an effective explanation! Make sure that every option is defined in a way which is clearly, mutually exclusive.
Ascertain that every function is accounted for (case in point: Archive).
Minimise the presence of hidden, power actions that a user will tend to not be aware of.

3. Design

Thus, I worked, step by step, to redesign the product to solve the aforementioned pain points while leveraging on the available opportunities. An initial conceptualisation looked something like this:

A little wireframe

I wanted to provide a better structure to different information points, increase the visibility of important objects originally located within the hamburger menu that tends to conceal as opposed to reveal, and enhance bits and pieces of current affordances — to the end of creating a satisfactory user experience where key information can be neatly organised, whilst being retrieved and processed quickly.

Thus, I made some reconfigurations to the information architecture:

New proposed IA for Gmail

Aside from making the structure cleaner and leaner, by and large, I removed the pre-set categories for the user. As mentioned, I wanted to give the user absolute autonomy to personalise his or her entire Gmail experience. It’s like giving them an empty canvas to play with, and explore.

Also, the landing page defaults to a centralised feed: All Mail.

Proposed landing page

There are a few things going on here:

Bringing the Create New Email option up, to the top right hand corner to make it more visible and instantly accessible.
This thus replaces Search, which I wanted to make visible all the time. This reduces cognitive load that will otherwise have to be borne by the user to process information on a separate, exclusive search page.
Instead of a star, I used a bookmark icon. It is shaded grey, to indicate its inactive state (I tried to fill it with white with thin grey borders but to me, it was not that visually appealing). The bookmark icon, in my opinion, provides a stronger visual affordance to its ‘bookmark’ function — to indicate its availability for future reference if needed.
Consequently, the Bookmarks function was brought out as a visible tab at the bottom. It is thus extremely easy to go back to important stuff in the near future. High accessibility is the key here.
My Labels was also brought out as a third tab to the right. Again, a user is able to easily return to content that he or she will have categorised for his or her own usage.
The date located on the top right of each email panel is has the year attached to it as well — to reduce confusion and allows for better tracking. Currently, the year is absent.
In terms of colour, I was being slightly more experimental: I did not want something that was too loud or jarring, but something more soothing and calm. I want the user to get the feeling of “yes, I got everything under control — nice and neat”. I then opted for a shade of #326394, and the highlighted tab with a colour of #F2D99C.

The menu then looks like this:

Gmail Menu

8. The important objects such as Bookmarks and My Labels have been transferred out, making the menu a whole lot cleaner. Manage accounts is then placed under Settings (currently, icons for both functions are exactly the same!). Everything else from Sent Mail to Spam are retained.

9. I included an Archive option!!! Woohoo!!!

10. I also added an Edit Profile button for improved and more convenient personalisation (currently, one is actually unable to make any profile changes per se — but one can only toggle account settings related to notifications for example)

Now, on to the email page:

Enlarged Email Pages for better visual accessibilityCreate New Mail

11. I removed the icons and instead, subsumed them under Options. This presents an extremely clear affordance of what to expect — simply, the various options in store for the user. Tapping on it will yield a dropdown list of relevant options e.g. Reply, Forward etc.

12. The bookmark option remains as the sole icon to be manipulated (to the right of the email title) — a consistent affordance along with how it is like in the main All Mail feed.

13. Bookmarks and My Labels remain visible, and accessible at all times.

Yes, and when tapping on those tabs:

Bookmark Feed

14. Once bookmarked, the emails will automatically populate the Bookmark list.

15. Under My Labels, anything and everything that the user has created may be found there.

Individual label feed

16. Tapping on any label panel will bring a dropdown list into view. This list, essentially, are the emails categorised under that label. The presentation is consistent with what can be seen in All Mail, for example. The idea is for the label panel (e.g. “Basketball”) to remain fixed at the top, as the user scrolls. Tapping on it once again withdraws the list, and goes back to the original view in My Labels.

Creation of new label

17. To create a label, one simply taps on Create new label. The user is then prompted to type the label name within the same field, on the same page. Again, I do not wish to bring the user to a separate page, so as to obviate any additional cognitive load. The user can tap on the cross symbol should he or she change his or her mind, and tap on the tick symbol after entering to confirm.

4. Future Iterations

As mentioned, the unsolicited nature of this redesign cannot be said to be truly representative of every user’s experience out there. I am aware of how different the Gmail interface on Android is, from the iPhone. The functionalities vary as well — arguably being slightly more intuitive on Android although certain issues similar to what has been stated here do prevail as well. Therefore, this redesign is very much centered on the pain points of an iPhone user like myself.

Of course, design is always iterative in itself, and there’re always things to improve upon. Some future iterations to be considered include:

The dilemma of power actions- even though they are hidden, they do offer an element of design efficiency. While the current swipe-to-archive flow should definitely be removed, implementing the Hotmail power action model may be considered. I suppose many users will be able to identify with this:

Upon swiping left, these options appear — and stay. Swiping right will give you an option to mark the mail as read or unread. The system does not make a decision for you. In case it was accidental, you can just swipe in the opposite direction and they disappear. A case may be made for implementing this on Gmail given that the current user mental model may be more aligned with this, and it provides for better error management.

2. Include intuitive icons in email page. My proposed redesign involves subsuming a majority of the functions in Options within an individual email page, while only the bookmark icon remains outside. I can probably consider putting the reply icon, for example, out there as well — so it does not necessitate in any extra tap to reply to an email. Of course, the assumption here is that all users will intuitively understand the signified meaning of that icon. More research will need to be conducted to this end.

5. Conclusion

And….yes! That’s about it. If you’ve stuck around till the end, simply leave a comment “I read, and I mean it. Even the long-winded stuff”. But in all seriousness, this was a pretty fulfilling process — and it allowed me to be as creative as possible while always putting myself in the shoes of a new user who has zilch context of the product at hand. The iterative process was challenging but enjoyable, as with the constant self-questioning of my own beliefs and assumptions.

I’d love to get feedback on this. Feel free to leave any comments below!

And if you liked what you read, simply tap that little green heart at the bottom! I look forward to bringing valuable content to you always 🙂

Gmail: An Unsolicited Redesign (#1) was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

Gmail: An Unsolicited Redesign (#1)

Top Stories