DESIGN FOR

REAL
PEOPLE

2021 · Framer.com
Table of contents
5 The 10 Principles of Great Product Design
7
Keep the UI design simple

8
Predict and preempt

9
Put the user in the driving seat

9
Be methodical and consistent

11
Avoid unnecessary complexity in the UI design

12
Provide clear signposts

13
Be tolerant of mistakes

13
Give relevant feedback

15
Prioritize functions

16
Design for accessibility

17 The golden rules of UI design

18 Why You Should Build Features Users Don't Ask For

19
You’ll never know what users want just by asking

20
Silent shadowing

21
Friday presentations: How we use Pitch at Pitch

24 Identifying unmet needs is a growth opportunity

25 What We Learned Onboarding 2 Million Home

and Apartment Owners on Booking.com

27
Our biggest successes

31 Our biggest failures

35 What Makes Design Special at Grammarly?

37
Putting design at the center from day one

39
The problems we’re solving at Grammarly

41
Empathetic team culture

43 Growing our design organization

45 Recommended Resources
45 Frameworks

45 Resources

46 Books

47 Tools
 Intro
Great product design
takes a wealth of
empathy, curiosity, and
genuine enthusiasm for
putting your customers
first.

In this ebook, you’ll discover our

basic principles to guide you in your
journey to design real products for
real people. Further, you’ll find
stories from the teams at
Grammarly, Pitch, and Booking.com,
where you’ll see some of these
principles in action and learn how
world-class design teams bring their
best ideas to life.

4
 The 10
Principles of
Great Product
Design
Ashanya Indralingam

Framer

Framer is a collaborative design tool that helps teams create fully interactive,
high-fidelity designs that feel just like real products. We think the ability to quickly
express complex creative ideas is a super power, and we’re on a mission to make
production-ready design accessible for everyone.

People often say that That’s because most users only

notice the design of an app or
great product design is
software when something goes
invisible. wrong. Effective design means

01
removing as many obstacles,
bottlenecks, stumbling blocks,

and potential points of confusion as

possible from the user experience.

5
 Story 01 · The 10 Principles
of Great Product Design

Your primary goal as a designer?

Help your audience achieve their goals seamlessly.

Every design project is different, of Commit these rules to memory and

course. What works for a mobile app, you’ll be able to design thoughtfully

for instance, won’t always work for for your audience—whoever (and

desktop software or a website. But wherever) they are.

learn the principles of great design

and you’ll begin to see them appear

everywhere—when you open your

phone to check the weather, while

looking at vacation spots for a trip

abroad, and even in the grocery

store checkout line.

6
 Story 01 · The 10 Principles
of Great Product Design

1. Keep the UI
design simple
We wouldn’t be designers if we didn’t agree that the
design process can be genuinely fun. But remember:
your own satisfaction as the designer is always lower
priority than usability.

Self-indulgent or overly formal Ask yourself:

design creates unnecessary noise,
What purpose does this part of
distracting from those elements that
the UI serve?
are truly relevant to the user.
Who benefits most from this
design choice?
Aim for simplicity by pruning your
design back to the bare essentials. If Is this helping my users achieve
part of your UI satisfies your own their primary goals?
creative fancy—but the design serves
no practical purpose for the
user—take a screenshot for posterity
and then get rid of it.

Go to page 20 to learn how the Pitch team uses Silent Shadowing to set ego aside
and prioritize only the most important design features.

7
 Story 01 · The 10 Principles
of Great Product Design

2. Predict
and preempt
You can’t help someone Understanding common patterns
and mistakes also gives you the
achieve their goals
opportunity to preempt less
unless you understand desirable behavior. Tweak earlier
where they’re coming parts of the design journey to set
from. users on the right path forward.

Take time to get to know the real Ask yourself:

people using your product, and
How do I know this design choice
you’ll better predict how you can
is relevant?
help them use it more effectively.
What assumptions am I making
about what someone already
Anticipate what tools, information,
knows?
and resources they’ll need in their
journey to help them feel most How can I steer them in the
successful. Timing is key here, too. direction of the next best step?
It’s your job to share exactly the right
resource at exactly the right time, so
be sure you’re watching and listening
as real users interact with your UI to
find opportunities to improve.

