Car news portal integrated into a huge portal platform
Client: The 2nd largest Czech Television: iPrima
The Scope
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.
The client
FTV Prima, spol. S ro, operates the nationwide TV broadcasting of Prima, Prima COOL, Prima ZOOM, Prima MAX and Prima LOVE. Prima Group operates five free-to-air broadcasters in the Czech Republic and a channel with the Prima +1 channel for Skylinka customers.
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.
Screenshot of faceted search fields and listing
As a key part of the car catalogue we implemented a Solr base faceted search / filter UI for car types where the visitors can filter on model year and motor version to check the detailed specifications of a particular car.
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.
Video player & video advertisements
The site integrates also the iPrima video player which is capable of playing pre-roll ads - video advertisements before the actual video content.
Car catalogue: Import, related cars
We developed a custom importer script with car type / subtype and related car support to import the car database.
Masonry Layout
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.
