Envision. Design. Code.

Examiner.com Case Study

Streamlining online experience accross all devices

full-stack web developer
dev team of 8, 1 product manager, 1 designer
UI Design
HTML5, CSS3, jQuery, PHP, MySQL, MongoDB, Drupal

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.


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 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.

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

Mobile and Desktop new Examiner.com screens
New examiner.com responsive design on mobile and desktop

Lessons learned

The Examiner.com responsive makeover is the biggest design project I have worked on as a web developer. Because we had to combine two sets of large legacy codebase into one and implement a rebranding, collaboration with front-end/back-end/full stack engineers, designer, product manager and business stakeholders was key to deliver a beautiful and functional product on time.

Three main lessons have stayed with me from this project: refactor code and reuse components for better implementation/update, collaborate consistently with stakeholders for a better product delivered on time, use rebranding to improve the UX.