THE ICONIC & Nightjar’s Headless Approach
Our fashionable partnership has helped increase efficiency for THE ICONIC’s internal teams by 88%.
The Partnership
Working in a successful partnership for the past two years, we recently completed a large strategic project which is helping shape the future tech stack of THE ICONIC and kicking their content output into top gear.
THE ICONIC engaged Nightjar to solve a specific business problem. Driven by their new marketing strategy of “winning the upper funnel”, heightened creative output was required. The subsequent task was to find a new way of looking at how campaigns and landing pages could be brought to life.
THE ICONIC’s fifty-strong engineering team were at capacity maintaining the smooth running of the site, with tens of thousands of catalogue items, and thousands of transactions daily. So, when it came time for campaign bursts, their developers were tied up building custom campaign landing pages, with resources on the day-to-day maintenance of the juggernaut site nearing capacity.
“We have always been on the same page as Nightjar and it’s great to work so closely with a team who has the same ambitions for our product and our tech stack.”
Ollie Brennan, Head of Engineering & IT at THE ICONIC
We put our heads together in a workshop session, breaking down the needs of both THE ICONIC and their customers, and brainstorming solutions for versatile page modules which mixed both content and product together. The objectives of these modules were to simplify the user journey, while being both functional for content editors as well as driving business growth. THE ICONIC and Nightjar’s creative, UX and UI design teams worked hand-in-hand with all ICONIC marketing departments to quickly prototype the requirements.
Whilst the Nightjar design team were beavering away, the Nightjar technical team and THE ICONIC engineering team started white-boarding how we’d neatly slot this shiny new piece of kit into the existing infrastructure and systems. We realised early on we would need to bypass much of the existing CMS, but not completely remove it, as it maintains a large part of the global site content.
The Tech
After much discussion, it was decided that the business would say goodbye to the current Angular 1.6.10 library the site is built upon. We shortlisted its replacement to two choices — React or Vue.js, with React triumphant, due to its overwhelming popularity and solid principles. However, the decision was not taken lightly, given that a move from Angular would require bootstrapping of both Angular and React, resulting in an unwanted performance hit. THE ICONIC accepted the risk as part of their migration plan, acknowledging it would take time to transition over, but with the spirit that we were all moving over to something new and forward-facing that both development teams were excited to build upon to modernise the site.
To power our lovely React-based components, we proposed a headless CMS (Prismic in this case) approach in order to quickly spin up new module content types that the marketing team could bolt together to provide the flexibility they required. The headless CMS approach gave us the strong advantage of being API-led and allowed us to incorporate new endpoints (including new tech) into THE ICONIC’s existing Kubernetes ecosystem. Nightjar built a series of RESTful web services, with each service endpoint corresponding to a different React component. When building a campaign page to serve to an end user, THE ICONIC’s server makes a request to one or more of these endpoints, merges the received HTML, Javascript and CSS into the page, and then returns the finished page to the user. Voilà!
Before full build was given the all clear to proceed, we had to ensure the performance impact was acceptable. Having past experience working with the THE ICONIC tech team was a huge bonus — Nightjar had previously built and iterated on The Edition, a content hub that sits within THE ICONIC site but is technically a separate website. To prototype a new, more tightly-integrated architecture, Nightjar worked with the tech team to build a proof of concept in the form of a service serving a simple component that could be integrated into their catalog page. The process of building this service would gauge two issues:
1. If the speed impact of bootstrapping both React and Angular was too great and therefore would make the integration unviable.
2. Allow us to identify and resolve any integration issues that would arise further down the line, and make improvements to the software architecture and hosting infrastructure to achieve our performance goals.
The Build
Nightjar and THE ICONIC’s weapons of choice were NGINX and NodeJS with the Express framework, coupled with React SSR, JSS, Redux and Redis. All our fancy tech would be hosted and deployed via CI/CD tools built and managed by THE ICONIC team. Code reviews, 100% unit test coverage (yes, really!) and automated static analysis (Code Climate) ensured delivery was not only to a high standard, but that both tech teams kept each other in check.
During development Nightjar did not have direct access to THE ICONIC production or staging environments for obvious security reasons. Normally our developers run a local server (part of webpack) that incorporates the entire tech stack. When working on these components, Nightjar needed to test them in-situ as they would appear when mounted into THE ICONIC production website. Our solution was to insert a reverse proxy into the webpack development server, whose job was to build pages by fetching them directly from the production site and merging in our in-development components. So when we load http://localhost:3000/designer/ on a local development machine, it looks like we’re viewing https://www.theiconic.com.au/designer/ with the latest components already integrated.
Many of the components we had designed pulled data from both the CMS and from THE ICONIC catalog API (to pull in product data). To maintain high performance, we delegated selected catalog API calls to client browsers to balance costs like round-trip API calls and cache invalidation on the server side. This was to ensure we catered for end-user considerations such as first meaningful paint speed (for all those impatient fashionistas) and progressive content population. Similarly, our components could share existing front-end infrastructure by utilising the legacy Angular UI elements to implement features like ‘Add To Cart’ and ‘Add To Wishlist’. All in all, no stone was left unturned, wherever we could make performance gains we seized the opportunity.
The Team
To pull this feat off, THE ICONIC assembled a cross-function squad, with each division of the business represented. Product, UX , Creative Design, Tech, Marketing and Content all had a seat at the table, and Nightjar plugged directly into this team, integrating with THE ICONIC’s agile sprint cycles.
“It’s always hard to implement long term strategies in the retail business, with so many stakeholders expecting short term results. With this project we have managed to cater to both — rapid development of reusable components which have the flexibility to see us into the future."
Alexander Meyer, CMO at THE ICONIC
The Results
The key outcomes of the project were many:
1. Content teams are now able to rapidly spin up Campaign and Content pages across the entire site, that not only give them the flexibility to create dynamic layouts, but also tap into their product API, all without developer support
2. During big drops and promo periods, developers are now able to focus on keeping the site functional
3. Full automation of the process
4. Tech and innovation advances — moving THE ICONIC’s tech stack to more forward-facing React from Angular
5. Increased efficiency developing the design system, as we were able to trial new design components which then earned their place in the new system
6. Given precedent to evolve the design of the website (For a full breakdown on the design we’ll be posting a case study on nightjar.co soon 😊)
7. Nightjar ensured THE ICONIC development team could take on the codebase and spin up new modules at will.
“We set up the campaign page in a day, and the adidas marketing team absolutely loved it”
Andrea Bauza, Marketing Merchandise Manager at THE ICONIC
The modules have also fostered a new partnership with Sneaker Freaker, the bible of all things kicks, which combines latest sneaker news with the latest drops from THE ICONIC catalogue, in a blissful marriage of content and product. Have a peek:
https://www.theiconic.com.au/discover-sneakerhub/
THE ICONIC tech team now have a forward-facing solution that will shape the future of their frontend, as well as allowing them to focus on the core product. and Nightjar have worked with some of the brightest minds in the industry and created a useful, scalable design system that will serve them well into the future as the business grows, without the need to rely on us.
