Examiner.com's responsive redesign

About Examiner.com

Examiner.com was one of the biggest new websites and built on Drupal, a PHP content management system.

Our team of less than 10 people included a product manager, a designer and front-end/back-end/full stack developers. I was a full stack developer. Most of my days involved writing PHP, HTML5, CSS3, jQuery and the remaining time included code/design reviews and collaborating on decision-making.

Challenges

Examiner.com was built as 2 websites: desktop and mobile. In order to create a more consistent and enjoyable experience for the users and ease features update for the dev and content teams, we decided to redesign the examiner.com product with a responsive overhaul.

For a better user experience, our goals were to focus on:

  • merging the 2 websites into one responsive website,
  • refining the menu,
  • displaying more relevant content on article pages,
  • improving content creation.

Old Examiner.com
Old examiner.com

Responsive design's strategy

A new color palette and a better theme for content display and discovery were the base for the redesign. We made sure to use HTML5 tags, CSS3 properties and Sass to be up-to-date with the newest standards and technologies. Also, we created multiple JavaScript scripts for more real-time and interactive features, including for the creation of complex content types.

The new Examiner.com's reveal

After a few months, the new responsive website was released live successfully. The unified website, updated look and improved features were major improvements from our previous version and were a stepping stone for more user engagement and reach in future projects.

  • New Examiner.com on desktop
    New examiner.com on desktop
  • New Examiner.com on mobile
    New examiner.com on mobile

For more details on the implementation, we created a presentation that we gave to multiple meetups.