Modernizing Annuities

Problem/Opportunity

AIG’s Annuities department was facing a significant challenge: their web application, a critical tool for both internal operations and client interactions, was built on an outdated Bootstrap framework. This legacy system was no longer flexible enough to meet modern design needs, and it created inefficiencies in the development process. The outdated infrastructure led to inconsistent user experiences across different parts of the application and made it difficult to implement new features.

Compounding these issues were accessibility concerns. AIG had faced legal challenges due to the lack of accessibility compliance, and improving this aspect was a high priority for the project. The Annuities department needed a solution that would not only modernize the system but also ensure that it was scalable, responsive, and accessible across devices.

Process

As the lead Design Technologist, I approached the project by first analyzing the existing codebase, quickly identifying its limitations. The outdated Bootstrap framework created significant constraints, particularly in terms of flexibility and modern design requirements. I collaborated with the Product Designers and Project Managers to map out the requirements, and we developed a strategy to modernize the system while working around Bootstrap’s limitations.

One of the key opportunities in this project was to introduce a new, scalable design system that would improve consistency across AIG’s digital products. I spearheaded the development of this design system, called “Hinge,” in close collaboration with the Lead Product Designer. We used the Annuities project as a proving ground for Hinge, developing a series of reusable components that could be implemented across various AIG projects. This allowed us to ensure consistency while creating a flexible system that could evolve with future needs.

I also took the lead in prototyping and developing key features for the application. Working with the Sass CSS preprocessor, I built high-fidelity HTML and CSS prototypes for the new features, focusing on creating responsive solutions that worked seamlessly across different devices. I also developed a custom functional CSS system, inspired by Tailwind, that gave us the flexibility we needed to move away from the constraints of Bootstrap.

A major focus throughout the process was accessibility. Given AIG’s previous legal issues around accessibility, we made it a top priority to ensure that the design and code met the highest accessibility standards. I regularly reviewed the designs and code to ensure compliance, making sure that accessibility was baked into the solution from the start rather than being an afterthought.

Our workflow was guided by Agile Scrum methodology, and I played a key role in leading our team through sprints, ensuring that we maintained a close collaboration between designers, developers, and stakeholders. As part of this effort, I took a two-day Scrum Master training, which helped us better manage the iterative development process. We worked closely with an overseas development team to ensure the smooth integration of prototypes into their JavaScript environment, and I provided detailed documentation and oversight to keep the project on track.

One of the most rewarding aspects of the project was our work on responsive design, particularly the development of innovative solutions for responsive tables. By “designing in code,” we were able to create mechanisms that allowed complex data tables to function fluidly across all devices without the need for multiple static designs. This approach not only saved time but also ensured a seamless user experience across different screen sizes.

Solution

The outcome of the project was a modernized, responsive web application for AIG Annuities. We successfully introduced the “Hinge” design system, which provided a cohesive, scalable framework for AIG’s digital products. This design system was built to be flexible, with a library of reusable components that could be easily adapted to meet the evolving needs of the business.

In addition to the new design system, we implemented a series of innovative solutions for handling complex data, particularly in the way we approached responsive design for tables. These solutions not only improved the overall user experience but also enhanced development efficiency by reducing the need for multiple design iterations for different viewports.

Accessibility was a core focus throughout the project, and the final solution addressed AIG’s legal risks while improving usability for all users. The system was built to be fully accessible, ensuring compliance with industry standards and setting a new bar for future AIG projects.

Results and Impact

The AIG Annuities project was a significant success, both internally and externally. The introduction of the “Hinge” design system was a game-changer for AIG, setting a new standard for how digital products were developed across the organization. The system’s consistency and flexibility meant that development teams could work more efficiently, while the user experience across devices was greatly improved.

Internally, the project raised the profile of the Experience Design Group within AIG. Our work on the Annuities project demonstrated the value of a well-executed design system, and other departments within AIG began to adopt “Hinge” for their own projects. This not only improved overall design consistency but also streamlined the development process across the company.

Our focus on accessibility paid off as well. The legal risks AIG had faced due to accessibility issues were mitigated, and the improved usability of the application made a noticeable difference for users with varying needs. By prioritizing accessibility from the start, we were able to ensure that the final product was not only compliant but also user-friendly for everyone.

The responsive design solutions we implemented, particularly for complex tables, became a key differentiator for the project. By designing these solutions in code, we created a more efficient development process and delivered a better user experience without needing to design multiple versions for different devices.

Lessons Learned

This project highlighted the importance of flexibility in both design and development. By moving away from rigid frameworks like Bootstrap and developing a custom functional CSS system, we were able to overcome many of the challenges posed by the legacy infrastructure. The success of the “Hinge” design system reinforced the value of having a scalable, reusable framework that can be applied across multiple projects.

One of the key takeaways was the value of “designing in code,” particularly when it came to responsive design. By working directly in code, we were able to create solutions that were more flexible and efficient than traditional design methods, ultimately saving time and improving the user experience.

The project also underscored the importance of accessibility in modern web applications. By prioritizing accessibility from the start, we not only mitigated legal risks but also created a product that was better for all users.

Ultimately, the AIG Annuities project demonstrated the critical role that a Design Technologist can play in bridging the gap between design and development. By combining technical expertise with a deep understanding of design principles, we were able to create a solution that was both innovative and practical, meeting the needs of both the business and its users.