Architectural Designs (AD) is the leading house plan source in the United States. As a family-owned business (four generations and counting!), Architectural Designs is dedicated to providing the highest-quality home plans from over 200 of the world’s best architects and designers.
AD’s business transitioned from mail-order to virtual in the early 2000s, and its web presence has gone through multiple iterations over the last 20 years to keep up with the changing technological landscape.
Though AD’s decade-old website served them well, AD needed to invest in new technologies to succeed in a competitive market.
The challenge: Build a more customer-forward, technologically-advanced website in three months
HFC’s evaluation of AD’s online presence led to three major takeaways:
- Slow page load times, low interaction scores, and high error rates led to lagging site health metrics
- An overly complex codebase was slowing down feature development
- The website’s look and feel were outdated, and there were design inconsistencies across AD’s web presence. AD needed a design system to scale design updates and scale UX improvements.
These three findings signaled that AD’s business would benefit from a modernized front-end tech stack. HFC understood AD’s business and users, and AD knew that they could trust HFC to build them a long-lasting strategy for a stronger, leaner tech stack and improved user experience.
Check out our list of four signs that your tech stack needs an upgrade
With Black Friday only a few months away, Architectural Designs wanted their website live to support the increased traffic and sales they anticipated. When the time came to make a radical change, AD knew that HFC was the best choice for the job: to modernize their tech stack and build a high-performing, resilient website.
Architectural Designs worked with HFC to:
- Rebuild their front-end website from the ground up
- Optimize their website for speed and increased traffic
- Consult on strategy and scaling for long-term success
The solution: Migrate to Next.Js for increased speed, scalability, and resilience
HFC had three months to overcome the limitations and system constraints of Architectural Design’s legacy Rails system and build a tech stack with shorter load times for increased traffic.
Though the timeline was tight, HFC built future feature updates into their plans: they built a front-end codebase based on Next.js that would speed up system and feature updates.
-
- Moving from Rails to Next.js
- Next.js is the preferred library for front-end developers, and developers who specialize in Rails are less common in today’s market
- Building in Next.js is faster and easier than Rails. By moving to Next.js, HFC was able to leverage a modern framework with a robust developer community to build faster
- Faster feature development in Next.js allowed AD to act more quickly and iteratively on user feedback to increase user satisfaction and conversation rates
- Tackling performance issues
- Migrating to Next.js, which renders with a hybrid of server-side and client-side, cut loading time in half
- AD’s initial server setup routed all requests to US-based servers, increasing load times for international users. Deploying Next.js across AWS and Cloudflare distributed their server locations, speeding up load times and making performance more consistent
- Phased migration ensured minimal disruptions while enabling significant overall changes and enhancements
- Removing the limitations of legacy code
- Writing front-end code with Rails was time-consuming and didn’t allow for maximum design efficiency. Migrating to Next.js allowed developers to create a website that was pixel-perfect across all screen sizes
- Working iteratively allowed developers to work faster and test frequently, ensuring page-by-page, line-by-line excellence for launch
- Next.js’s robust library makes it easy for developers to add and improve features, allowing AD to deploy UX improvements more frequently and deliver new features more quickly
- Strengthening AD’s website infrastructure
- On their legacy website, traffic spikes led to long load times. When HFC rebuilt AD’s website, they worked in a containerized framework, allowing faster autoscaling
- Rails-built websites can be more vulnerable to security threats because the technology is out-of-date. Migrating to Next.js increased developer flexibility and, most importantly, security updates
- Decreasing operational costs
- Adopting containerization reduced infrastructure costs by up to 50%
- Rails is a clunky library with significant run costs. Migrating to Next.js significantly cut AD’s operational costs by increasing access to third-party integrations
The results: Record-breaking Black Friday sales and flawless performance
HFC’s strategy anticipated AD’s growth goals and incorporated plans for a more resilient future. AD’s migration to a more modern and flexible tech stack didn’t just build them a better website — it strengthened their business, too, with a 40% year-over-year increase in user engagement after launch.
HFC’s front-end updates didn’t just make AD’s website load faster and look better — they also helped AD’s website become more competitive in a crowded SEO market. Mobile-friendliness is a critical component of SEO rankings; HFC knew this and incorporated responsive design and accessibility into their work to give AD’s website that extra SEO boost.
Architectural Designs wanted their new website tested and live by Black Friday and the HFC team delivered. Working iteratively and testing pages throughout the development process allowed HFC to deliver a website with 100% uptime throughout their Black Friday traffic spike. AD’s newly designed and rebuilt website helped bring in an entire year’s sales in one day, with continued lasting increases in customer retention and satisfaction.
Architectural Design’s new website’s success by the numbers:
- Mobile:
- 41% increase in performance
- 50% increase in best practices
- 33% increase in SEO
- 10.3% increase in accessibility
- Web:
- 42% increase in best practices
- 33% increase in SEO score
- 17% increase in performance
- 17.7% increase in accessibility
“The integration of Next JS has significantly improved site speed across the AD platform and has optimized page load times in a meaningful way. This critical investment in our business was especially impactful during the Black Friday and Cyber Monday sale season, ensuring a seamless shopping experience under high traffic conditions. We saw increased engagement, higher conversion rates, and incredible overall results!” - Kitty Connor, COO
Ready to modernize your tech stack? Reach out to our team
Back to Work
