design exercise of SlackHQ

1. handle multi-conversation

2. 1.
Existing UI & Defining the Problem

3. Current UI: One Conversation Only

4. UI Structure
content (chat / file / snippet)
current window info
type areasearch
invite
GROUP
PRIVATE
CHANNEL
user info

5. groupprivatechannel
Hierarchy of Conversation Types

6. 2 clicks
Conversation Switch

7. Problem:
How to enable user to have better experience and efficiency
when they are dealing with multiple conversations (channel /
group / private)?

8. Design Goals:
1. handle multiple conversations at the same time
2. fast switch between conversations
3. clearly indicate the conversation user is currently
engaging
4. provide switching option between single- and multi-
conversation mode (user can organize their spaces)

9. 2.
Case Study: Text Editor & Tabs

10. Text Editor Solution: Tabs

11. #html
#JavaScript
#JSON
Multi-coding Scenario: Switch between Tabs

12. #html
#JavaScript
#JSON
Reality: “ forget tabs, and help yourself ”

13. 3.
A Quick Tweak of Slack’s UI

14. Vertical & Blank

15. CHANNEL GROUP
window 1 window 2 window 3
type area type areatype areasearch
invite
PRIVATE
GROUP
CHANNEL
user info
PRIVATE
Introducing Columns

16. Always Know Where You Are

17. 1 click 1 click
One Click Switch

18. immersive v.s. multi-tasking
Different scenarios ask for different UI

19. open as new window
open as new column
Resilience: Optional Opening