Redesigning the website for the city of Naperville, IL

The city of Naperville, IL has a bit of a reputation among the Chicago suburbs. It’s commonly listed as one of the best towns in the nation to live and raise a family, with excellent schools, low crime rate, easy access to the city of Chicago, and a vibrant, beautiful community. (On a personal note, it’s also where I spent 4 years getting my undergrad.)

The city’s website didn’t match this description. In 2015, the site still had a 2006 copyright. Users of the site reported great difficulty finding information; content was organized by department, often duplicated under several, which didn’t seem to be the hierarchy users were expecting. The city reported receiving more calls about this than they would’ve liked.

Naperville’s website circa 2015 (for comparison purposes only with no disrespect intended to the original designers)

By June of 2015, the city decided it was time to update its website and turned to WSOL to spearhead this project. I was a designer on the creative team at WSOL during that time, so I was roped into the project after some preliminary phases (including IA planning) and eventually given the privilege to lead the design and development of the site redesign.

Visual inventory

Community

Community-driven explorations for web elements, sourced from Dribbble or public sites for presentation purposes only

The goal with these concepts was to spark conversations about nonconventional ways to incorporate such elements and instill a sense of community in the site. I followed WSOL convention and listed trade-offs for each idea, such as a photography-heavy design requiring a refresh strategy to avoid looking outdated. Despite these trade-offs, Naperville was receptive to each idea and open to further explorations in all three areas.

Flow

Flow-related explorations, sourced from Dribbble or public sites for presentation purposes only

Naperville decided the latter approach was most relevant and applicable to the redesign’s goals and new information architecture. This was fortunate, as it matched our internal goals for the project following the IA outline and prototype.

Aesthetics

Aesthetic explorations, sourced from Dribbble or public sites for presentation purposes only

Naperville preferred the Light variations, which was affirming as we leaned toward that option internally for various reasons. It would also compliment the photography-heavy approach we had agreed upon prior.

The final explorations were in typography for headings and body copy:

Typography explorations, sourced from Dribbble or public sites for presentation purposes only

Naperville immediately ruled out the slab variation and weren’t receptive to serif fonts for body copy either. They liked the idea of a serif for heading, but weren’t pleased with any of the fonts sampled in the slides. This feedback was taken into account when developing the element collages.

Sketches

Some initial sketches for page layouts (right two: mine)

Common patterns emerged in our sketches, giving us a clear enough direction to create low-fi prototypes of interactions and layouts without any visual styling beyond shades of grays and placeholder images.

Element collages

Our plan was to develop two variations each (four in total), present them all to Naperville, and create a second, more refined set using their feedback. Here were a few from the first set:

Some initial element collages (left: mine)

Naperville wanted to move forward with a combination of the above two collages. I was given the opportunity to create the second version while our other designer tended to another project. I tried to synthesize some of the ideas that had come up in our brainstorming sessions and introduce new concepts for components we knew we’d need. I thought it’d be a good idea to present an engaging banner with some of the quick links we’d prioritized, solidify a color scheme based on the two initial colleges, and mock up engaging ways to handle some of the task-driven flows on the site. This is what I created:

Second element collage

We sent this to Naperville for feedback and they responded positively to most of the concepts and the overall direction. By this time, our interaction designer had already created and presented low-fi prototypes of the new navigation and page layouts, and an IA outline had been developed and agreed upon. The next and final step in the design process was to translate the ideas and styles in this finalized element collage into a coded high-fidelity, responsive prototype.

Hi-fi Prototype

At WSOL we had started using Angular to mock components and pass them JSON files instead of hardcoding data as HTML. I continued this trend for Naperville, marking up the different page layouts with HTML and using Angular modules for the components. I used Sass instead of CSS so I could iterate quickly on colors and implement a modular scale with mixins. (We hadn’t yet used a pre-processor in a production site at WSOL, so this was a first.) Each Angular component was structured and marked up as a BEM-compliant module.

Here are some highlighted components from this process, and how they all came together in the final deliverable:

Pods

Unfortunately, this posed some design issues. It was clear that the large clickable “pods” under the banner image on my second collage weren’t quite enough; users needed quicker access to links inside each category. But expanding each menu by default had drawbacks as well: there was no guaranteeing that each section would contain the same number of links, so pods would end up having different heights. Combined with the site header and navigation present on each page, there was a major height issue as the pod feature started to grow larger than the banner image.