8
 Story 01 · The 10 Principles
of Great Product Design

3. Put the user in

the driving seat
Users should feel fully in A great design experience gives users
a clear road ahead with guardrails
control of their
on either side. It offers guidance
experience with your without taking control of the steering
product. This means wheel. Be wary of design choices
making the UI fade into that force users into actions or
the background and decisions that may cause friction
(and frustration), as that may hurt
allowing them to
retention in the long run.
navigate freely.

Check out page 38 to learn how the Grammarly team uses blank states

to empower first-time users to write freely.

4. Be methodical
and consistent
Consistency often lends itself to clarity, so don’t try to
reinvent the wheel just to make something novel and
fun. Stick to a clear design system and consistent
patterns so users can expect how they should interact.

9
 Story 01 · The 10 Principles
of Great Product Design
We’re talking about consistency
within industry standards, too.
Remember that people use
technology every day, and
they’ll expect your design to
work similarly to the hundreds of
other apps, websites, or
technology they interact with in
their day-to-day, too.
Understand that any
time you trade a familiar
UI pattern for something
novel or unfamiliar, you
may be causing
unintended friction.
This rule applies to everything from
patterns to terminology. If in doubt,
go with what’s most widely
understood.
10
When you do have to introduce
something new, be sure to
differentiate it clearly so users aren’t
left second guessing the next step.
On page 39, you’ll see how the
Grammarly team found a novel
way to use emojis to reflect tone
in their users’ writing.
Deliberate inconsistency can help
you highlight something new. Use it
sparingly to guide users without
appearing sloppy.
Ask yourself:
Is there a familiar UI pattern I can
use here that people might know
from other products?
Are there other places in my
design that might employ a
similar pattern?
How can I make this more
predictable?
 Story 01 · The 10 Principles
of Great Product Design

5. Avoid
unnecessary
complexity in
the UI design

The Booking.com team did this

Aim to be a
beautifully with their 3-step
well-organized minimalist onboarding flow. (See page 27)

in your work—stick to the

minimum number of Organize screens and content

steps and screens according to a clear and logical

possible at all times, and taxonomy. Overlays like bottom

sheets and modal windows can work

organize content
wonderfully to condense data and
pragmatically from the
reduce your app’s footprint.
start.

Nobody expects to find the shower in Don’t send users through a tedious

the kitchen, the TV in the bathroom, obstacle course of clicks when just

or the closet in the yard. Similarly, one or two actions will do. One of the

subtasks belong on the pages where most practical UI design principles,

they’re most relevant… not buried the Three Click Rule, maintains that

somewhere unrelated. You can a user should be able to achieve any

improve usability by grouping tasks action or access any information

and subtasks together both with no more than three clicks from

thematically and practically. anywhere within the app.

11
 Story 01 · The 10 Principles
of Great Product Design

Above all, never ask users to re-enter Ask yourself:

info that they’ve already shared. If
Is this the simplest way to guide
you’ve ever had the experience of
someone through completing this
having to re-enter all of your
action?
information in a form due to one
incorrect input, you’ll likely Would a user naturally need this
understand how quickly that mistake information in this part of the
can cause massive frustration. Don’t user flow?
let users drop off due to thoughtless
How can I make this form easier
form design.
to use when an error occurs?

6. Provide clear
signposts
Aim for making your interface fun to
explore with intuitive layout and
clear labeling. Remember that
first-time users know a lot less about
your product than you do, so make
sure that page architecture is simple,
logical, and clearly signposted.
Users should never be in any doubt
as to where they are within the
software, nor as to next steps for
getting anywhere else they want to
go. Offer visual cues for navigating
back out of user flows or finding key
touch points to keep them from
getting lost.

The Pitch team uses Friday presentations (page 21) as a way to encourage both
new and existing employees to use Pitch and find opportunities to build a more
intuitive user flow.

12
 Story 01 · The 10 Principles
of Great Product Design

7. Be tolerant
of mistakes
Mistakes happen. And Make it easy to backtrack whenever
necessary by implementing a fast
users change their
and forgiving undo/redo function.
minds. In fact, if they are Not only does this help avoid the
new to the app, they frustration of lost data and wasted
may wander, explore, or time—it also gives users the
accidentally find confidence to explore your app and
make changes without fear of
themselves in places
consequences.
they didn’t intend to go.

