hypothesizing the designs
Keeping the above questions in mind, the next phase focused on exploring a wide variety of new approaches to creating an
command system product experience
. I generated ideas in 3 "buckets" that lay the foundation of the commands primitive, and evaluated
that each address the three product principles above, in order to land on the best option.
To determine which options aligned best with the product principles (see above) and project goals, each option was evaluated against a set of
metrics, specific to the ideation bucket. The metrics (x-axis headers) address the principles and themes found in the research phase.
Floating, No Tabs
(Recommended)
🟢 — Shows multiple command
options and is less bulky
🟢 — Feels lightweight easily
dismissible with overlapping UI
🟡 — Eliminating tabs removes
the visual icon of a “slash”
which is presumed to boost
discoverability.
🟡 — This component shows less
multiple command options and
is more bulky due to the tabs
🟢 — Feels lightweight and
provides greater sense depth
with overlapping UI — more
easily dismissible
🟡 — Tabs provide the visual icon
of a slash command, which is
presumed to boost
discoverability
🟡 — Able to show multiple
command options. However,
the full-spanning width creates
the illusion of bulkiness
🟡 — Feels heavier and confusing
to know what the elevation is.
Less obvious that there are 2
scroll windows
🟡 — Eliminating tabs removes
the visual icon of a slash
command which is presumed to
boost discoverability
🔴 — Takes up the most vertical
and horizontal space. The full-
spanning width creates an
illusion of bulkiness and the
added tabs compete with the
command cells
🟡 — Feels heavier and it’s
confusing to know what the
elevation is. Less obvious that
there are 2 scroll windows
🟡 — Tabs provide the visual icon
of a slash command, which is
presumed to boost
discoverability
🟢 — Exists inside the composer,
providing clear input guidance
for the necessary arguments in
a location where the eye
focuses on while typing
🟢 — Feels at home within the
composer component, almost
acting like a more specific
version of the regular ‘Message’
placeholder
🟡 — Would not handle
commands with multiple
arguments gracefully. Ghost
text disappears when typing,
making it difficult to know when
arguments start and end
🟡 — Clarifies what a user should
type next in a sticky format so
they won’t forget during typing.
However, it is unclear if the
bubbles will send along with the
text
🟡 — Overcrowds the composer
with non-text elements,
especially for argument names
with longer translations if
localized
🟢 — Would handle arguments
well, as static bubbles would
separate argument inputs
without ambiguity
🟡 — Clarifies the necessary
argument input, but motivates a
need to crosscheck with the
modal and ensure correct input
🟡 — Feels mechanical and
overly technical, like copying
down a formula rather than
following a description
🟡 — Can handle multiple
arguments, but it would get
increasingly complex and
harder to follow as it scales, due
to the formula-based guidance
🔴 — This text exists the farthest
away from the composer,
making it unclear that an
argument is necessary
🟢 — This text feels at home
within the gif picker, and acts as
a description
🔴 — This component would not
handle commands with multiple
arguments gracefully
🟡 — Requires for at least one
member of the group to already
know that commands exist
🟡 — Requires the user to take
initiative and perform the
description text on their own
🟢 — Text fits well with the
thread view and upsells the
command in a subtle yet
noticeable fashion
🟢 — Provides a natural
entrypoint to discovering
commands when a user
accesses features using current
flows
🟡 — Requires the user to take
initiative and perform the
description text on their own
🟢 — Fits well with the thread
view and upsells the command
in a subtle yet noticeable
fashion
🟢 — Requires for at least one
member of the group to already
know that commands exist
🟡 — Includes a clear CTA that
populates the composer with
“/”, giving the user quick
visibility of the command picker
🟢 — Fits well with the thread
view and upsells the command
in a subtle yet noticeable
fashion
🟡 — Feature engagement is
already low, and this option
requires the first step of
accessing a sheet feature
🔴 — This text is not actionable,
and adding a CTA would
interrupt the current process
of sending a gif or sticker.
🟢 — The text fits well within the
sheet and upsells the command
in a subtle yet noticeable
fashion
🟡 — Users are likely to quickly
dismiss it without reading the
upsell / text
🟢 — If the alert is not dismissed
right away, the alert can prompt
intentional discovery of the
feature
🔴 — The text obstructs the
entire screen’s view, which can
be frustrating for a user
