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.
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
My first task for this project was to compile a “visual inventory” of distinct styles and components, which we would present to Naperville to determine which elements and broad styles adhered most closely with their brand. The goal was to outline distinct approaches that would be able to drive a conversation about overall style and web elements.
Community
I started with a focus on the sense of community the city both values and prides itself on. Naperville residents actively seek to be involved in the community and want to know what’s going on in the city. I came up with various explorations to try to capture and extend this same value to the website redesign:
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
The second topic in the visual inventory explored different “flows” or layouts of content. In researching other government websites, I found and categorized some distinct approaches to navigation. Some, such as the excellent gov.uk seemed task-driven; users came to the site with the intention of locating a piece of information or perform some online task. Others encouraged exploration, attempting to highlight different areas of interest that weren’t task-related. The intent here was to determine a direction that was most appropriate to Naperville’s content and their goals with the redesign, to make a distinction between discovery and task completion and attempt to prioritize one or the other.
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
The final explorations covered some vague aesthetic properties of the redesign. To get a feel for Naperville’s preference of color usage, I created two categories: “Bold” (liberal use of color) and “Light” (restrained use of color).
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:
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
The next step in our process was to brainstorm page layouts for some of the various templates we knew we’d need to support from a CMS perspective. We came up with dozens of concepts as a team and discussed them over the next couple days.
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
While part of our team focused on content/template planning and creating testable low-fi prototypes based on our group sketches, I and another designer took what we learned from Naperville’s feedback to the visual inventory deck to create element collages, mockups of specific components we designed from scratch to spark conversations about what we would include in the hi-fi prototype. This was our chance to explore different styles by applying them to components we knew or suspected we’d need in the prototype, rather than something more abstract like a style tile.
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:
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:
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
I was made the lead designer and developer of the high-fidelity prototypes at this point. Taking what we learned from our low-fi prototypes and their testing results, my job was to design and develop a responsive, fully coded prototype that we could test among users for a second round of feedback. I was also to design new components as they revealed themselves, respond to changing requirements, and take any remaining time to refine the style guide and explore new interactions.
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
In our first round of testing the low-fi prototypes we trialed two variations of the header area on the home page (also shown in my final element collage): one with a slideshow and no menu links at all, and the other with three fully expanded menus overlaying the banner graphic. The majority of users preferred the version with the menus on the homepage banner.
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:
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.
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
Lackluster site navigation and content organization was a primary reason Naperville sought a site redesign; the city received too many phone calls asking where to find pieces of information on the website. We had already created a thorough IA outline and prototype, and the low-fi prototype of a multi-level dropdown navigation tested well against our first round of users.
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:
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
The primary navigation on the site was great for new residents or business owners; it exposes key areas of interest to each type of audience as well as exploratory sections like “About” to learn more about the city and “Enjoy” to discover local events. Some of the most popular pages on Naperville’s site, however, fall into the “task-driven” navigation model we explored as part of our visual inventory; residents or visitors very often come to the site with a parking ticket or utility bill in hand, trying to quickly find the appropriate form for payment. Others come with a specific request in mind, for a meeting space or police report.
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:
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:
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
This was an incredible, arduous project. I’m very proud of the work I was able to complete and grateful for the opportunity to lead and deliver the hi-fi prototype to the city I spent 4 years completing my undergraduate in.
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
Audience-specific landing page
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
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
Profile page
Walkthrough page