8. Give relevant
feedback
Real people need encouragement—your users included!

Acknowledge when actions have been received with success and loading states.
Let them know that things are moving as they should. Big, important, and rare
actions call for big and important feedback. Smaller and more frequent actions
merit smaller forms of acknowledgment.

13
 Story 01 · The 10 Principles
of Great Product Design

Don’t leave people When writing error messages,

guessing about status
information.
Make sure relevant status info is up
front, clear, and accessible so any
uncertainty is met with quick
reassurance that the user is on the
right path.
remember that user error isn’t always
responsible and that system
malfunctions could be the culprit. It’s
often easier to keep users engaged
with an “oops” or “sorry” when an
error occurs rather than blaming the
user for a misstep.
Ask yourself:

How can I help new users

When errors do occur overcome this error?
(and they will), embrace
How am I setting expectations
clear, kind around loading times for busy
communication. and impatient users?

How does a person know when

When errors do occur (and they will), they’ve completed this important
embrace clear, kind communication. step?
Lose the jargon and the cryptic
numerical error messages. They can
only lead to confusion and
transparency, and your users will be
much happier when they understand
what’s gone wrong.

14
 Story 01 · The 10 Principles
of Great Product Design

9. Prioritize
functions
Failure to create a clear hierarchy is one of the most
common obstacles stopping people from designing
a truly minimal and streamlined UI.

As we’ve stressed, every item on
every screen should be absolutely
essential to the user experience,
stripping out superfluous information
early and often. Yet even among
these essential items, some will
inevitably be even higher priority
than others.
Even if you’re sure you need users to
be able to do X, Y, and Z all from the
same screen, you can give some
elements more weight than others.
Reflect priority with a clear visual
hierarchy, using element size, copy,
and whitespace to your advantage.

15
 Story 01 · The 10 Principles
of Great Product Design

10. Design for

accessibility
Don’t assume that all While realistically you can’t account
for every possible variation in social
users think or work
and cultural convention, assuming
like you and your that the way you do things is the
community. This goes only logical way of doing them will
for everything from lead to lost users. For example, in
technical knowledge many parts of the world people read
from right to left, so placing objects
to physical ability to
from left to right will not necessarily
worldview (and lead to all users encountering them
more). from left to right.

Even simple colors are perceived differently by different people—a significant

portion of the world’s population is color blind, after all. Remember this next time
you consider using red or green colors alone to signify success or error states.
They may look exactly the same to someone who sees color differently than you
do!

16
 Story 01 · The 10 Principles
of Great Product Design

Design with questions in Ask yourself:

mind, not answers. Who is excluded from using this

product if I commit to this design
concept?
Design with questions in mind, not
answers. Invariably, there will be How would a disabled person
times when you don’t know what experience this product? Can I
questions to ask to design effectively make it easier for them?
for a broad audience. The more
How can I get more feedback
diversity you invite into the design
from a diverse user group to
and problem-solving process, the
make this better?
easier it will be for you to meet the
needs of many.

The golden rules

of UI design
Successful design
creates a frictionless
environment where users
thrive and the design
itself almost disappears.
Follow these principles and you’ll
quickly find your way to seamless,
intuitive, inclusive product design
that keeps your users—real
people—coming back again and
again.

17
 Why You
Should Build
Features Users
Don’t Ask For
Kevin Cannon

Pitch
Product designer Kevin Cannon shares how the Pitch team addresses the root cause of
a product problem, not just its symptoms. Pitch is a Berlin-based startup offering a
collaborative presentation tool for modern teams.

“If I had asked people what they
wanted, they would have said faster
horses.” Now, it’s highly likely that
Henry Ford never spoke those exact
words, but the point still rings true.
It’s also about building empathy and
weaving user research into the fabric
of your company culture. At Pitch,
we're always challenging ourselves
to address the root cause of the
problem, not just manage the

02
symptoms.
So, if just asking users
doesn’t work, how do we
actually uncover our
users’ unmet needs?

