Carrier Prototype
Static front-end design system for a 100 year old company.
With large clients “rebuilding a website” is a complex endeavor spanning multiple departments, codebases, and companies. My team’s role on this project was to bring the front-end and design of several websites running on different back-end solutions and databases under a single brand.
The original project was to take the art direction and layout of a new ad campaign and create new landing pages on the existing site. This was blocked my many reasons the key one being no access to the codebase. The second was that the company was in the process of a restructure of how all of the marketing sites across their company would be managed.
Two of us worked with the creative team to implement Carrier’s brand into a design system. From there we built a complete working prototype of the front-end of the entire website.
To do this we built a web-crawler to collect the existing 42,000 urls to make a temporary database of all existing pages. We then cleaned these collected pages of all html and css to build our own data models. From there we could build HTML, CSS, and JS templates from this data.
This allowed us to mock up over 1000 pages complete with real filters and searching for products and locations.
Although this project started as a handful of pages, we were able to build quickly and efficiently to provide the client a working blueprint for the front-end across all their business lines.
Our deliverable to the client’s dev team was a front-end design framework with copy and paste examples. It also had nearly every page of the site build in a static environment to reference any animations, hover states, or display logic.
We were able to bring the branding and design from the agency to the engineers working at Carrier faster than either group could have on their own.
You can see the fruits of this front-end work implemented by Carrier’s team on-top their existing CMS infrastructure.
