Challenge
A messaging platform used by professionals needed a way for users to attach different types of files and media within conversations. However, the platform had strict limitations: only up to 10 files could be attached at a time, each with a maximum size of 2MB, and only specific formats such as PDFs, images, Word documents, and Excel sheets were allowed. I was brought in to design an intuitive and accessible attachment experience that fit naturally into the existing messaging UI, clearly communicated constraints, and prevented user frustration.
Results
The solution was well-received by product managers and developers alike and was implemented without friction. The final design made it easy for users to attach valid files, provided real-time feedback on errors (e.g., size limits or format issues), and maintained a clean and non-intrusive UI. It contributed to a smoother user experience and improved the overall messaging functionality.
Design Process
Competitive Research
To begin, I explored how established messaging platforms like WhatsApp and Telegram handle file attachments. This helped me understand common patterns, successful UI placements, and accessibility practices.
Early Concepts and Accessibility Considerations
Initially, I considered adding drag-and-drop functionality, but it was ultimately discarded due to accessibility concerns. Instead, I focused on using conventional and inclusive interaction patterns, such as clickable icons and modals.
Wireframes and Prototyping
I designed a paperclip icon next to the typing area to open an attachment modal. Users could then select files from their device. A modal displayed thumbnails and file names, with immediate visual feedback if a file exceeded the size limit or if too many were attached. Snackbars and in-modal banners were used to notify users of specific errors without interrupting their workflow.
UI Design
I created a clean and responsive interface using Material UI components, ensuring the modal fit seamlessly within the platform. Icons, error states, and file previews were designed to be clear and non-intrusive. I collaborated closely with the PMs during prototyping, and the design was greenlit and implemented by the development team without requiring changes.
