The Project

Role: Web Developer / UX/UI

Project Role

I primarily served as the web developer, but was also brought in early in the wire framing process to contribute to the UX/UI.

As the developer, it was my job to take the designer’s mockups and code a responsive custom WordPress theme with cross-browser compatibility that included clean, semantic, and compliant HTML markup.

The WordPress build includes custom post types, custom taxonomies, advanced WP Queries, and Advanced Custom Fields.

UX/UI

According to Google Analytics, the most frequently visited page on the previous site was  the Accessorial Charges page.

Here, clients would look up various charges and fees of the company. The original page organized this data in a standard HTML table that was quite long and non-responsive.

My recommendation was to include a search feature at the top of the table, which clients could use to filter the results. Although the table is loaded alphabetically when the page loads, there is also an option for the client to reverse the display order. These features provided users with various search options previously unavailable.

For the table itself, I made the heading sticky so that the user would always know the heading associated with the tabular data being viewed when scrolling down. When the user hovers over a table row, the background colour changes to further reinforce its  positioning and help maintain user continuity. The table is also responsive and breaks down into an accordion for easy viewing.

Additionally, I contributed on the functionality of the global navigation and modals used for the company’s iFrame needs.

 

Read More

Technologies & Languages

  • HTML5
  • CSS3/SASS
  • jQuery
  • PHP
  • WordPress
  • Bootstrap
  • Bower
  • Gulp

Before & After

Previous Project:

Next Project: