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.