What I Learned Building a Large Website

Information Architecture Booklet
Written By: Brian Holmes

Fresh, Exciting, New…and Then Comes the Planning.

A new website is exciting, like buying a new car exciting! There are many thoughts flowing through everyone’s mind such as: “What will it look like?” “Will we have cool new features?” “Will it make our lives easier?” The list goes on and can also include some less exciting thoughts. Updates mean change and change mean work. Today I’ll be covering what I learned building a large website and how our team was able to help guide the client through the excitement as well as the change. I have a lot to share, so I’ll highlight the important areas we encountered during our experience.

One of the first really large websites we developed at Holmes Marketing Services was the redesign of the City of Springfield’s website. The City recognized issues with their site and wanted to improve it for users in the community and staff members managing it. So they came to us because we had partnered with them before, and they were ready for help in making their lives (related to the website) a little bit easier. They wanted a fresh look, new organization, and most importantly, an easy way for their staff to publish current, relevant content. We chose WordPress as our platform because it is a very expandable tool with a huge support base.

Discovery Phase

Before we began the rebuilding process we started with a discovery phase to learn everything ranging from analytics to short and long-term goals each department had. Many departments had the same struggles with the existing site and shared similar hopes for the new site. By taking the time to really understand the City of Springfield departments, we were able to pinpoint all areas in need of improvement.

information-architecture-booklet

This book was developed at the completion of the Discovery Phase. It encompassed many of the notes taken during meetings with the City departments.

Built for the User

Before the new site was launched, the City’s website was organized by departments. We came to the conclusion that this was a barrier because it requires the user to be familiar with the departments to find what they are looking for. To overcome this we approached with a new perspective asking, “What topics are people looking for on the site?” By keeping the user in mind we organized based on what service or information someone might be looking for. Keeping relative topics together made sense for the user and search engine crawling the website.

sitemap-plan

The sitemap went through a dramatic change. Switching the navigational hierarchy from department focused to service based helped condense the main menu and improve the user experience.

Once a new structure was created and we finished up our discovery with a detailed list of what the new site needed to accomplish, we moved on to my favorite part: designing and developing the new website.

During the Design

We needed a flexible layout that was capable of doing almost anything for the design. We did a lot of research on other government websites that had similar content needs and discovered that many of them had a very similar look and feel, consisting of a light layout style. Some of my personal favorites were Hawaii because of how different it was and Washington, DC because of the clean organization and well thought out structure.

Initially, we came up with three mood board concepts, each very different from the other in look and feel. Our goal was to provide two layout examples similar to the favorites that the City Staff picked and also create one wild card layout that was the opposite of what they had initially wanted. The wild card had a darker background.

Mood Board 1

Mood Board 1 was a close runner up in the beginning stages. It was simple flexible and had a similar color scheme to what the actual site uses currently.

Mood Board 2

Mood Board 2 was the concept they chose initially but we did make around 6 more variations after this concept.

Mood Board 3

Mood Board 3 had a few ideas that were re-purposed into the final layout such as using a mixture of imagery & icons with color. This mood board did not make it as far in the revision process.

Each time we presented mood boards, we narrowed down the choices. Initially, the style was between mood board 1 and mood board 2. Through a series of revisions, these were narrowed down to mood board 2, and from it, we worked on the design that is used on the site currently.

Building Your Website for Two Audiences

While building the site, one of the core prerequisites was for the City to be able to edit the website themselves. WordPress is very good at this feature because it provides an easy to use platform that doesn’t require coding knowledge. However, this played a role in how we designed the website because we needed a layout that would be flexible for any use. Not every department had the same needs so updates to the site might be regularly made by one department or made on a case by case basis for other departments.

The layout we created was a grid/tile-based layout. We chose this type of layout because you can easily create various page layouts while maintaining a consistent look and feel site-wide. We knew that the site would grow larger than the previous site due to the new types of content being created and the number of people producing it.

Don’t Plan for Perfection the First Time Through

