Building Emoji Autocomplete

9f63c98d741c8130adb71db3bbf77f08?s=47 Dasmer
March 02, 2017

Building Emoji Autocomplete

Presented to the iOS class at the Flatiron School on March 2nd, 2017

9f63c98d741c8130adb71db3bbf77f08?s=128

Dasmer

March 02, 2017
Tweet

Transcript

  1. Building Emoji Autocomplete By Dasmer Singh @dasmersingh Thursday, March 2nd

    2017
  2. What is Emoji Autocomplete? Launched May 2015

  3. Idea to Launch in a Week 8:00 PM I put

    my card down for dinner at an Italian Restaurant May 7th 2015
  4. Idea to Launch in a Week 8:05 PM A friend

    tries to pay me back on Venmo but struggles to find the pizza emoji among all the others I wish I could just type “pizza” and the pizza emoji would just show up Amazing idea! (Why isn’t this already a thing?) I can do that!!!
  5. Idea to Launch in a Week 8:30 PM As soon

    as I went home, I started building
  6. Idea to Launch in a Week 1:14 AM I sent

    an email to the Product, Design, Engineering teams with a link to download a build of Venmo with the first iteration of Emoji Autocomplete May 8th 2015
  7. Idea to Launch in a Week Next Two Days The

    team had very positive feedback. We immediately started working with Product and Design to polish and improve it. Two days later, we submitted an updated version (6.10.0) of Venmo to Apple that included Emoji Autocomplete. Polish Submit
  8. Idea to Launch in a Week Five Days Later Venmo

    6.10.0 is approved by Apple and launched to the App Store! I publish a post on Emoji Autocomplete in the Venmo blog to announce the new feature. March 15th 2015
  9. How did Venmo users react to emoji autocomplete?

  10. Users LOVED it Increased Emoji Usage > 85%

  11. Most Commonly used Emoji Autocompletes at Venmo 1. Pizza 2.

    Rent 3. Beer
  12. Other platforms have also now adopted Emoji Autocomplete (Apple released

    it in its keyboard with its iOS 10 release in Fall 2016) “Similar to Venmo's Emoji Autocomplete, the new “tap to replace emoji” feature automatically highlights words that could be replaced with an emoji” - Slate Magazine, June 2016
  13. How to start an Emoji Autocomplete • Tap on the

    • Type in a : • Type the first 4 characters of an emoji
  14. How is Venmo’s Emoji Autocomplete implemented? 1. After every keystroke,

    the word at the current cursor position is searched across a long list of names 2. If one or more emoji are found as match results in this list, show them to the user
  15. Quiz: What type of view presents the results?

  16. Answer: UITableview

  17. Example implementation User enters “pizz”, which is searched in a

    database Match is found and returned because “pizza” starts with “pizz” UITableview displays list of 1 result
  18. Example implementation (cont’d) User selects pizza emoji Word at current

    cursor position is replaced with pizza emoji
  19. Demo Live Coding of Emoji Autocomplete

  20. Example Code Available at github.com/dasmer/EmoijAutocompleteExample

  21. • Downloadable on the iOS App Store • 100% Open

    Source • See code at github.com/dasmer/Paste • Pull requests welcome Extra enrichment
  22. Q & A @dasmersingh