Hiring managers using the MatterWorx VMS often need to review worker documents such as resumes or certification licenses.
Currently, these files automatically download, forcing users out of their workflow.
Automatically downloaded files break concentration, increase task-switching, and create inefficiencies.
An inline document viewer that allows managers to preview documents within MatterWorx itself — keeping them focused, streamlining their workflow, and ensuring consistency with the design system.
To design a new component that fit seamlessly into an established design system, balancing usability and technical feasibility, and considering edge cases.
Understanding the anatomy of a document previewer
I reviewed Canvas LLM, Dropbox, and email client document viewers (Gmail, Outlook) to understand how they handle in-app file previews.
leads to insights on how MatterWorx can handle file-previewing:
Lightweight UI is preferred for productivity workflows — avoid overloading with advanced viewer features.
Include basic metadata (file name, type, uploader) for clarity.
Provide a fallback action (download) if preview fails.
I worked closely with a senior designer to iterate multiple layout and functional options for the document preview modal.
I created multiple iterations for different modal layouts, using components from the existing MWx design system.
Iteration 1
Top toolbar makes the design feel dated and different from the MWx design system.
Initial modal design with lightweight UI — basic functions are pinned as a top tool bar.
An island tool bar aligns the new element better with the MWx design system.
Iteration 2
Verify/Reject Qualification are platform-level workflow decisions, making them not intrinsic to the preview modal component.
Iteration 3
Added appropriate metadata as subheader and refined tool bar design.
More refined modal design with lightweight UI and clear metadata.
For the first developer hand-off meeting, I created a spec board that outlined both the components and interaction behaviors of the document viewer.
Hand-off board with interaction specs (file opens in modal, default zoom, zoom increments, full screen toggle behaviors), UX notes on supported file types, and error handling plans.
I then iterated based on feedbacks from our developers.
Feedback 1
The initial design did not account for loading states — what happens if a file took too long to load?
solution
I added a loading state with a spinner and file metadata, so users have clear feedback that the document is in progress and the system is working.
Feedback 2
The full toolbar was useful but more complex to build, posing a challenge for delivering the feature in an upcoming sprint.
solution
I designed a simplified viewer variant without the toolbar, placing only essential actions (download, print, fullscreen) in the header.
This lightweight version was easier to implement quickly while still keeping the full toolbar design in scope for richer use cases.
Feedback 3
Error handling in the first iteration was too broad — all failures were treated the same, which wasn’t helpful for users or for developers troubleshooting.
solution
I refined error states into three clear categories, and clearly annotated how they can be communicated to users:
Error opening the modal (e.g., network failure), preventing modal from initializing: users stay on previous screen and are shown toast alerts
Error loading documents (e.g., unsupported/corrupted files): show fallback and download option
Action-level errors (e.g., can't print/download): show toast alerts inside modal.
I combined components of the modals, along with behavior and interaction specs into a detailed and refined hand-off board.
Proposed component pattern for MWx design system, built to be scalable across other workflows (assignments, timesheets documents).
Lightweight UI, no toolbar modal for fast implementation
Full-scope modal with island toolbar
Zoom increments and smart zoom options
Full screen
TLDR: the impacts — why did this project matter?
Reduced workflow disruptions: Hiring managers can now review documents inline, saving time and avoiding context-switching to external apps.
Clear fallback logic for edge cases: Developers now have a structured way to handle errors (network, corrupted files, unsupported types), ensuring consistent behavior across the platform.
Extended design system: Established a reusable modal pattern that can support future use cases beyond credential review.
Faster delivery path: By providing both a simplified version (quick to implement) and a full-featured version, the design balanced short-term sprint goals with long-term scalability.
Learning to design for edge cases, dev realities, and a living design system.
This project was one of my first chances to work closely with developers and to contribute to an established, evolving design system. I learned how early collaboration helps resolve technical constraints (like file size limits and error handling) before they become blockers, and how designing both a simplified and a full-featured viewer created flexibility for immediate delivery and future scalability.
Designing within a large, evolving system required intention and precision. Designing new component patterns that fit seamlessly into an evolving design system without breaking consistency required me to study existing components, reuse patterns, and document how the new design can fit the established system.
appreciation <3
Thank you to Geoff, Joe, and Chris for helping me with this project!