MIT Human Resources

A head to toe rebuild

MIT's Human Resources website offered a comprehensive array of resources for both current and prospective employees, but accessing this information could be as difficult as finding a needle in a haystack. Compounding the issue was an outdated content structure, which, along with a challenging user interface, posed significant barriers to users, particularly in terms of ADA compliance.

To address these issues, a complete departmental rebrand was required. This involved creating and organizing web components in line with the new branding guidelines while ensuring strict adherence to MIT's accessibility policies. The result was a more user-friendly interface that provided clearer navigation and enhanced accessibility for all users.

Organizing Complex Content

One of the significant challenges in this project was managing the vast amount of content. Given the critical nature of this content, our team held several collaboration sessions to determine the most effective way to organize and present it. We focused on identifying the key components that would best display the content efficiently while avoiding redundancy.

Adopting a content-first approach, we aimed to minimize duplicative efforts, which often occur when creating unique components for every piece of content rather than focusing on reusability. Through our collaborative discussions, we prioritized the content and determined the most intuitive ways to present it, ensuring we met the expectations of stakeholders and target audiences.

The next step involved creating low-fidelity wireframes to outline all the necessary components, categorizing them by functionality, and identifying commonalities to maximize reusability. With these insights, we developed a functional specification that included naming conventions, field definitions, and a sprint plan to ensure we met our deliverables.

Collaboration with Third-Party Vendors

Due to the scale of the project, we collaborated with a third-party vendor, which required our code to be thoroughly tested for efficiency and compatibility across various browsers and platforms. We used Pattern Lab to organize and annotate components, ensuring they aligned with the functional specification. This approach facilitated a seamless handoff to the external developers for integration.

Our careful planning and use of Pattern Lab ensured that the front-end deliverables were well-defined and met within the project's timeline and budget. This thorough approach led to high expectations being met, ultimately resulting in a satisfied client.

Component-Based Development: A Success Story

The MIT Human Resources website project provided an excellent opportunity to develop a custom theme while also planning code deliverables in a sprint-based workflow. By leveraging tools like Pattern Lab, we were able to streamline the organization of components, allowing developers to collaborate seamlessly with designers and clients. This approach facilitated the approval process, as stakeholders could review and approve components in real-time, reducing the need for significant changes later in the development cycle.

One of the key benefits of this method was its ability to address many issues upfront, ensuring that the "heavy lifting," such as integration with third-party vendors, could proceed without unnecessary delays. This required clear communication and precise deliverables to distinguish our team's responsibilities from those of the external parties. By focusing on component-based development, we ensured that all necessary approvals were in place before the integration phase, leading to a smoother handoff and a more efficient workflow overall.