Projects goals and specifics
Our initial goals included a website migration and an overall redesign. As the site has a long story, all pages were well indexed by search engines. So one of the important points was to keep its rank after moving to Drupal 7. Another specifics is that the client was editing the content of the website on the production during the development process, and at the end of the work, we had to get relevant content on the new website. While development we stuck to а mobile-first approach and separated back-end and front-end development.
A clean and user-friendly website design requires a clear website structure. For that purpose, we totally reworked structures of all pages. In collaboration with the Alutech team, we conducted a UX research. We were also given several user stories and types of visitors and with their help, we created a new mind map. Have a look.
Following the reworked structure, we made the layouts less complicated and more intuitive. All in all, the website became responsive for all devices, its UI was reconsidered for the sake of usability. Now the design helps users to reach their goals: for example, the homepage has a clear structure based on the user stories, so a user can easily find any necessary information, get to know the product, and request a service - find or become a dealer.
We created the illustrations for Products and Applications pages, too. See the result below.
Back end and migration
The migration process consisted of 2 rounds. In the first round, we updated a Drupal major version - from 6 to 7. With the help of the Migrate module’s API, we developed the necessary classes to migrate content to a newer Drupal version. The second round was all about the website’s redesign and migrating the website to the one with a new structure. During this round, we implemented the responsive theme that renders perfectly across all devices. Besides, we significantly reworked the website structure - fields, relations between the main entities, etc. and optimized it. It let us simplify the workflow both for content managers and for developers.
It’s worth saying that the front end and the back end were developed separately. We stayed away from the traditional approach when a back-end developer has to do all his/her work in the first instance, and only after that, a front-end developer steps up.
Separate development gets you rid of waiting for each other. Our front-end developer was able to create HTML-structures of the website pages in parallel with back-end works. When all the works were completed, the back-end developer migrated everything to Drupal.
We had a curious experiment, too. We used Vue.js to execute a front-end part of the Products page. Along with a list of products, this page includes several filters that allow users to find the products of interest quickly. If we used a standard approach, we would probably develop this page based on the Views module’s API. It means that with every change of filters’ state an additional request to a server is sent.
We knew that a number of products would be limited, and we decided to display them all to a user at once and filter the products on the client side - just showing a part of the content. This way, we managed to avoid an extra server work and the search works on-the-fly.
We’ve gone a long way: from a Drupal 6 website to a totally reworked Drupal 7 site. We made a new fully responsive design that looks great on all types of devices. This and the new structure make a user journey more delightful and definitely appeal website visitors more than ever.