18
 STORY 02 · Why you should build
features users don't ask for

You’ll never know

what users want
just by asking
If you ask most people what they want, you’ll get front-of-mind
problems—whatever is most obvious in that moment to them.

But often, it’s really the One user was manually marking
slides with their status. It was
workarounds that have
something so straightforward, but
become ingrained in when we looked further, we saw
people’s habits that many people taking a similar
illuminate opportunities approach. This even ended up
for innovation, and inspiring one of our users' favorite
features today: slide statuses. This
they’re the ones that
just goes to show that the things
people can’t even people spend the most time battling
remember. with are not features we ever get
requests for. It turns out many things
As an example, while observing how we take for granted—like the ability
people created presentations, we to align objects easily—are
saw that they needed a way to surprisingly complicated in
communicate to their other traditional presentation software,
teammates whether the slide was even though they're a staple in other
incomplete or ready. tools we use today.

19
 STORY 02 · Why you should build
features users don't ask for

Silent shadowing
Observing how people actually navigate and use their software will teach
you much more about their needs than just asking them how they work.

We got some volunteers to record themselves making presentations, and

watching hours and hours of people struggling with PowerPoint really
hammers home the point.

We try to understand existing user Needs aren’t static, they

behaviors and expectations early on
in feature development to make sure
it's represented in the final result. By
the time we get to prototypes,
whether or not we want to admit it,
our ego has come into play. It’s
actually a good thing—it shows we’re
proud of what we made. But it’s a bit
like the IKEA effect, you’ll like
something more if you made it with
your own hands. And unfortunately,
that effect can be blinding. In fact,
it’s one of the most dangerous things
when it comes to building a product.
No one likes to kill their darlings.
change all the time.
Prioritizing early user research has
not only helped us build features like
slide statuses, it’s also shown us
entirely new ways Pitch can bring
value to our users, like our quick
menu. Most people were not asking
or expecting to be able to have a
command palette in their
presentation tool, but we saw an
opportunity to bring that into Pitch
based on the other types of software
people rely on.

20
 STORY 02 · Why you should build
features users don't ask for

Friday
presentations:
How we use
Pitch at Pitch

At Pitch, we often have discussions about how we think users will behave or expect

a feature to work. However, we’re not always creating presentations in our

day-to-day job. There are a few ways we test new features internally to put us in

the user's mindset. One of my favorites is our Friday presentations.

This exercise in "eating our own dog They’re totally voluntary, but

food” has a simple premise: Choose typically, new employees do one

any topic, make a presentation shortly after joining. This is not only

about it using Pitch, and note any a valuable way to get product

feedback, suggestions, or bugs at feedback from people who bring

the end. Doing this helps get you out fresh eyes and a newcomer’s point of

of what you think people need, and view but it’s also helpful in

see what you actually need when onboarding new employees. The

you’re really making a presentation. informal structure of the

presentation helps us get to know

them better and breaks the ice with

the team.

21
 STORY 02 · Why you should build
features users don't ask for

We like Friday presentations because But, like any other

they're fun, light, and interesting.
We've gotten to learn about
everything from pineapples and
Kimchi to volcanoes in Europe and
how people perceive graphs. But
beyond just learning new things,
Friday presentations are a way for
us to gather ideas for features our
users may need. Some teammates
method, dogfooding has
its own set of limitations.
We may be getting feedback on the
process of creating a presentation,
but we could be missing out on other
valuable user experiences, like what
it’s like to get started with Pitch.

have even hacked together new
features as part of their
presentations. For a presentation
about Japanese noise music, our UX
prototyper Jelle created an early
version of what would later
weekly updates.
become Pitch's video embeds.
To combat this, we use Pitch not
only as our internal presentation
tool, but also as a way to store and
share knowledge like our employee
handbook, org chart, and our

Diversifying the ways we use Pitch helps us avoid blind

spots we would otherwise miss.

22
 STORY 02 · Why you should build
