As an entity grows, their website should grow with them. The City of Salisbury’s website hadn’t seen a redesign since early 2012. The City leadership mentioned that the website was not a primary focus for them. Until they put out an RFP in August of 2016.
The City of Salisbury needs a website that reflects our commitment to transparency in city government.
Jacob Day – Mayor (2016)
A total of 26 businesses responded to the RFP. I was ecstatic to find out in early September that my bid won. Soon we started into the early consultation and planning phase, with a whiteboard session. Our goal was to synthesize both the assets and challenges down to a sitemap. After we agreed on a sitemap, I was able to begin working on prototype designs.
Developing a prototype
The prototype needed to carefully considered the needs of 11 very different city departments. There was a lot of legacy content that I had to preserve. This legacy content was on three different websites but needed to be joined into this one new website.
After considering all of the possible users and use cases of this website I knew it had to be extremely flexible. My design also needed to rigid in all the right places. Navigation needed to be extremely simple, but despite all the flexibility it all needed to look and feel very cohesive.
I decided to implement a block layout for this website. The block layout would afford the site two benefits. Blocks allow for great amount of flexibility, allowing the city to place sections where they are needed. Block layouts also mean information may only be presented in a handful of different arrangements.
After presenting the prototype, the Mayor’s office absolutely loved it.
Design & Development
They asked for very minor tweaks and I got to work solving some of the higher level challenges. I began putting together as many blocks as I possibly could. I designed blocks that could display a single video or video gallery. The city needed a way to present events, so I designed a block for events.These blocks allow almost any kind of data to be presented on any page.
I decided to use a slide out menu due to the possibility of top level navigation items growing beyond 5-7 pages. This slide out menu ended up being one of the best possible decisions I could have made. The menu works excellently on mobile and desktop browsers.
I also gave the city the option of featuring specific menu items outside of the menu toggle. You can see many of the pages the city would like to guide you to being featured above like Report an Issue, Citizen Services, and pay a bill. We wanted to reduce the number of clicks a user would need to get to where they are going. That sitemap from early on in the project really helped make this part of design clearcut.
After presenting the polished design roughly three and a half months later. I was given the go ahead to pull in legacy content and get it on a server.
Making Performance First Priority
Now that we had the website out on the internet and in the wild, it was time to make sure that it was performant. I implemented lazy loading of images and videos, as well as caching both in the browser and at the server level.
Also some tools were installed to reduce the size of assets uploaded by city employees.
For a site of this size we came away with some pretty impressive performance numbers in the page load time. The home page is an image heavy page with lots of assets and blocks being loaded. Both Twitter and Instagram APIs are being hit in addition to Youtube on this page. This page still loads in well under a second regularly.
Training and Education
Now that we had all the development behind us it was time to make sure the City had the knowledge of how to use their website, this was the most vital part of the whole process. I spent a little over a full work week training members from each city department how post to the website and update their own department pages. We started with classes of three departments at a time sending their employees. After training every department I began one on ones for employees who didn’t pick it up the first time.
All together I trained 60+ city employees how to run the city website.
The site had to be simple to update and easy to train so that the I.T. Department wouldn’t get bogged down make content changes on the website. Each department got their own logins and only has permissions and abilities to change their own content. This makes the information of each department able to move much quicker than submitting a change to the infrastructure team and waiting for them to implement.
After everybody was sufficiently trained each department got to work updating their pages.
Review & Launch
The departments were given deadlines by the Mayor’s Office and we began the review process making sure each rabbit hole had answers, each contact point had a form and at least one recipient. After all this work was done I was very proud to announce the new website with the city.
Check out the video below of the announcement of the site.
Check out this article about the website launch in the Salisbury Independent!