Lead Owner: Joseph

(Responsible for updating the document & helping out with any questions)

Bubble Editor Link: Click here

Screenshot of Notification Mockup (not designed):

Step 1: Data architecture

Additional Notes

• Several of the fields on messaging aren’t mandatory to the function of the system, but are very useful to have.

• “Read by”: Lets you integrate the chat into an “unread messages” system.

• “Thread”: Back-linking the message to the chat it is part of makes searching the database less complex in some cases.

Step 2: Chat interface

Additional Notes

• This is simply a guideline of how a chat interface could look, it is by no means the only way your chat can look, you are free to design it however best fits the application you are working on.

• The reason for setting it up in this way is that it’s considered “standard” design to have the threads on the left and messages on the right, provided they’re both to be displayed at the same time. Ensuring that interfaces feel familiar to users is essential

Step 3: Chat list setup

Additional Notes

• The fields being displayed are optional (photo, name etc.) and are just for example purposes, the actual required fields will vary from client to client.

Step 4: Chat messages

Additional Notes

• The client may want different elements added to the display, such as names above the chat “bubbles”, profile picture of the current user etc.

Step 5: Adding messages

Additional Notes

• If you’ve added extra fields to your data-structure, you will also need to populate them at this stage, if applicable. This might include attaching files or images to a message (similar to Skunkworks).

Step 6: Create a new chat

Additional Notes

• There are many ways that a client may want users to create chats or interact with the chat system. This video explores a common one, a chat button on another page.

• Creating a new chat always uses similar workflow actions to those shown in the video, regardless of where the user is on the website. The only difference may be extra steps such as creating a default message or not navigating a user as they’re already on the right page.

Step 7: Sorting the displays

Additional Notes

• These are just “standard” ways of displaying the data as it is one of the most commonly used. It’s always important to remember that users won’t have the intrinsic system knowledge that you have, so making interfaces intuitive and easy to use is incredibly important.