Building Emoji Autocomplete

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

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