ATCO.com
Development of AEM's templates, components, and the design system for atco.com.
Intro
The ATCO.com redesign involved extensive usability testing, interviews, and a user-focused approach. Built on AEM with a customized CMS, the site featured a component library covering all breakpoints and AEM templates. The team adjusted existing components to align with the new UI, ensuring a smooth launch on time.
Redesigning ATCO.com: A Journey of User-Centered Design and Agile Adaptation
The redesign of ATCO.com was a comprehensive project that combined in-depth user research, a robust technical framework, and a design system built for flexibility and scalability. Our primary goal was to enhance the user experience while ensuring that the site remained efficient, accessible, and easy to manage for content teams.
User Research & Testing
From the outset, we prioritized a user-centered approach. We conducted extensive usability testing to understand how different audiences interacted with the existing site and identify pain points. These tests were complemented by interviews with key stakeholders, customers, and internal users, allowing us to gather qualitative insights on expectations, frustrations, and desired improvements. This research guided our design decisions, ensuring that we built an experience that aligned with real-world user needs.
Technical Implementation: AEM with a Customized CMS
One of the most significant aspects of the project was the development of the new ATCO.com on Adobe Experience Manager (AEM). Given the complexity of ATCO’s content management needs, we customized the CMS to provide greater flexibility and efficiency. This customization allowed content teams to manage updates seamlessly, structure content more effectively, and maintain brand consistency across all pages.
Building a Scalable Component Library
To ensure consistency and responsiveness, we created a component library that covered all breakpoints. This meant designing and developing reusable UI components that adapted seamlessly across devices, from desktop to mobile. The component library not only improved the development workflow but also ensured that future updates and new features could be implemented efficiently while maintaining design integrity.
AEM Templates for Streamlined Content Management
Beyond the component library, we developed a set of AEM templates that provided a structured framework for different page types. These templates made it easier for content creators to build new pages while maintaining a cohesive visual identity. By leveraging AEM’s powerful templating system, we ensured that the site remained flexible enough to accommodate future growth and content expansion.
Final Outcome & Impact
The redesigned ATCO.com delivered a vastly improved user experience, a more efficient content management process, and a scalable design system that supports future enhancements. The combination of usability research, technical customization, and scalable design components ensured that the new site met both user and business needs.
This project exemplified the power of a research-driven approach to web design and demonstrated the value of investing in a strong CMS foundation. It was a collaborative effort that brought together usability experts, developers, designers, and content strategists—all working towards a common goal of making ATCO.com a more intuitive and effective platform.
'Careers ' experience
Working on the ATCO website also involved collaborating on the career site, where the business made the decision to integrate with Phenom, a global HR technology company. Phenom uses AI-powered software designed to enhance the talent experience, aiming to help businesses hire faster, develop employees better, and retain talent longer. Their platform connects candidates, employees, recruiters, and HR professionals through an “Intelligent Talent Experience,” with the broader mission of helping a billion people find the right job.
For the career site, we implemented our interface while leveraging Phenom's CMS. Our goal was to adapt their components to fit seamlessly with the existing design of the ATCO site. We focused on reutilizing similar components to ensure consistency between the two platforms. Despite the challenges, we were able to successfully align their components with our own interface, achieving a high level of match in terms of design and functionality.
Throughout the process, we worked closely with Phenom, fostering strong collaboration to make the integration work smoothly. The teamwork was highly productive, and I believe we accomplished great results, bringing together both the talent platform and ATCO’s digital presence in a cohesive and efficient way.
