The strategy behind the redesign of Rootstack's website

Every day comes with improvements or new technologies, which aims to make life easier. In the world of technology we understand that if we do not adapt to change and ride the train of this revolution, our company will lose ground and consequently their failure down the road. But that's not the only reason, the key factor is to use the tools available and our power to continue the growth and maturity of the organization. Each company is handled in different ways, but in the end, there are general reasons for the redesign of a company's website, which many companies will feel related to, so, the question is: ###Why an organization should design your website? To enter context, we can analyze the case of [Banvivienda](https://www.banvivienda.com/es), where our client decided to redesign their site for a better experience for their users through new functionalities such as a loan calculator modules and improving the way information is displayed. In the case of Rootstack, we continue the process of redesigning our website, because as software development company, we must showcase the possibilities, benefits and scalability that have many of the technologies we work with, such as[Drupal](https: / /www.drupal.org), [Angular JS](https://angularjs.org/) and [Symfony](https://symfony.com).  Before making the decision to redesign our website, were taken into account key factors that differentiate us in the market and show our institutional evolution such as: - The current approach and information flow - The user's perception of what we do as a company - A site that represents the brand and organization - Communicate what we have done and what we can do. These factors allowed us to make an internal analysis and understand that we must adjust to the ever-changing world of technology. To give continuity to the redesign process, we divided it into 3 stages. ###Planning We had a site done in Drupal so we wanted to keep the management of the information we have had for years and build upon this information structure. One of the main requirements was to identify and categorize all the services, technologies and solutions through different company channels. Once defined, taking into account the future growth of the company, each channel had to support its own content based on services and solutions. ###Strategy With the first phase of the site's redesign, we needed to refresh the graphic line of the site and look for a better way to convey what we do. In order to apply the knowledge we have developed for our customers, we decided to separate the backend from the frontend in order to have a much faster loading time.  We decided to use [Angular JS](https://angularjs.org/) with Webpack for the Front-End, and taking into consideration the need to keep the same information structure, we decided to keep the Back-End in Drupal. ###Development. We built web services to consume information and to enter information to the backend in Drupal. We use [Services API](https://www.drupal.org/project/services) and Views to build the services that we would use to consume information: Portfolio, Blogs, Events, Testimonials and case studies.  For the front-end we decided to use [Angular JS](https://angularjs.org/) together with Webpack. The decision to use Webpack was thinking how the website can grow in the future, because our goal was that the website felt more much more fluid for the visitors and the bundle provided that flexibility and robustness we were after. ###Challenges The first challenge was that we wanted to change the home page and slowly migrate sections to Angular. To achieve that, we needed to continue viewing the site in Drupal but Angular was the application that loaded, removing the header and footer of the "old" site. Due to that, we implemented a service that is responsible for making the call to Drupal and when it receives the response, removes and replaces certain information in the HTML of the site before loading. The second requirement was that we wanted to affect the search engine rankings as little as possible. Since the application is built on JS, we decided to use the service [Prerender.io](https://prerender.io/) to generate an HTML version of the site's pages so search engines could index that content. A useful tool that helped verify that it was generating these caches were functioning correctly, as well as the redirecting links, was the [GoogleBot Fetch tool](https://www.google.com/webmasters/tools/googlebot-fetch). We also wanted to keep the structure of URL's we had so far and not have to deal with redirections. We develop drivers for each pattern of URL's and a service to bring information title, meta description and meta keywords from entering Drupal and for each rederized page through Angular application. Upon completion of the development process, we found a new site, which is going to grow over time, where we will slowly make the transition to have the front-end completely decoupled from the back-end. The experience has been enriching and we continue to build and improve it with new knowledge we develop. Any questions or comments whether to carry out a project or just want to say hello, feel free to [contact us.](http://rootstack.com/en/contact)