Car news portal integrated into a huge portal platform
Car news portal integrated into a huge portal platform

Car news portal integrated into a huge portal platform

Client: The 2nd largest Czech Television: iPrima

more case studies ›

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.

Previous case study

Next case study