Message Centre
A consolidated inbox for courier chats and notifications
My Role
Led the product design implementation with oversight from a senior designer. Workflow included a Competitive Analysis, UI/UX design, usability testing, tech assessment, handoff, and design QA's.
Timeline
Jan - Apr 2023
Project Type
Feature in the courier mobile app, designed with the PIE design system on iOS
Outcomes
Active customer courier chats and chat history reduces undelivered orders (UDO’s), improves delivery speed, and decreases support contact propensity. Notifications improve engagement of announcements from JET, and will enable our upcoming incentives communications.
Final Design
Just Eat Takeaway is a food delivery company. I designed this Message Centre for the DELCO freelance courier market in Canada, United Kingdom, Ireland, and Australia.
There's no way to act on communications
Currently, Couriers do not have a way to view and act on communications in the Courier app. Couriers often miss important messages, and they can't view message history.
In addition, our ecosystem lacks a cohesive communications strategy, with multiple channels being used including push notifications, in-app notifications, emails, and SMS. They don't all work in a consistent way across the experience.
Our goal with the Message Centre is to provide a centralized place for chats and messages.
Card Sort: Which types of messages belong in the Message Centre?
I worked with a UX researcher to conduct a card sort on notification types and preferences. As a result, we were able to categorize notifications into push, in-app, message centre, and email, and identify the proper timing, desirability, importance, and frequency of each.
We decided on the following messages for our message centre: customer chats (open and closed), support chats, and notifications such as new features, important documents, pay and incentives, and more.
how can we best organize the inbox?
I found these best practices from desk research, guided by the following How Might We's (HMW's):
HMW organize communications in the notification centre so that couriers are not overwhelmed?
Group notifications by category
Use a colour-coding system
Prioritize critical information
Allow drivers to customer their notification settings
HMW deliver communications to the couriers in a time and location-appropriate manner?
HMW create clear, information, and efficient chat exchanges?
HMW allow for effective and non-distracting communications when the courier is focused on driving?
Set expectations for when chats will be deleted
Use clear, concise, and useful language
Use location-based and time-appropriate notifications
Make use of quick replies and acknowledgements
Use appropriate notification types
I also used those HMW's on a competitive analysis, looking for effective features in other courier apps.
From this research, I decided to organize the inbox with tabs, and clearly distinguish the message types by with avatars. I designed the customer chats to rotate between four brand colours with the customer initials, and the notifications into five categories with specific brand colours and icons. I also designed the pre-written messages to allow couriers to message customers with the click of a button, straight from the delivery flow.
we broke the work into multiple phases and Ran a couple of Usability Tests
From there, I moved into the design phase. Since there were many design features we wanted to tackle, I worked with my Product Manager to prioritize top features. We broke down the work into Phases so that we could build, learn, and adapt as we went.
Here is the navigation flow of the Message Centre, as it overlaps with the customer courier chat experience.
I also worked on 5 usability tests, including researching chat organization, captions and subtext, prototype ease of use and usefulness, chat timing extension, and pre-written messages.
Here are some of our insights from usability testing, where we were testing for:
understanding of the purpose of the Message Centre
which elements will be helpful for couriers
usability and effectiveness of different inbox elements
We learned from these results to stick with chat titles without number badges, and to keep absolute timestamps.
Although we didn't ultimately build pre-written messages, we have a strong foundation for future improvements.
final design: chats and notifications
Here are the final designs for Phases 1-3, which are currently in production. Active customer chats are shown at the top since they are urgent, while closed customer chats show underneath and indicate when they'll be deleted. Chats are organized using accordion chat titles without a count of the number of messages, based on usability testing results. The notifications are in a separate tab, and colour coded by category for easy reference, based on best practices.
Future features such as pre-written messages and system messages
Here are some of the future state screens, which we can buil in the future. Pre-written messages are a feature that couriers really appreciate, not only to save them from typing, but also to improve their customer service communication for a potentially higher tip. System messages and images in the chat also help increase empathy and understanding between the customer and courier.
Outcomes
Message centre was launched Sept 2023 and is used in all Delco (freelance) markets by tens of thousands of couriers, including Canada, the United Kingdom, Ireland, and Australia. Current features include active customer chats, closed customer chats, online and offline agent support chat, and notifications from company such as documents, incentives, and new feature messages.
We are continuing to leverage the Message Centre for our communications strategy, still in the works by the team.
My Learnings
Since this was my first major professional project, I learned a lot about the design process in a real-world setting
Conduct tech assessments and design critiques early to get a strategic, user-centric, and technically grounded solutions. Make sure to probe deeper into the reasons behind certain limitations, as practically everything is technically feasible, but will just take longer to implement
When designing and you come across a potential user experience problem or uncertainty, note it down. This may be grounds for user testing. But first think, is this problem key to the experience, and can it not be answered through competitive analysis and best practices?
If this is an area worth testing, take these areas of uncertainty and test them for usability and ease of use. Qualitative results are more helpful for early prototypes, while hard metrics are more helpful for more finalized designs (i.e. SUS and UMUX-Lite scores).
Create a vision for the ideal solution, and then break down the solution into phases for development. This will translate ideas into practical implementation which is suitable for execution