Embedded Files
TASK: Finish up design & analysis of the new Drop Zone component
TherapyNotes received lots of feedback from customers over the years about wanting to upload multiple files at a time. When we started building out a proper design system, that team put out a call for components for their roadmap, and a drop zone was near the top of that list.
I actually began design work for this component as part of another project where I pitched the idea, but it was descoped from that project in favor of focusing on building it as a design system component first. The design system PM (a designer herself) took what I started and ran with it, defining all the different states of the component. Later on, I did a ton of analysis on the existing file uploaders in our system, to try and define which ones made sense to stay as single file uploaders vs. changing to the new component that could handle multiple files. Throughout that analysis phase in preparation for implementation, we had to tweak the design here and there to ensure it was as configurable as possible.
Last, as the design system team prepared to build the drop zone component, they realized they wanted some mockups for how to handle in-line error messages for multiple file uploads. I also put together a prototype for each of the areas we identified that would use the component configured to multiple file uploads, to illustrate how we should handle in-line messaging.
File Upload Analysis
File Upload Analysis
I went through every page in TherapyNotes, looking for areas where we allow users to upload files to the system. There were your obvious places - like the Library; but there were also some hidden spots, like the Support uploader that I never knew about! This is why analysis is important!
Library Uploads Prototype.mp4Library Uploads Prototype
Library Uploads Prototype
.
Staff Uploads Prototype.mp4Staff Uploads Prototype
Staff Uploads Prototype
Patient Uploads Prototype.mp4Patient Uploads Prototype
Patient Uploads Prototype
.
Support Uploads Prototype.mp4Support Uploads Prototype
Support Uploads Prototype
Errors on Multiple File Uploads
Errors on Multiple File Uploads
For an example of what errors would look like on multiple uploaded files, I chose the implementation that had the most options for files that could be uploaded at once - the Patient Uploads. Based on the designs that the design system PM came up with for an error state, I carried that error state through to multiple files on this mockup to show how we should handle them.
Want to connect? I'd love to hear from you!
Google Sites
Report abuse