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

The scope

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

Prima Group logo

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

Po obdržaní designu v Invision-e sme najprv celý front-end naprogramovali v nástroji PatternLab. PatternLab je súbor nástrojov na vývoj front-end časti, pričom dôraz kladie na princíp tzv. “Atomic design”.

Základom tohto princípu je rozdelenie dizajnových prvkov na malé, opätovne použiteľné kúsky a následne ich usporiadať do väčších komponentov, ktoré sa dajú tiež opätovne použiť a pospájať ich do sústav, kým na konci  sa vytvorý celá stránka podľa designu. Designov v Invisione sme dostali: 48 stránok pre desktop a ďalších 36 pre mobil.

27 molekúl, 31 organizmov, 11 šablón/stránok

Nakoniec počas vývoja sme front-end portálu rozložili na 27 molekúl, 31 organizmov a 11 šablón/stránok v PatternLab-e. Pri plánovaní štruktúry portálu v Drupale, sme takto mali k dispozícii testovateľný front-end celého portálu. 

Drupal Views > Solr

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.

Custom faceted search

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

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

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.

Katalóg áut: Import a súvisiace autá

Ďalšie jedinečné riešenie pre klienta bolo programovanie import skriptu pre databázu áut na základe ich typov, podtypov a s nimi súvisiacimi autami. To bola riadna relácia tabuliek :)

Masonry Layout

Podstránka katalóg áut mala rozloženie “mansory layout” podobné k pinterest.com. Tento layout zabezpečil zobrazenie kariet áut rôznej výšky, samozrejme vyhovujúc aj responzivite.

3,5M

pageview / month

180k

real user / month

Previous case study
next case study

client

Governmental tax authorities from among 44 countries

Let's create something great together
Reach us here