NDE Transition

Website Redesign

Brief Description

This is a Drupal 7 website I architected and designed for a state department. The client requested that we assist them with overhauling their website. Their website was old while information was unorganized and repetitive.


Rita Hammit


Team lead, Content consultant, Designer, Developer

Technology Used

  • Drupal 7
  • Javascript
  • SCSS
  • HTML
  • Bootstrap
  • PHP
item.left_alt_tag ||
A screenshot of the old website
A screenshot of the new website
A screenshot of the new website

The Process Taken

To help with requirement gathering, I gave the client a questionnaire to determine the purpose of the website and features needed. After the content discovery and inventory process, I created a much improved information architecture. To implement features such as auto-generating responsive images using the picture element, I installed necessary Drupal 7 modules and configured them. I set up various content types and dynamic views to populate the site.

Our team decided to purchase a theme for this website that closely resembles the prototype that I have created. I further modified the theme using SCSS and PHP to suit the needs of our client and also incorporating UX principles and best practices. In hindsight, creating a subtheme would have been a much better approach allowing the main theme to be updated and while still retaining my changes.

Key features

  • Used Drupal Commerce and Rules to create library feature where the public can borrow books. I setup the borrow and return process flow from adding a book to cart, updating the book availability status after it was checked out, to notifying the librarian to send the book to the borrower using Drupal Commerce. I also implemented a reminder system using Rules Scheduler module to remind the borrower that the book is due for return 5 days before.
  • Custom JS using jQuery to toggle between the hamburger menu and search on mobile screen widths. On desktop, it functions to close the search bar when the close button is clicked or when the user clicks outside of the search area.
  • Translated the print version of Transition Guide which I designed into an online format using contextual views and Views field views module.