I started experimenting with solutions for these drawbacks and came up with the following “morphing” approach:

Prototypal homepage pods (mouse support, wide view)

I wanted the default state of the pod to give a quickly scannable excerpt of what was inside. To fix the height issue, I only displayed 3 non-interactive menu items on each pod (3 as it’s small enough to both scan quickly and give an accurate representation of the full set). I shrunk these non-interactive items to fix the height issue while giving them a more generous amount of space once expanded.

Prototypal homepage pods (narrow view, no mouse support)

The experiment was a success, and users responded very positively to this concept in our second round of interviews. Participants reported being drawn immediately to the boxes and finding the containing links very helpful. They greatly enjoyed the interaction of revealing more links and the look and feel of the top content area in general. Considering how important this area was in setting a first impression for the site and providing a springboard for common actions, it was a huge relief to receive such reassuring feedback.

Primary navigation

Low-fi prototype of the primary navigation (wide screen)

My job was to take the low-fi implementation and develop an engaging multi-level navigation system to help users get where they needed to go. Unlike the low-fi prototype, I wanted to make it a key focal point of each page:

Hi-fi prototypal primary navigation (mouse support, wide view)
Hi-fi prototypal primary navigation (narrow view, no mouse support)

In the second round of interviews, users were able to find the content they needed and commented that this navigation set-up seemed logical. Many users preferred the simplicity of the new navigation system. Although Services was the only section with another sub-level of menus enabled, this navigation model made sense to users because of the amount of content in this category. They also liked that the fly-out menus were not difficult to interact with, unlike the existing site.

Task-driven navigation

It was important initially that we design a navigation system for these users as well, as they made up a considerable portion of the site’s traffic based on the analytics we saw. At first we prioritized this task-driven “action” navigation by making it an expandable sticky menu at the bottom of every page:

Low-fi prototype of sticky “action navigation” interaction

This approach didn’t test well with users in our first round of interviews. Conceptually, users were in favor of the menu, but most users found the labels ambiguous with the sub-items hidden. Some users failed to notice the menu bar altogether. After that first round, we took the sticky footer concept concept back to the drawing board, with the goal of making the links more naturally discoverable.

I played around with a few variations but was unable to come up with a solution that kept the navigation sticky while also addressing the ambiguous sub-item concern. I ultimately created a fully-expanded version as a static element before the footer of each page:

Hi-fi prototype of action navigation (wide view)
Hi-fi prototype of action navigation (narrow view)

This approach tested favorably against users in our second round of interviews. Users found the footer action links helpful, commenting that the area felt “well organized and grouped related things together.” (One user noticed the bottom action links, but commented that the top navigation and the homepage links were enough.)

Final deliverables and retrospection

Since launching the redesign, the site has received the North America Customer Website Award from Episerver in their Customer Service category, with the site “being noted as one that met the goals and needs of a variety of audiences”. Communications Manager Linda LaCloche who accepted the award commented:

Our City’s website is not only a key marketing tool for the City of Naperville, but it is an important avenue by which our residents, prospective and current citizens and businesses receive City information. When we partnered with WSOL, a full service digital agency and Episerver partner, to relaunch our website almost two years ago, creating a better online experience for our customers was the primary goal. To be recognized on the national stage for these efforts is exciting.

For sake of completeness, the following are screenshots from the final hi-fi prototype deliverable, as well as some notes from user testing. Thanks for reading!

Home page

Final home page prototype (wide view)

Audience-specific landing page

Final audience-specific landing page prototype (wide view)

All participants in our second round of testing greatly appreciated the Residents page. One user, who just moved to Naperville in August, commented that this was exactly what she needed. The top featured content and the “What Residents Should Know” area were well received, and users found all the content very helpful. When tasks were given, all users responded that they would expect to find the content in the Residents as well as inside the Services pages.

Services page

Final services page prototype (wide view)

Users had a similarly positive reaction to the services page template. In particular, they were in favor of the prominent call-to-action blocks (e.g. Pay parking ticket or Purchase a recycling cart) and the “Did You Know” content.

Article page

Final article page prototype (wide view)

Profile page

Final profile page prototype (wide view)

Walkthrough page

Final walkthrough page prototype (wide view)

Dedicated problem solver with a passion for learning and iteration.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store