features users don't ask for
Plus, most of the time, we only create
presentations when we have a
specific goal in mind. Maybe it’s a
pitch deck to raise a Series A, or
maybe it’s an end-of-quarter
presentation for the department.
It’s difficult to understand how we’re
different to other people.
We tend to vastly underestimate the
differences between us and other
people, which is why it’s just as
important to try to know your user as
it is to know how you're not like your
user. This is why it's so important to
use a combination of methods to
really get the most comprehensive
view of users' needs.
Even someone with the
same background as you
might have a completely
different usage pattern.
23
Regardless, few of us create
presentations just for the fun of it. By
making Friday presentations light,
we give people the opportunity to
explore the product and to play with
features they may not use otherwise.
For example, a designer in a small
startup has extremely different
needs than a designer in an
insurance company. Beyond the role
or type of company, the surrounding
context and user’s mindset in that
moment have quite a big impact on
their needs. Are they making a
conference talk or a weekly report?
Do they just want to complete the
presentation efficiently and move on
to their next task, or to really invest
in the design for an important
conference talk by the CEO?
 STORY 02 · Why you should build
features users don't ask for

Identifying unmet
needs is a growth
opportunity
We all know
understanding the
people you are building
your product for is
extremely important.
Especially when your product is in an
early stage, slight changes in
direction can add up to monumental
costs if features are developed that
users don’t need or want.
Identifying users’ unmet needs is
more than just necessary, it’s a
growing opportunity for us as
professionals. Often it helps us
re-remember things we've heard
before, inspires new ideas or ways
of thinking about things, and shines
a light on the blind spots that may
be getting in our way. Not only
that, but it improves our intuition
and helps us think differently,
ensuring that we can build a
product experience that builds on
existing behaviors where relevant
and creating new ones where we
can innovate.

24
 What we learned
onboarding

2 million home and

apartment owners
on Booking.com

Alex Muñoz

previously Booking.com

Learn from product designer Alex Muñoz how the Booking.com team redefined their

onboarding strategy with data and a customer-centric approach. Booking.com is one

of the world’s largest travel marketplaces, seamlessly connecting millions of travelers to

memorable experiences around the globe.

Walkthroughs, guided tours, a As a result, it has developed in a

popover here and there. These things number of different directions as

usually come to mind when you think digital products have developed over

of onboarding. time. Some of these directions have

been informed by data — most by

gut-feeling.
But onboarding can be

an ambiguous concept.

It means different things

to different people. 03
25
 STORY 03 · What we learned onboarding 2 million
home and apartment owners on Booking.com

In this article, George (UX Copywriter), Jorden (Product

Manager) and I will talk about how we used onboarding
methodologies to help over 2 million property owners
become successful on Booking.com.

All three of us started working at With property owners leaving so

Booking.com two years ago, in a
team tasked with onboarding new
property owners. These were usually
homeowners that wanted to rent out
their place. We saw from data that a
lot were likely to leave Booking.com
within their first three months.
soon after they had signed up, it was
clear something was going wrong
during their onboarding period. We’ll
talk about a few of our mistakes and
successes as we tried to improve
their experience — and what this
taught us about onboarding.

26
 STORY 03 · What we learned onboarding 2 million
home and apartment owners on Booking.com

Our biggest
successes
Replacing generic walkthroughs
with contextual onboarding flows

When a property owner signed up to Booking.com in the past, we would show

them a long, detailed tour explaining every part of the interface — much of which
they might never use. However, we saw that the majority of users were skipping
the entire thing. So we removed it through a blackout experiment. In doing so, we
saw that more users were completing the tasks that they needed to concentrate
on at this point in their journey and fewer were calling customer service.

The tour was created to
help property owners,
but it was showing them
too many features that
they didn’t need at this
Those app tours with 3 steps and
beautiful, animated illustrations
might look great, but to be effective,
you have to boil them down. Only
show the things your user needs to
know at this point in their journey.

point and distracting Research what’s stopping your users

from getting what they want out of
them from some high
your product. Then look at what
priority actions.
you’re currently trying to help them
do and how you do this.

27
 STORY 03 · What we learned onboarding 2 million
home and apartment owners on Booking.com

Get as much data on your Then, be brutal. Cut anything that

onboarding flow as you can.
Measure how many of your users
start it. How many drop off. Where
they drop off. And what the ones
who complete it do differently once
they’ve seen that success screen.
And finally, how long it takes any of
these users to leave your platform.
isn’t necessary. Keep things short
and to the point. Instead of
overloading them with information
that isn’t relevant, use your flow to
help users find the value of your
product on their own, as soon as
they can.

