Kelsey
UX/UI Designer
Made with

Improving Gmail Plugin Usability

Heuristic Evaluation to Create a More User Friendly & Accessible Platform

Problem

Tasked with reviewing the Lavender Email Assistant platform, as there were several inconsistencies with user flows, experience, and design.

Process

  1. General high level usability review of the Lavender platform.

  2. Led a heuristic evaluation, summarized key findings.

  3. Consolidated current style guide, based on accessibility review.

  4. Designed preliminary mock visuals to accompany suggestions, focusing the user on the primary action they should take

  5. Presented findings to client

Role & Tools

UX Designer (total team of 3)

Figma

Improving Gmail Plugin Usability
Heuristic Evaluation - How To Improve Usability
Navigation

Issues

1) Sidebar and Popup Email seem to have similar information.

2) The process of navigating can be somewhat confusing. I have to go all the way through the sidebar to get to the email pop up, and every time has an email instruction that pops up as well.

3) On the Email Pop Up, you have to hover over it to get the pop up, but if you click it brings you to the side bar. If you click analyze more, it then brings you to the side bar.

Reasons To Fix

Minimalist Design
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

Recommendations

Shorten Number of Steps
Too many steps can require extra effort from users. It’s important to get rid of all extra steps in user flow. When designing user flows remove or optimize steps that can overwhelm users.

Automate
Could make it automatically pop up without having to go through the steps every time.

With the current design of Lavender, you have to start at the side bar, go through the entire process, get email directions, and then are finally able to see the email pop up. This occurs each time, taking a lot of time.

With the current design of Lavender, you have to start at the side bar, go through the entire process, get email directions, and then are finally able to see the email pop up. This occurs each time, taking a lot of time.

Icons

Issues

1) The symbol choices seem unintuitive. For example, it looks like the icon for the email pop up is a beaker symbol.

2) You have to hover on the icon to get the email pop up, but if you click it, it directs you to the side bar.

3) Icons not labeled, so user may not know what they are for.

4) What is the reason for the red dot on the email pop up icon?

5) The mobile version aspect, once you click into it, looks more cartoonish rather than what the real email would look like.

Reasons To Fix

Match Between System and Real World
The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms.

This is your heading

Add Labels & Change Symbols
Make the icon for the email pop up something that would be more intuitive.

Add labels so you know what each icon represents.

Icons are not labeled, the mobile view looks a bit cartoonish, and the beaker icon confusingly represents the email pop up.

Icons are not labeled, the mobile view looks a bit cartoonish, and the beaker icon confusingly represents the email pop up.

Colors

Issues

1) Many colors so not sure exactly where the call to action is (main thing a user should look at).

2) #000000 (black) is being used on white background.

3) If app is called Lavender, there are many shades of purple.

4) Gradient on “Analyze Further” can be distracting.

5) Most colors don’t pass contrast test for accessibility.

7) Why is C red color if the label is Consider Adjustment? Color doesn’t match tone of words.

Reasons To Fix

Accessibility
Accessibility allows users of all abilities to understand, use and enjoy the web.

200 million visually impaired people suffer from decreased sensitivity to certain colors and contrast.

Overuse of Color
Your users won’t know where to look, when there’s many different colors.

Black on White
White has 100% color brightness, and black has 0% color brightness. Such high contrast leads to a disparity in the light levels users see when reading text.

This is your heading

Reduce Amount of Colors Follow the 60-30-10 rule. Something more neutral makes up 60%, a complementary color makes up 30%, and a third accent color is 10% of the palette.

Call To Action Color
Make your specific action you want users to take stand out with color.

Dark Grey
Use dark grey for contrast instead of black, so users eyes aren’t strained.

Accessibility Check
To meet W3C’s minimum AA rating, your background-to-text contrast ratio should be at least 4.5:1.When designing, check the contrast ratio of your color combinations.

The current color selection fails AA and AAA standards.

The current color selection fails AA and AAA standards.

Instruction Email

Issues

1) Time consuming to read.

2) The email references see two buttons on bottom right, but there are 4 icons.


3) Not easily accessible (comes up as a new email draft each time).

4) Unclear how Lavender understands the context you are writing towards (could be speaking to a professional, who is actually a close friend).

Reasons To Fix

Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

