Role: Design, Web Development

Ippycon is a copy-to-clipboard website and emoticon keyboard.

I use emoticons (read: “ippies”) on messenger all the time and usually Google search the face I want each time over again from scratch. That became a bit tedious (and stopped me from sending faces), so Nick Aversano and I created a website (and later, a keyboard) to make that process a lil bit easier (and more fun \(^▽^)/).

Visit the live site

Currently, there are websites that already do this - the copy-to-clipboard emoticon concept wasn't something we'd come up with from scratch. However, all of those websites, even when easily accessed through bookmarks, require many click-throughs. And while they all have benefits of their own (such as sorting by categories), we wanted users to have easy and fast access to so that they could access them fast in the flow of their conversations.

Since the intent was to access ippies fast and easily, I laid out the page so that all ippies, and access to the ippies, were immediately exposed first (AKA no landing page.) This way, when the user enters the site, they can quickly click on the ippy they need and leave. Emoticons are primarily used in conversations, and conversations happen fast. So I prioritized immediacy over everything else. Because of this, I intentionally chose scrolling through emoticons over clicking through page numbers to minimize the amount of clicks (time & processing) the user goes through to access an Ippy.

This was the first time I’d fully coded my designs from scratch. I’d come into this project with the intent of learning to code (we used HTML, CSS, JS, and Ruby) - I wanted to know what it was like to code something so that I could communicate better with developers and execute more ideas and designs by myself/faster.

When Nick and I launched the site, it got a lot of excited feedback from the design community (with about 17,000 views in the first 3 days!), with people telling us that they’d saved this in their bookmarks. Four months after the launch, the site had a 55% return rate, with hundreds of sessions every week.

We even had people requesting other forms of Ippycon (!)

I quickly realized that while Ippycon was handy, it still wasn't the quickest, best solution to the original problem. Our users shared that they wanted to use ippies seamlessly during conversations: opening up a new browser, especially on mobile, was "annoying" and took up a lot of time.

I teamed up with Luis Santos, an iOS developer, to create a keyboard with ippies embedded inside so that users could directly paste ippies during a conversation on mobile. We specifically decided to create a keyboard (versus a chrome extension or other out-of-messaging shortcut) to solve the issue/annoyance of opening a new browser on mobile during a conversation.

The above is the current state ippy. However, it has a major setback. While it matches the brand, the keyboard is unnecessary. Users want to use the keyboard they are already accustomed to: the autocorrect is more familiar, as are the shapes of the keys. And since the entire point of the keyboard was to have fast access, we really only needed to include the ippies! We hope that one day the keyboard will look something along these lines instead:

This method also matches the already existing, familiar flow of standard emojis.

Next Steps

When we initially launched the website, we got a lot (a *lot)* of feedback, and we saw a lot of trends in how to improve. Here's a sample:

If we decide to build this project out more, our next steps, in addition to polishing up the keyboard, will be:

  • Create a moderator/filter for Ippies people post.
  • Build a tagging/category system.
  • Expose this to a japanese audience, the design style matches a lot of their current graphics and I am interested to see whether this would stick in areas in Japan like it did in the states. (This includes changing copy, the actual emoticons to match those popular in Japan, etc.)