Presentation by Patrick Gingras from Fellow.app at Ottawa's second Slack Platform Community event at Shopify, January 28th 2020.

1. Chat bots are
so last decade
Patrick Gingras
@pat____g

2. Patrick
Gingras
full stack software dev @ Fellow
@pat____g

3. (that’s four underscores btw)

4. Background

5. Background
Fellow + chat bots

6. chat bot
/ˈCHatˌbät/
A computer program designed
to simulate conversation with
human users…
from lexico.com

7. Fellow
/ˈfɛloʊ/
A tool to organize 1-on-1s and
meetings, track action items,
and collect feedback
from fellow.app

8. Feedback

9. Feedback
(check out fellow.app/blog/)

10. Feedback
(check out fellow.app/blog/)
Giving and requesting

11. Lots of user
input

12. Chat bots are
so last decade

13. Chat bots
have
their place

14. Chat bots
have
their place
(but that’s not our topic)

15. Chat bots also
have
their issues

16. Namely:

17. 1. For users:
Potentially
unintuitive

18. GIF of using a
slash
command

19. Note:
Slash
commands

20. Note:
Docs hard to
find

21. 2. For users:
Awkward for
inputting data

22. GIF OF
RESPONDING TO
FEEDBACK GOES
HERE

23. Note:
Back and
forth

24. Note:
No going back

25. 3. For devs:
complicated
to implement

26. 100files
12736lines

27. Note:
So much code

28. Note:
Seriously
that’s a lot

29. Why so
complicated?

30. Imagine:
2things
happenatonce

31. What to do?

32. Use the cool
new Slack
features

33. - Block kit

34. - Block kit
- Modals

35. - Block kit
- Modals
- Actions

36. - Block kit
- Modals
- Actions
- App Home

37. Block kit

38. UI primitives
for display
and input

39. A BUNCH OF
IMAGES OF
BLOCKS

40. Composable
by stacking

41. A GIF OF
REARRANGING
THINGS IN BLOCK
KIT BUILDER

42. (btw block kit builder is really nice)
api.slack.com/tools/block-kit-builder

43. Reusable
across Slack
surfaces

44. SAME BLOCKS
ON DIFFERENT
SURFACES

45. Simple JSON
format

46. SOME JSON

47. Modals

48. Built with
Block kit

49. Great for
displaying
information

50. Example

51. Great for
collecting
information

52. Example of
modal with
renamed buttons
(back, next)

53. The
private_metadata
field

54. Hand off
application
state to Slack

55. The modal
stack

56. - Push
- Pop
- Clear

57. Multi-step
forms

58. Example
Step 1 Step 2 Step 3

59. Actions

60. Connect
buttons to
behaviour

61. Snippet of JSON
with action_id
and code that
handles action_id

62. Behaviour
reuse without
adding code

63. Perfect for
opening
modals

64. App home

65. A home page
for your app

66. Screenshot of
fellow home
vs app home

67. Showcase
your features

68. Screenshot of
quick actions

69. Showcase
your app’s
data

70. Screenshot of
activity feed

71. A pattern for
great Slack
apps

72. Consider your
application

73. - Interactions

74. - Interactions
- Data

75. - Interactions
- Data
- Notifications

76. Interactions

77. Use modals

78. Give feedback
modal

79. Open them
using buttons

80. Put those on
App home

81. Quick actions

82. Data

83. Boil it down to
be easily
consumed

84. Put it on App
home

85. Upcoming 1-
on-1s

86. Notifications

87. Send
messages

88. Add buttons
to those
messages

89. Feedback
request
notifiacation

90. Reuse other
interactions

91. Put them on
App home
(maybe)

92. Answer
feedback
buttons on app
home

93. In conclusion

94. The new Slack
features are
great

95. Blocks
For reusable
UI

96. Modals
For intuitive
interactions

97. Actions
For reusable
behaviour

98. App home
For feature
discovery

99. We can make
great apps by
using them

100. Chat bots are
so last decade
@pat____g