At certain points of the website build, we had to determine what is needed immediately and what will be needed in the future. Some of the goals we had in our initial plans had to be re-prioritized into a later update after we launched. We had plans of eliminating many downloadable PDF’s on the website but had to put that on hold. This task meant re-creating hundreds of PDFs into a post format and require a great amount of time that would delay the launch dramatically. That is why it is important to remember that a large website should often be done in phases and to prioritize as needed.

Find Ways to Make the Process Easier

One of the most difficult areas of building any large website is encountering the unknown. While building the website we had determined the content needed an easy way to be updated and managed. By dividing up information types it gave us more control of how it was managed and displayed.

A good example of this functionality is the Frequently Asked post feed that is located on each page. Our goal was to include a Frequently Asked Question specific to a single page or multiple pages. Keeping the information separate allowed the City Staff to update information from one area for the whole website and also helped improve search functionality onsite and offsite.

frequently-asked-questions-post-feed

This is a post feed of Frequently Asked Questions that are used in many places across the site. Rather writing content in multiple places all of it is managed in one place and displayed in the rest.

What to do with the Old Content?

Once we had the majority of pages created with a few different layouts, some of the areas that had missing information were places where the content from the old website didn’t translate well to the new structure. This was a difficult obstacle because it meant re-writing and creating new content as needed, which could hold up the site build process. Content takes time to create and not everyone enjoys writing it or editing it. If there is any advice I can give to other developers or people looking to redo their site it is to work together to craft content.

As a developer, let your client know what you’re looking for to create a well-rounded page. If you’re a client, make sure your developer knows the important areas of the content. Nobody can talk about your organization better than you, so don’t leave things to chance.

How did we choose plugins?

Choosing the right plugins was a daunting task because there are a few qualifications that had to be met for the City website. First, the plugin had to be reliable, and we wanted it to be a good long-term choice for an active developer. Sometimes plugins go a very long time without any updates and can cause security vulnerabilities. Also, we looked at how we can have the least amount of plugins possible. Back when we developed the site initially, there were a few plugins that didn’t make the cut because they drew too many resources. Due to a large amount of PDF’s, the enhanced search functionality dramatically impacted the site.

Fine Tuning Before Launch

Finally the best part of the website creation process. The point where all of your hard work is ready to be unveiled to the public. Remember that not everyone on earth will understand every single aspect of your website. There will be many questions about how things work or why did you do this feature this way. If you have stuck to your logic, it will make answering these questions much easier.

Maintaining After the Launch

Launching the site was exciting because it marked the accomplishment of a large goal and the beginning of planning mode. Our goal for the second phase was to watch over the site and see where we could make improvements. That is why I mentioned earlier that the first launch won’t be perfect. Over time the City Staff encountered a few areas that needed to be developed further due to new types of content being introduced. Being aware of these types of changes in the first action. The next action is planning them in a way that works for both you and the client.

Quick Recap

I mentioned quite a lot in this post because this build spanned 6 months, not including the discovery, so here is a quick recap of all the areas I feel that are important when building a large website.

  • Gather your facts and determine what is needed. Ask more than enough questions and really get to know your client. This will help you determine how you can improve their process and save them time.
  • Plan for your audience but also how the site will be maintained and who will be creating content. This could dramatically shape how you build the website and how long it will take.
  • Develop a site map that allows for growth. You can’t predict everything, but you can make it easier to manage.
  • Determine how similar information can be categorized and micromanaged. This will not only benefit you for Search Engine Optimization but also for usability.
  • Simplify the process when possible. Making your site quicker to manage and update in a smarter way without extra effort. Avoid adding features that are unnecessary because they can impact site performance.
  • Identify how you will be crafting content and make a process that works best for both parties. Come up with an easy system for sharing the information back and forth. Email is not your friend.
  • Think about the site as a whole and consider what makes sense currently, in the near future, and further down the road.
  • Don’t be afraid to postpone a feature or update if you have to. The project will not go smoothly if you’re trying to do too much in a short time.

Thanks for reading my very lengthy blog and feel free to ask me questions.

CONTACT US