Formerly known as ZeroChaos VMS, the Magnit vendor management system is a comprehensive cloud-based SaaS solution that manages the entire workflow of the contingent workforce. Key functions include candidate sourcing, bill rate and margin review, cost optimization, assignment management, and onboarding and offboarding processes.
The mission for this project was to overhaul the UX and UI of the product to enhance customer satisfaction and retention, attract new users, and position the product as a credible contender in the market. The key objectives were as follow:
As the lead UX/UI designer on this multi-year project, I spearheaded the design and implementation of user-centered experiences while closely collaborating with a multidisciplinary team of researchers, product owners, and UI engineers within an agile/scrum framework. My primary responsibilities included:
Through ongoing feedback and regular conversations with users from various companies in our client portfolio, we gained valuable insights into their experiences, which helped us further define the problem to be solved. The iterative nature of this process allowed us to gather rich, qualitative data over time, ensuring that we were tracking evolving needs and pain points. The trends gathered from these insights were foundational in shaping the user personas for the project.
Company Tenure: 3 Years
Role: Manager
Goals:
Frustrations:
Company Tenure: 2 Months
Role: Supplier
Goals:
Frustrations:
Based on our research findings, we optimized the content structure and navigation design to provide seamless user experiences and facilitate easy access to key information. Through card-sorting sessions and detailed review of data from the Pendo analytics tool, we refined labels and enhanced the content taxonomy to ensure clarity, consistency, and intuitive navigation throughout the application.
The design process began with a focus on enhancing the application's dashboard and data tables to improve usability and visual appeal. A detailed competitive analysis of two key competitors informed the design direction, highlighting opportunities to differentiate while addressing user needs. Using these insights, I designed wireframes and mockups that streamlined information display on the dashboard and introduced intuitive filtering and search functionalities for data tables, creating a more efficient and user-friendly experience.
The Employment Screening Process was created to address inefficiencies in the previous system used to gather candidate information for pre-employment screening. The prior method was not only time-consuming but also lacked clarity, which led to user frustration, incomplete submissions, and delays in the screening process. Users frequently found the interface cumbersome, resulting in additional manual effort from administrators to resolve errors and request missing data.
The primary challenge was to design an intuitive and user-friendly interface that streamlined the collection of candidates' professional and personal data while maintaining compliance with regulatory and organizational requirements. The feature needed to accommodate various data types, such as licenses, certifications, motor vehicle reports, and references, while ensuring users could easily navigate through the multi-step process without confusion or unnecessary repetition.
The objective was to design a stepped form interface that simplified the complex data collection process by breaking it into manageable steps, guiding users with clear progress indicators and instructions. Interactive components, such as the ability to add and edit licenses or certifications, improved flexibility and minimized errors, while seamless navigation with intuitive action buttons ensured a smooth user experience. This redesign aimed to streamline the process, and enhance user satisfaction through a clear, functional, and efficient workflow.
Creating a new Approval Workflow was previously a manual and complex process. Users needed to have a deep understanding of how to write SQL statements, which were then submitted to back-end developers to create a new Approval Workflow object in the database. This process not only required specialized skills but was also time-consuming and prone to errors.
Before initiating the creation of an Approval Workflow, users were required to construct a Field Comparison. This involved writing an SQL query by selecting data fields derived from the application's database. This step added a layer of complexity for users unfamiliar with SQL.
The goal of the redesign was to streamline and automate this process by providing users with a simple, intuitive interface. The solution aimed to eliminate the need for specialized SQL knowledge, making the process faster, more efficient, and accessible to all users.
To evaluate the effectiveness of our proposed solutions, I developed high-fidelity prototypes and presented them to stakeholders with varying levels of familiarity with the existing product. With clear testing criteria in place, stakeholders were invited to interact with a realistic model of the new concepts.
To address the challenges of creating an Approval Workflow, a custom solution was developed that seamlessly integrated into the existing UI. This solution automated the process of constructing SQL statements, reducing the need for specialized knowledge.
The prototype was shared with a diverse group of users and stakeholders for hands-on testing. During the sessions, participants were tasked with creating SQL statements using the new interface. Observations and direct feedback were collected to identify pain points, usability issues, and areas for improvement.
Key Insights from Feedback:
Using the insights gathered from usability testing, the interface was iteratively refined to improve the user experience. Additional enhancements, such as the requested support for nested queries, were incorporated into the next phase of development. Regular collaboration with stakeholders ensured alignment with user needs and business goals throughout the refinement process.
The redesigned top navigation bar underwent iterative usability testing to ensure it effectively addressed user needs. Feedback revealed issues with text readability and efficient use of header space. Adjustments included increasing text size and weight for clarity, optimizing the "Search" function to conserve space, and refining responsive behaviors with tooltips for smaller screens. Each refinement was validated through additional testing, confirming improved usability and accessibility.
The data table's search and filtering functionality underwent rigorous usability testing and iterative refinements to address user needs for efficiency, speed, and ease of use. The primary challenge was balancing the complexity of filtering a vast amount of data with the need for an uncluttered, intuitive user interface
The initial solution incorporated search and filtering options within a collapsible accordion-style menu positioned above the data table. This approach kept the interface clean by default, allowing users to focus on the data table contents while offering the option to expand the menu when needed. A "Search" button in the toolbar toggled the menu's visibility, giving users flexibility to keep it open if preferred. Additionally, the menu allowed users to add and remove multiple filter options as needed, providing the flexibility required for more complex searches.
Key Insights from Feedback:
Several refinements were implemented to enhance the search and filtering functionality. A saved filters feature was introduced, allowing users to store and reuse common filter combinations for improved efficiency. The accordion-style menu was redesigned to include a simplified UI for single-filter selection, addressing the need for quick and straightforward searches. An "Advanced Search Options" checkbox was added, enabling users to toggle between a simplified interface and a more complex UI for managing multiple filters. Additionally, the design ensured that filter criteria remained visible alongside search results, providing users with essential context and facilitating quick adjustments.
The tabbed container navigation was carefully evaluated and improved to address user frustrations with efficiently accessing multiple tabs, particularly on smaller screens. Early testing revealed issues with horizontal scrolling when the number of tabs exceeded the browser's viewport width, disrupting the seamless and rapid navigation users expected.
Challenges and Refinements
The initial integration of a third-party library to dynamically adjust visible tabs introduced delays due to excessive reliance on slider buttons and animations, prompting a need for a more user-friendly solution. I developed a custom implementation to optimize the experience. This solution dynamically adjusted the tab navigation bar's width in real-time based on the browser's viewport. When the number of tabs exceeded the available width, the right-most tabs were hidden and relocated to a dropdown menu labeled “More…,” accessible from the navigation bar itself. This ensured all categories remained easily accessible without excessive navigation or waiting.
The refined design addressed user pain points by delivering a faster, more intuitive navigation experience across devices of varying screen sizes. Users expressed high satisfaction with the new functionality, as it allowed them to effortlessly view and access all available tabs, even on smaller screens such as laptops, improving task efficiency and overall usability.
Since we were redesigning a legacy system, we chose an incremental strategy rather than overhauling the entire system at once. This method enabled us to update different UI elements gradually while maintaining a consistent visual experience. The iterative approach provided the flexibility to adapt and make quick adjustments as new insights emerged.
My contributions to this project emphasized a seamless integration of user needs, technical feasibility, and business goals, ultimately delivering a product that aligned with both stakeholder expectations and user satisfaction. This role demonstrated my ability to lead complex projects, effectively bridge cross-functional collaboration, and advocate for user-centric design throughout the development lifecycle.
Following a comprehensive, multi-year redesign, the vendor management system formerly known as ZeroChaos significantly elevated its user experience and functionality, positioning itself as a strong competitor in the industry. The overhaul improved usability, streamlined workflows, and introduced modern design principles, which enhanced user satisfaction and garnered considerable attention. This newfound visibility and credibility ultimately contributed to ZeroChaos being acquired by Magnit Global, a leading player in the vendor management space.
