Buy Side from WSJ
- Website
- Development
- Technical Strategy
The Wall Street Journal came to us with a big challenge: build a new product vertical for them, from the ground-up, in just three months. We love a good challenge, and set out to make it happen.
Wall Street Journal’s Buy Side was actively being designed internally as a new vertical for high-quality product recommendations from a storied and trusted source. They needed help from a nimble team of experts that could execute with forward-thinking technology. The goals of the project were actually two-fold: while the primary goal was to launch the new vertical, the secondary goal was to propel the usage of a new tech stack within the organization.
Our team quickly put together a strategic plan of execution to ensure we could meet the aggressive deadline. We pursued development on three separate fronts, which dealt with three separate groups within the organization: the website architecture, the content management system integration, and the analytics implementation. Buy Side launched successfully and on-time in June 2022 to significant fanfare across the organization and the readers of the Journal.
12
Weeks from zero to launch
1,000+
Recommendations in the first year
187%
Year-over-year growth
The Wall Street Journal found themselves often making informal product recommendations in the course of their day-to-day news and media content.
Utilizing the trust they’ve earned with their readers, the WSJ team wanted to formalize and build a platform around their recommendations. To do so, they needed to launch a new, standalone vertical within the WSJ.com website, along with an independent product research team.
We began by first drafting an architecture plan based on the designs we were provided by the Wall Street Journal design team.
Architecture
The object of our initial planning session was to translate the information architecture, as designed, and create a development plan for all pages, layouts, and components our team would need to address.
Once we developed a clear roadmap from design to development, we wanted to identify any efficiencies we could utilize.
To do so, we looked to the WSJ team for any existing elements that we could rely on from within the organization’s existing reusable components libraries, which gave us a healthy head start. From there, we were able to begin developing the building blocks of the site, the base-level components, in isolation.
In parallel, we worked with the WSJ team to identify what data we would need to retrieve from the content management system and began developing the API layer for the frontend.
Development
We developed the website through a series of rapid iterative sprints, progressively bringing us closer to the completed website. Utilizing Next.js, Styled Components, and Storybook, we were able to rapidly develop each core component to spec. Once the core components were developed, we then took the opportunity to adapt or redevelop any of the shared components to fit the needs of the new Buy Side site.
Performance
Next.js allowed us to develop a highly performant website within this timeline. Server-side data retrieval from the CMS allowed us to generate fully-rendered pages quickly, with the rendered content being pushed into a cache and rapidly retrieved for multiple visitors. Dynamic client-side integration with authentication, as well as lazy-loaded images, allowed us to keep render and time-to-first-byte overhead low.
After completing the components, we used Next.js’ structure to develop each route and layout, rapidly piecing together each section of the site.
We were ultimately able to:
- Prove that a Next.js-based platform and architecture was viable and performant for the Wall Street Journal
- Enable a wider variety of components and content types, even in this short period of time.
- Helped improve the organization’s shared component library and have since continued to expand their available tooling.
- Launch on time and on budget to help drive millions of dollars in referral revenue through recommended products.
