Giphy Sticker for Trello

At Atlassian, we are given 20% time or "Innovation Weeks" where you can spend our time doing whatever we want to do as long as it is beneficial to the company or the personal growth.

I had recently spent some of my 20% time to design and build out Giphy Stickers for Trello which was eventually shipped after working on it for 1-2 hours a week for about 6 months.

Below is the document that I wrote up to convince people that it was worth releasing this feature to our users.

Background

Board members can drag and drop stickers on cards. Free users have access to the basic set of 12 stickers and Gold / Business Class users get the “Taco Pack”, “Pete the Computer” pack and the ability to upload their own custom stickers.

Custom stickers are nice but it can be quite a hassle to find an appropriate image (with dimensions and transparency), upload it, wait for the servers to process the image before you can use it.

side note: https://brody.com/trello-stickers/ provides a really nice set of stickers using EmojiOne emojis.

In popular chat apps such as LINE, WeChat, and Facebook Messenger, there are sticker ecosystems where artists release and monetize custom sticker packs. The ability to stick these fun images have become as normal as using emojis to express your feelings or to convey a certain message.

From my Instagram addiction, I’ve grown very accustomed to using animated GIPHY stickers in my content. One day, I asked myself “why don’t we let Trello users search for stickers from GIPHY?”, which has resulted in a spike and this page which serve as my attempt to convince people that this is a good idea.

By adding a sticker service like GIPHY, we will allow users to quickly search from a very large set of curated stickers. Trello users will no longer need to find their own stickers and it might increase the usage of stickers. This is similar to how we use Unsplash as our board background provider.

Design

Search Input

If the user has Gold/Business Class show a search input field at the top of Stickers tab of the board menu. The input field should have a placeholder which says “Search GIPHY”.

Displaying search results

As the user types a query into the search input, the search results should be immediately displayed. (debounced of course). The results should be in the same grid layout as the regular stickers - rows of 4.

Using the stickers

Using the stickers from the GIPHY search should be the same as using the regular stickers.

When the user hovers on the sticker, it should have the “peel” effect.

When they drag and drop the sticker onto the card it should seamless and optimistically use the already loaded image before switching over to our own uploaded version of the sticker. (more details in the implementation spec).

Removing a sticker from a card

Removing the sticker from a card should work as expected as well.