Messages
As part of sourcing v2, we revisited the messages page to improve the overall experience. We introduced conventions from apps like Slack, Messenger and WhatsApp to make the experience feel more familiar.
Overview
The original messages page felt dated compared to modern messaging tools. The UI hadn't kept pace with conventions users were already familiar with, and some core flows worked differently to what users might expect.
Final design
Below is the final design we landed on. Further down you'll find a closer look at some of the key details and improvements.
- Improved the flow for messaging a supplier
- Refreshed the look and feel of the messaging window
- Simplified the side panel to align with familiar messaging conventions
- Added the ability to mark a specific message as unread
- Auto-scroll the user to their last unread message
- Improved readability by capping message bubble widths
Flows
Sending a message to a new supplier.
Sending a message to a supplier when a chat already exists.
Sending a message to a supplier when a chat already exists and was unread.
Marking messages as unread.
Scrolling the user to the last unread message.
Sending an announcement to all suppliers, followed by a direct message. Announcements are a one-way broadcast to all suppliers. We kept the feature but restyled them and made them collapsible so they don't dominate individual chats.
Additional details
Messaging panel on a wider viewport, with design notes.
Details of the timestamp behaviour.
Learnings
Placeholder learnings. Reflect on what worked, what didn't, and what you'd do differently.