Challenge
Quick re-build of Strategic Technology Assessment homepage. The goal was to modernize the look and clean up the content, then add additional content around vending the Methode software for government buyers.
Solution
The former website was built on WordPress with a WordPress template. The template was out of date and parts of it were longer supported. I looked into updating the template then decided to move forward with a Squarespace template that would be easier for STA to manage independently.
The website required a fair amount of custom code to implement two key design requirements:
The first was a subnav of anchor links which would pin to the top of the window on scroll and return to below the header when the page returned to the top.
The custom code I wrote was some markdown and css to transform a long excel document of modules and prices into a more responsive-friendly easy to read list where the information is incorporated into the visual hierarchy instead of given a unique column.
To accommodate the long list of modules and prices, I re-designed the subnav to help users navigate around the page without losing their place.
Learnings
Responsive design is particularly challenging for complex tables. I am proud that I figured out how to translate an Excel spreadsheet with eight columns of unique information per row into a single block of responsive content with a visual hierarchy that made it useful but not overwhelming.
Before Refresh
Below are some screen captures of the website before the refresh. It was built using a wordpress template. Items like the accordion in the header were not functional due to updates to the wordpress that were no longer compatible with the older template.
After Refresh
Below are screenshots taken from the site after the refresh. Some detail shots of the page where Methode license information are included, showing the responsive packaging and visual hierarchy for a single-cell formatting of the information in the large multi-column table I was given to work from.
The website is up and can be viewed in its current form at stagov.com
