Requirements: A main feature of this Human Resources product is exporting lengthy reports on the status of various HR work processes. Often reports would take several minutes to generate. This meant we needed a Report Center to keep track of and download product-wide reports.
Information Architecture: First off, we needed to decide where this feature would live. It was going to affect several other features so we needed to make sure there was alignment between team members. I made a few options for us to use to make a decision.
Research: I looked at other products that had similar features for either uploading or downloading large files, as well as managing them in the interface.
Interaction Design: It was clear that we would need some sort of Exporting Queue widget, anchored somewhere within the browser. Since we had decided the Report Center should be always accessible through a utility navigation, we decided to use this queue to point to the icon to establish that navigation access point.
Wireframes: The Report Center itself needed full-fledged functionality so that a user could find what they were looking for through a long list of items. I used the concept of an email inbox to inform the wireframe designs, keeping the most recent at the top. Since exporting the reports could take some time, I incorporated a progress bar per item to say its percentage of completion.
UI Design: Once functionality was fully captured in wireframes and signed off with stakeholders, our UI team collaborated to generate some simplifying patterns, combining search and filter interactions into a clean and concise interaction.