Prioritizing actions based on your

user’s needs — not your own

New property owners used to land on a dashboard full of

competing features — not all of them relevant to them at
that time.

28
 STORY 03 · What we learned onboarding 2 million
home and apartment owners on Booking.com
In the end, these competing features,
with their different aims, only
achieved one thing: they exposed
our partners to all our different
teams at Booking.com and the
various problems they were all trying
to solve. New partners didn’t need
these problems solved at this point.
The information was important but
not at this point. They just needed to
know what would help them get their
first guest.
So we called property owners that
left us in their first three months and
tried to find what part of their
experience caused them to leave
Booking.com. This could have been
something like a guest cancelling a
reservation, or the property owner
not receiving bookings at all.
29
Not getting bookings stood out as
the one event that was most likely to
make new property owners on the
platform turn away from
Booking.com. And it makes sense. It’s
the reason they join.
Next, we looked at property owners
who got their first booking quicker
than others. We looked at what they
were doing right when it came to
setting up their property on our site.
This included things like the photos
of their place, their price, and how
their calendar was organized.
To make sure we were on the right
track, we organized a focus group
with home and apartment owners.
We showed them a list of actions
that we thought would help them get
their first booking quickly. We asked
them to prioritize these actions
based on what they thought they
would need to do the most in their
first days.
 STORY 03 · What we learned onboarding 2 million
home and apartment owners on Booking.com

Prioritized actions in hand, it was We built a checklist of five tasks that

time to cut anything new
partners didn’t need to see. If it
didn’t get them their first guest
and stop them from leaving our
platform, it had to go.
helped property owners welcome
their first guest. Then when we
implemented this set of actions, we
measured everything. Every booking,
click or interaction we thought was
relevant.

Within a month of starting our A/B experiment, we

saw conclusive evidence that we were helping new
partners get their first booking faster.

Our experiment tool directly links New partners that went through the
to our customer service centre, so new, simplified onboarding flow were
we could see the impact our calling us less.
changes were having on the
number of calls and emails we
were receiving every day.

30
 STORY 03 · What we learned onboarding 2 million
home and apartment owners on Booking.com

Our biggest
failures

It’s useless showing relevant tasks if users aren’t

motivated to complete them

One of the most important tools for So for the calendar, we listed all the

new partners is their calendar. This is terms that the flow would cover and

where they pick which dates guests the actions new partners could take

can book and decide how much they on that page.

will charge for these bookings. At this

point, we thought the welcome

However, we were seeing that a large
screens for the flows should sum up
amount of potential partners would
the skills that we would teach new
drop out of this flow on the welcome
partners in the following steps.
screen.

31
 STORY 03 · What we learned onboarding 2 million
home and apartment owners on Booking.com

Experiment 1: Removing the secondary button

(skip) from the modal.

At first we tried to encourage This increased the number of new

property owners to complete the partners starting the onboarding
flow by removing one of the skip flow by over 10%.
buttons on the welcome screen.

32
 STORY 03 · What we learned onboarding 2 million
home and apartment owners on Booking.com

Experiment 2: Changing the copy to clarify what

the user will get out of it.

As a follow up, we changed the copy This shows how

so that it focused more on the
important it is to get the
benefits to the property owner if
they completed the flow. Mainly,
right balance between
how learning to use the calendar design and copy.
would help them get bookings that
suited them and how it would save It’s great having a product that helps
them time in the future. These were our users — but if they don’t
benefits that both experienced and understand why they should use it in
first-time partners stood to gain. the first place, it will never be truly
Describing these benefits increased effective.
motivation to start the onboarding
flow, and we saw an increase of
around 50% as a result.

33
 STORY 03 · What we learned onboarding 2 million
home and apartment owners on Booking.com

Redefining onboarding

To us, onboarding is the process of

finding out what is important to our
users when they first join our
platform, and helping them to
achieve these goals.

Put simply, we have to

show them what they
need to see, at the time
they need to see it.

34
 What Makes
Design Special
at Grammarly?
Renn Valdes Olmos

