Gmail

Adding a feature to Gmail

Design email messages easily
even if you don’t know design

Background

Many Gmail messages that are
purportedly designed actually
look quite awful.

The person wanted to design a message to upgrade it from the standard; he played
with the font size/color/font or tried to design the text in a program he’s familiar with
such as PowerPoint, Illustrator and the like. But because he had to start from scratch,
and is not a designer, the result looks substandard.

The Problem

The design functions for Gmail messages
are minimal and insufficient:

In order to design an email message, people need to use external programs.
But people who are not trained in design, and are unfamiliar with the programs, cannot do that either.
They have no options for more advanced email designs that are easy to use, and they have to
manage with the few design functions that Gmail offers.

The existing options

Objective

My goal is to add a feature
to design Gmail messages
in a simple and easy-to-understand way:

The feature will make it possible even for people who don’t know design
to design their email messages with ready templates, stickers and advanced effects.
This way, people will be able to easily design an email message
that will look good, even though they are unfamiliar with design.

Why Is This Significant and Important

We often encounter a need to send email messages that are a bit above the standard

Large companies, for example, send message to all their employees on their birthday.
The message is designed using the existing features - they use an image from the bank of images, write the
message, enlarge the font, add color and that’s it.
There is no other option for designing such a message.
We encounter this need when we want to send something that’s a bit above the standard,
but too small to warrant using the services of a designer.
This feature will offer an option to design messages above the standard, easily, within Gmail.

In order to better understand the process the user goes through, I sketched a user journey:

Commercial Objective

The commercial objective
is to improve the user experience in Gmail

The feature is relevant to many Gmail users who, until now, tried to manage on their own when
designing emails. As soon as there will be an option to design messages within Gmail,
the experience will be enhanced.

Research

I set out to study the sore points of my users,
and what their habits are:

I studied 80 people, most of them women, in the 20-35 age bracket.

How have people managed until now?

0 %

Gave up and sent an email with no design at all

0 %

Designed in another program and imported the design to Gmail

0 %

Tried to create designs with Gmail’s existing tools

People feel more comfortable designing in Gmail itself, and not with external tools that they are not familiar with.
This is despite the fact that the options in Gmail are limited compared to special apps for this purpose.

Which external programs do they use

0 %

Designated apps

0 %

Power Point

0 %

Illustrator

Conclusion

Most people do not use designated apps because they are not familiar enough with them,
and becoming familiar with a program takes time that they do not have.

I don’t know how to use common functions in design programs,
so I avoid designing in designated apps.
Most times they are a riddle to me,
and I have no idea how to use them.

It’s hard for me that after lots of effort
trying to design a message in Gmail,
the message still looks awful.

Design Emails Easily

The feature is in the email -
so there’s no need to switch to external, unfamiliar programs.

Every function has a name and explanation,
so even someone who’s never used a design program

Every function has a name and explanation,
so even someone who’s never used a design program
can easily use it.

There are predesigned templates ,
colors and fonts -
so that you can easily design a message
that looks like a million dollars.

A New Icon in the Message Window

In the Compose Message window –
there will be a new icon that leads to advanced design.

If the user has already written text into the body of the message,
and clicks ‘advanced design’ only after that,
a popup will appear and ask:
Do you want to use the existing text in the advanced design window?

Main Screen

Clicking on the advanced design icon will bring us to
the main screen.

The main screen will offer template options – already open –
to make it easier for the user to understand what needs to be done.
There is also a basic template on the page –
the user can use that or insert a ready template.

Template in Editing/View Mode

After selecting a specific template –
the default mode is ‘edit’ mode
so that the user realizes that the template can be edited.
Everything that needs editing is highlighted in a frame.
Of course, the user can always switch to view mode to
see how the final design looks.

Editing Specific Text

As soon as the user clicks on one of the frames to edit
a specific element – the frame will turn yellow.
A toolbar will also pop up on the side –
where the user can edit the specific text he has selected.

In addition –
Two options will appear above the selected text:
Delete and Copy.

Headings and Stickers

There is an option to choose designed headings
and to change the text.
The user can also add stickers,
selecting them with filters for subject and color.

Saving the Design

After the user clicks save –
The design will appear as an image in the email window.
The user just needs to fill in the recipient and subject lines –
and click Send…

Option to save the design
as an image on a personal computer

Specific color palette, limited

The color palette does not contain the full spectrum of colors. Rather,
it offers a specific scale of colors that suit that particular template.
This way, even people who don’t know design, and want to change the colors,
can do it without ruining the design.

Limited selection of font
per template

This way, even people who don’t know how to match fonts –
can change a font, and the design will still look good.

Option to switch the entire color
palette for this design -
to a preset color pallette

This way, the user is free to choose their favorite color, while maintaining
a good design.