Recognition Rather Than Recall
Allow directions to be more easily accessible when writing an email.

Flexibility and Efficiency of use
Cater towards inexperienced and experienced users. Allow users to tailor frequent actions.

Understanding Audience & Tone

Understand the appropriate way a user should be engaging with its audience.

Recommendations

Merge Email with Email Pop Up
Make directions more accessible with an information button.

Reduce Length of Email
Let user know what is going on in a reasonable amount of time - user might not read the whole thing.

Cater to Experienced Users
Directions shouldn’t come up every time, especially if a user has been using the pop up for a while

Allow Users to Identify Intended Tone
When the email pop up gives suggestions, how does it know the audience that I am writing for? What if I am writing to a friend, co worker, or boss? The tone would vary.

Improving Gmail Plugin Usability

Very lengthy, not easily accessible, and comes up every time before you can start using Lavender.

Call To Action -
Interaction Design

Issues

1) Some of the boxes are outlined while others are filled in. “Too Casual” and “Analyze Further” are both clickable, while one is an outlined box and the other is filled in. The other filled in boxes are not clickable, however.

2) The buttons for the email score are all different heights.

3) Some words are all caps while others are sentence case.

4) When the email does have an “A” score, the exclamation mark could be confusing that there’s still something to fix, as the boxes are also still yellow.


5) The X button doesn’t seem needed, as if you just move your mouse away, the email pop up goes away.

6) Writing time and reading time are distracting and have minimal padding around them.

7) There is no easy way to understand what each button means (ie. what is hard words?)

8) No further explanation of how to to fix something (how to make less casual, less lengthy, more formal etc).

9) Fonts hard to read on pop up and are distracted by drop shadows.

Reasons To Fix

Consistency
Users should not have to wonder whether different words, situations, or actions mean the same thing.


Aesthetic and Minimalist Design Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

Help Users Recover From Errors
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

Recognition Rather Than Recall
The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

Aesthetic and Minimalist Design
Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

Recommendations

Make Consistent
If keeping the buttons, make sure the ones that are clickable look the same. Keep colors consistent for each category.

Reduce Use of All Caps
All Caps can be difficult to read and scan for accessibility.


Remove X and Writing & Reading Time
Declutter and allow users to focus on the main actions - improving their emails.

Make Directions Easily Available
Move directions from instruction email to make it easier able to recall.

Make Fixable
When the errors are a problem, showcase some suggestions of a how a user could fix that.

Decrease Drop Shadows
Remove distractions and increase visibility.

Change Fonts
Change to font that is easier on the eyes to read, like Roboto.

The many colors, heights of buttons, unclear instructions, and differences with interactivity lead to a poor user experience.

The many colors, heights of buttons, unclear instructions, and differences with interactivity lead to a poor user experience.

Previous & Updated Style Guide

The New Style Guide reduced the amount of colors used throughout the Lavender platform, enhanced accessibility and readability, and associated the colors to create specific calls to action.

The font was switched from Karla and Montserrat to Roboto. The amount of colors dropped from 22 to 7.

Mock Visuals
I developed wireframes to implement the findings from the heuristic evaluation. The second wireframe increased accessibility by moving the email directions straight onto the platform.

I developed wireframes to implement the findings from the heuristic evaluation. The second wireframe increased accessibility by moving the email directions straight onto the platform.

Improving Gmail Plugin Usability

Multiple Iterations

After wireframes, I developed multiple mock visuals of what improvements could be made.

I ended up with four main iterations, with one of them showcasing what the information button. The graphics I incorporated were from Lavender's current website.

I reduced the amount of colors, while still showcasing the degree of importance for each suggested change.

The left bullet points have quick fixes of how to improve the email and what is good-to-go.

For a snapshot summary, I moved the email score to the right, and made "Analyze More" stand out to be able to gain more in depth knowledge.

See below for final iterations. If I was able to advance the project, I would then hand off these visuals to a UI designer.

Final Thoughts

After presenting to the client, they decided to keep the design in-house, but they did take into consideration some of our findings.

While working with a client in a team setting, I learned the importance of user flows, accessibility, and ensuring that your users would have all the necessary information at their fingertips.

Lavender Email Assistant is made to help users; by adjusting these changes and adhering to the recommendations, users will have a positive user experience, and be able to write clear and efficient emails in a timely manner.