Grammarly

Renato Valdés Olmos, Head of Design at Grammarly, shares the core tenets of building
a product and brand that’s both trustworthy and delightful. Grammarly is a writing
assistant that supports clear, mistake-free writing while offering suggestions that go
way beyond grammar.

At Grammarly, design We know that to help people

has been a key focus communicate effectively, we need to
design a product and brand that is
since our company was trustworthy and delightful. When we
founded over a decade reflect on design at Grammarly, four
ago. themes come to mind.

04
35
 STORY 04 · What Makes Design
Special at Grammarly?

Impact We design product offerings and features for 30

million daily active users and 30,000 teams worldwide.
Whether we’re helping people understand how their
tone may be perceived or highlighting the key
takeaways from a message, designers at Grammarly
are tackling complex and nuanced problems that
affect how people express themselves every day.

Autonomy At Grammarly, designers have the opportunity to

oversee the look and feel of an entire marketing
channel, product, or interface. We’re a small team,
and managers are here to support you—not the other
way around. Maybe this is part of the reason why our
designers tend to stick around: Our average team
tenure is eight to ten years.

Vision We’re in the great position of having a product that

people really love and trust. This keeps us humble and
also makes it possible to dream big. We’re building
tools that support communication and connection
around the world—a goal that makes us excited to
come to work each day.

Empathy It’s one of our core EAGER values to seek out empathy
in everything we do at Grammarly, whether we’re
interacting with colleagues or responding to user
feedback. Empathy is an absolute must for good
communication—and good design.

36
 STORY 04 · What Makes Design
Special at Grammarly?

Putting design
at the center
from day one
Why is design so We also have an advocate and
champion at the very top of the
important at
company. Grammarly’s co-founder
Grammarly? In many and head of product, Alex
ways, it has to do with Shevchenko, personally mentored
the delicate nature of the and managed our Design team for
problems we are solving. many years. Alex is deeply
passionate about how we visually
express ideas, not just within our
From the beginning, we’ve been
product offerings themselves, but
trying to do something utterly new in
also in all our surrounding marketing
a highly sensitive domain. To be able
and branding. Thanks to this
to help someone shape what they’re
influence, we’ve seen not only
trying to say, you really need to earn
product design but also brand and
their trust. So we’ve always believed
marketing design enjoy an essential
that Grammarly can’t just be
role at Grammarly that is only
smart—we need to be graceful,
continuing to grow.
welcoming, empathetic, and
engaging as well.

37
 STORY 04 · What Makes Design
Special at Grammarly?

Practically speaking, our design focus plays out in numerous ways. Here’s one
example: We try to offer a moment of delight even before someone starts writing
or when the product doesn’t yet have suggestions to offer. These moments are
referred to as “blank states.” With a seat at the table, the Brand Design team was
able to create something engaging that would capture people’s imaginations
during these blank states.

We saw an opportunity to harness design in a unique way. Little did we know that
our work would make an unexpected impact: Imagine our surprise when someone
recently contacted us through our user feedback channels saying that they
enjoyed the “success state” graphic so much that they wanted permission to
tattoo it on their body! This might not have been the “product surface” we
originally had in mind, but we were honored.

38
 STORY 04 · What Makes Design
Special at Grammarly?

The problems
we’re solving
at Grammarly
Our writing assistant works across multiple platforms
and devices. This means we have to continually balance
strategic thinking about improving communication
outcomes with a tactical understanding of user
interfaces.

One of the things that makes
working on design at Grammarly so
exciting is that we are defining many
patterns and principles for the first
time. For example, we’ve used emojis
to show the ways someone’s tone
may be interpreted in writing—a
situation in which they don’t have
the luxury of reading the recipient’s
face or body language. And we’ve
developed a novel UX to suggest
ways to make writing more readable
and attention-grabbing.
Just as we used design to solve the
problem of making a blank page be
welcoming instead of a scary place
for a lot of writers, we approach all
of our designs with flexibility and
empathy. We also embrace a sense
of humor—we had fun joining in
when Grammarly recently got its
own tribute dance on TikTok, for
instance.

39
 STORY 04 · What Makes Design
