Skip to content

Custom Emoji design exploration

Make custom emoji possible as a way to let communication be more expressable by multiple people.

Designs

Award emoji menu

Sections and icon usage:

Section Icon
Frequently used clock
People users
Nature nature
Food & drink food
Activity dumbbell
Travel & places car
Objects object
Symbols heart
Flags flag
Custom tanuki

Note: Icons may be visually different from the mockups!

Default aware emoji menu:

  • Includes handy reactions + hint display

Artboard_3

When scrolling:

Artboard

Bottom/custom section:

Artboard_2

Selections:

  • Hint changes to chosen emoji + shows name and shortcut phrase(s) (can be multiple if we implement aliases)

Artboard_2

Artboard

Skintone menu/chooser:

  • Button expands horizontally when clicked
  • Hint changes to point to the menu/chooser + changes skin color

Artboard_2

Artboard

Wyiwyg emoji button in editor:

This can still be a separate iteration, but should be really simple to add, which adds a lot of value for making custom emoji more discoverable.

  • Excludes handy reactions menu as we are now less context aware 😉
  • Note:_ Copy should change to Pick your emoji as we're in a comment context. (thanks @smcgivern)

Artboard_2

Group customization:

  • Makes it available to all group members with a customization action in the left sidebar outside of settings

Artboard_5

Validation:

  • When adding new emoji, checking for name collisions in ancestor groups and descendent groups

Artboard_4

If member left group/is removed:

Artboard_3

Tranferring groups:

  • will not transfer custom emoji in the beginning (we may support this at a later stage)

img

Aliases:

If we would supported aliases 😉

Artboard_3

Artboard_4

Slack sync of custom emoji and aliases:

Artboard_3

Bitmap

Edited by Dimitrie Hoekstra