Building Emoji Autocomplete

9f63c98d741c8130adb71db3bbf77f08?s=47 Dasmer
March 02, 2017
Technology
0
85

Building Emoji Autocomplete

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

9f63c98d741c8130adb71db3bbf77f08?s=128

Dasmer

March 02, 2017
Tweet

More Decks by Dasmer

See All by Dasmer
9f63c98d741c8130adb71db3bbf77f08?s=48 dasmer
0
48
9f63c98d741c8130adb71db3bbf77f08?s=48 dasmer
0
66
9f63c98d741c8130adb71db3bbf77f08?s=48 dasmer
0
68
9f63c98d741c8130adb71db3bbf77f08?s=48 dasmer
0
290
9f63c98d741c8130adb71db3bbf77f08?s=48 dasmer
0
120
9f63c98d741c8130adb71db3bbf77f08?s=48 dasmer
1
330
9f63c98d741c8130adb71db3bbf77f08?s=48 dasmer
3
130

Other Decks in Technology

See All in Technology
9c42c4bc1d91c409d754da88c91cb2ef?s=48 kur0cky
1
210
48a351a06897d7cc9721e2ddb7198e8a?s=48 dougpuob
0
110
5d715b858124e0dd59af1a92e4397acd?s=48 y_temp4
0
110
C9237e9aa6c8fe028a484c9621991423?s=48 arahabica
0
190
9ea422a61c1a69c888786830eee3dbe6?s=48 osonoi
0
140
Ecad9d801d79f6c6e5df93094690685e?s=48 sinsoku
6
880
80c79a9d024d1e1a253893a78189ce6d?s=48 ujnak
1
140
C786d7772602b488a7972c38c143f61c?s=48 con_mame
3
1.7k
53850955f15249a1a9dc49df6113e400?s=48 line_developers
0
140
53850955f15249a1a9dc49df6113e400?s=48 line_developers
0
130
8db231d3fe08b46242f6e0e45c95eee1?s=48 darkomesaros
0
120
88964b936e864ca7d326272eaa70fa9a?s=48 hgsgtk
0
1.5k

Featured

See All Featured
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
228
17k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
0c6fd6a08d0f898159cda7cafcacf07f?s=48 afnizarnur
175
14k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
319
53k
016edace78ffe826f2348d1e0c504afd?s=48 maggiecrowley
2
170
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
163
18k
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
55
5.1k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
55
5.3k
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
224
8.2k
A9704266587836f7e784235e5073b93e?s=48 jmmastey
1
16
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
113
6.8k
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
105
9.4k

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