Autovisie is one of the biggest carnews sites in the netherlands. For this project we focussed on the article page. The bouncerate was high on article pages. While doing a redesign we've added multiple components to keep readers on the autovisie.nl website.
![Autovisie Articlepage Redesign by Milan Houter](https://pro2-bar-s3-cdn-cf4.myportfolio.com/25b640aaafc186c5984f36a6ed18a73c/f42afa28-56a8-4ac7-81e0-a6dba30c32eb_rw_1920.png?h=1d638cbcd1621b6de329945f847ff2df)
Articlepage when scrolled
Fixed breadcrumbs bar when scrolling down. Regular header comes back when scrolling up again. There's also a bottombar showing articles that are relevant revealing after hitting 60% of the article.
![Autovisie Articlepage When Scrolled Redesign by Milan Houter](https://pro2-bar-s3-cdn-cf2.myportfolio.com/25b640aaafc186c5984f36a6ed18a73c/dfe4f068-9388-4b5f-a4d5-f4738fc66df8_rw_1920.png?h=7772a8657ee30338f09f84cd954ad90e)
Articlepage when at bottom
The bar on the left adds motivation & gamification to finish your read. It fills up while scrolling through the article. At the end of the article the line turns into a checkbox to mark the article as read ;)
![Autovisie Articlepage When At Bottom Redesign by Milan Houter](https://pro2-bar-s3-cdn-cf6.myportfolio.com/25b640aaafc186c5984f36a6ed18a73c/729dae27-59a2-4dd1-8260-61da5623979a_rw_1920.png?h=1bb3b1ffc38d64bda3b154886bddfd24)
Articlepage on Mobile
With less real estate we removed several (luxury) elements. Breadcrumbs are gone. The "read indicator" is not here aswell. The "links" inbetween the article are a horizontal scroll element on mobile. Which makes just 1 item visible when you scroll vertically through the article.
![Autovisie Articlepage Redesign Mobile by Milan Houter](https://pro2-bar-s3-cdn-cf2.myportfolio.com/25b640aaafc186c5984f36a6ed18a73c/d9ab6000-6d92-4853-b02d-95263b785d32_rw_1920.png?h=e187a26b3d92e3f977837ad4d4ba4826)