We had to remake the car news site of the 2nd largest Czech Television: iPrima.
Key new features / requirements:
- Fully responsive frontend based on PatternLab
- Backend as a part of the already existing massive multi-site Drupal platform of iPrima - we had to adapt workflows and design principles and work together with the iPrima dev team.
- Car catalogue with custom import.
As an external team we developed the autosalon site to Prima's huge multi-site Drupal platform.
Invision > Patternlab > Drupal
We received the design in Invision and the requirement was to create the front-end fully in PatternLab. It's a toolset for frontend development inspired by the principles of atomic design.
The idea is to break down the design to small reusable pieces, organize them to still reusable larges sets and at the end build the pages. The Invision file contained 48 pages for desktop and another 36 for mobile.
27 molecules, 31 organisms, 11 templates/pages
During the development we decomposed this and created 27 molecules, 31 organisms and 11 templates/pages with PatternLab. At this, while we worked on mapping to Drupal, we already had a testable frontend of the full site, because PatternLab supports the inclusion of test content too.
Drupal Views > Solr
For listing pages Solr queries were used instead of Drupal's default Views module. The powerful Apache SOLR search engine has a flexible query language allowing to reproduce traditional SQL based queries. It's a separate, scalable system in the architecture which holds all the content for classic search, so it's an beneficial solution to leverage it's performance and scalability to take off load from the database server.
Infinite scroll with ads
On multiple lister pages we implemented infinite scroll or load more navigation as a helping aid for the visitors to avoid traditional pager. This UI pattern can help to increase the average time per visit.
An additional challenge was to include and trigger codes of a 3rd party Adserver to add and show new ads upon the infinite scroll.
Car catalogue: Import, related cars
We developed a custom importer script with car type / subtype and related car support to import the car database.
The car catalogue page features the mansory layout similar to Pinterest.com. This enables the displaying of variable sized content elements in a responsive way.