The strategy behind the redesign of Rootstack's website

The rapid evolution of technology has reshaped the way businesses operate. Each day brings new advancements aimed at simplifying life and improving efficiency. Companies that fail to adapt risk falling behind, potentially jeopardizing their success. However, redesigning a website isn’t just about keeping up; it’s about leveraging tools to foster growth and align with organizational maturity.

Although every business is unique, there are universal reasons why redesigning a website becomes essential. Let’s explore these reasons and dive into a practical case study.

Why Should an Organization Redesign Its Website?

To contextualize, let’s examine the example of Banvivienda, a client who chose to redesign their site to enhance user experience. They incorporated features like loan calculators and improved how information was presented. Similarly, at Rootstack, as a software development company, we recognized the importance of showcasing the potential of the technologies we work with, such as Drupal, Angular JS, and Symfony.

Before undertaking our redesign, we identified several key factors to ensure the new site accurately reflected our brand and growth trajectory:

• Optimized Information Flow: Enhancing the way content is structured and delivered.
• Improved User Perception: Showcasing our capabilities clearly and effectively.
• Brand Representation: Creating a site that embodies our organization’s identity.
• Highlighting Achievements: Demonstrating what we’ve accomplished and can deliver.

These considerations enabled us to analyze our position and understand the necessity of adapting to technological advancements. We approached the redesign process in three structured stages: planning, strategy, and development.

Stage 1: Planning

Our previous site was built on Drupal, and we wanted to retain the robust information management it offered. The first step was to identify and categorize services, technologies, and solutions across company channels. Each channel needed to support its content, considering the company’s future growth.

Key planning outcomes included:

• Defining a content structure based on services and solutions.
• Ensuring scalability for future organizational needs.

Stage 2: Strategy

With the groundwork laid, the next phase focused on refreshing the website’s design and improving functionality to better communicate our expertise. We separated the backend from the frontend to achieve faster load times.

• Frontend: We chose Angular JS with Webpack for a seamless and scalable user experience.
• Backend: Retained in Drupal to maintain consistency in data management.

This decoupled approach allowed us to modernize the user interface while leveraging Drupal’s backend capabilities.

Stage 3: Development

The development stage involved building web services to facilitate data exchange between the frontend and backend. We used Services API and Views in Drupal to create endpoints for consuming and displaying information like portfolios, blogs, events, and testimonials.

• Frontend Development: Utilized Angular JS and Webpack to ensure a dynamic, fluid website experience. Webpack provided the flexibility and robustness needed for future growth.
• Backend Development: Developed drivers for URL patterns and services to handle meta information (title, description, keywords) efficiently.

Challenges and Solutions

1. Gradual Migration to Angular

We wanted to incrementally migrate sections to Angular without disrupting the existing Drupal site. This required creating a service to call Drupal, fetch content, and dynamically replace HTML elements.

2. Search Engine Optimization

To minimize the impact on search rankings, we used Prerender.io to generate static HTML versions of pages for search engines to index. Tools like GoogleBot Fetch helped validate cache generation and link redirection.

3. URL Structure Preservation

Maintaining existing URLs was crucial to avoid broken links or redirection issues. We developed services to fetch and apply metadata from Drupal for each Angular-rendered page, ensuring continuity and improved SEO performance.

The Result: A Platform Ready for Growth

The redesigned website has become a scalable platform that will evolve over time. While the frontend is progressively decoupled from the backend, the initial changes have already enhanced user experience and operational efficiency. The process has been a valuable learning experience, equipping us with insights to continue refining the site.

If you have questions or are interested in starting a similar project, feel free to contact us. We’d be happy to help you achieve your goals.

We recommend you this video