Special at Grammarly?
The next step for our writing
assistant is to continue its evolution
toward our vision of a holistic
communication assistant. An
example of what this means can be
found in our approach to Grammarly
Business. We’re taking a product
that millions of users already know
on a personal level and that delivers
value on a daily basis, and now we’re
strengthening that product into a
broader context by asking how we
can help professional teams achieve
goals through communication. This
brings lots of interesting challenges
forward.
40
One challenge is the fact that
language is fluid, alive, organic, and
never the same in any location. You’ll
encounter myriad dialects and
variations around the United States
alone. On a more specific level,
individual companies also have their
own language, jargon, and tone.
They may have internal style guides
to adhere to as well. How do we
make sure that these unique
attributes are reflected across our
communication assistant? We
designed company style guides to
help our customers respond to these
concerns—and we see this kind of
personalization as a key part of the
future of Grammarly.
 STORY 04 · What Makes Design
Special at Grammarly?

Empathetic
team culture

These days, we are all increasingly communicating

digitally with people who may have very different
expectations and assumptions around language.

The Design team helps bring a global Even though we’re distributed all over

perspective to the challenges we the world, we prioritize connection,

face as a company. For many people whether by organizing fun

on the team, English is their poster-design tournaments in Figma

secondary language (and the same or holding regular workshops (most

is true of Grammarly’s founders). It’s recently one on communication

important for us to build a team of presented by designer and author

amazing people from diverse Mike Monteiro). The tight-knit nature

backgrounds to design product of our team was never more

offerings and experiences that can apparent than during the COVID-19

improve communication for all pandemic.

humans.

41
 STORY 04 · What Makes Design
Special at Grammarly?

Anxiety and uncertainty affected us When one of our teammates faced

all, and major life plans flipped
upside down. Along the way, we
consistently acknowledged the
elephant in the room by checking in
with each other before every
meeting.
especially tough circumstances, we
took on a special design challenge:
making a card of selfies and notes
from everyone on the team.

42
 STORY 04 · What Makes Design
Special at Grammarly?
Growing
our design
organization
Our design organization
is divided into four main
focus areas: product
design, brand design,
user research, and
design operations. UX
writing and content
strategy are part of the
extended organization as
well. We’re hiring for both
leadership and individual
contributors across the
board.
43
We see design as a multidisciplinary
and holistic process integrated with
the entire product lifecycle.
Designers are embedded in specific
functional areas to allow them to
specialize. There may be a few
designers appointed to one
particular product offering or area,
and they will be collaborating with
product managers, engineers,
content strategists, and researchers
on a day-to-day basis. The same is
true for brand and marketing design.
While partnering with marketing
operators (for traditional digital
performance marketing, brand
marketing, and working marketing
partners), they also collaborate
closely with product teams.
 STORY 04 · What Makes Design
Special at Grammarly?

Design leadership at
Grammarly adapts to
where designers and
researchers need
support. We meet team
members where they are
in their career, and
provide leadership based
on their needs or
communication style.
We’re building an
amazing team of design
leaders. And we’re only
getting started.

44
 recommended

resources
Design is a journey, and there’s always more to learn.
We asked the design teams at these companies what
resources they’d recommend to other designers. Here’s
what they came up with.

Frameworks
BJ fogg model

Gestalt theory

Hierarchy of evidence

The scientific method

Resources
NN Group

Online Influence

Death by Design: Killing your growth

with defective device experiences

The A11Y Project

Motionographer

Tendril

45
 recommended resources

Ordinary Folk

Plugin Everything

CSS-Tricks

Where are the Black Designers?

Books
A Book Apart

The Power of Habit, Charles Duhigg

Hooked, Nir Eyal

Thinking, Fast and Slow, Daniel Kahneman

The Undoing Project, Michael Lewis

Disability Visibility, Alice Wong

Ruined by Design, Mike Monteiro

Don’t Make Me Think (Revisited), Steve Krug

The Elements of Typographic Style, Robert Bringhurst

Books from Intercom

The Do Book Company

46
 recommended resources

Tools
The Experimentation Flywheel

Usertesting.com

Validately

Miro

47
Book a demo to find out if

Framer can help your team.

framer.com/enterprise