State Website Design Process
If you’re interested in creating a new website, the Chief Marketing Office should be your “first stop.” They will meet with you to discuss your overall communications needs and how your website will fit into your marketing plan. They can also talk you through the options, process and timeline for creating a new website. Email the CMO’s Office or call 477-2727.
Here’s a quick summary of the web design process and some helpful examples and resources.
Step 1: Needs Assessment
The first step is to reach out to the CMO’s office and discuss your web communication needs and determine if your site can be mapped to the standard web design template, or if your agency or department has custom needs.
State agencies are strongly encouraged to use the template whenever possible, because it speeds up the development process and saves money. You should understand that the word “template” does not equal “inflexible.” In fact, the state template offers many opportunities for customization.
A new revision of the state template was released in the Spring of 2015. Some of the features included in this geenration of the template include:
- Responsive design (elements will shift depending on size of viewing device, so fully tablet and mobile friendly)
- Updated look and feel, with options for placement of elements within a multi-column region-based structure
- Multiple styles available for slideshows and widgets (text-based, image-based or based on a standard library of icons)
- Optional top navigation with drop-down multi-column mega menu for secondary navigation
- Fat footer, with standard placement for contact info and social media links, plus three columns for additional menus or widgets
- Content tags (optional, set by site owner and appear at bottom of pages, act to aggregate content by topic)
- Document library (sortable by all fields, including category as set by site owner)
- Aggregated content feeds available for news, events, press releases and blogs/newsletters (any dated content)
- Events calendar with views by list, month, week, day and year, sortable by event type and event location
As of this date, the majority of websites transitioning to the new state template are still under development. However, several examples of “live” sites in the most recent template include:
- This Department of Information and Innovation Site
- DII's Chief Technology Office
- Office of the Defender General
- Vermont Commission on Native American Affairs
- Vermont Public Safety Broadband Commission
- Speaker of the House Shap Smith
The CMO's office is available to assist site owners with design mockups before development begins (see below), which offer some additional examples of how the state template can be customized:
- Department of Human Resources [draft only]
- Department of Liquor Control [draft only]
- Office of Lt. Governow Phil Scott [draft only]
The remaining steps in the process assume you have elected to use the template.
Step 2: Discovery
Next, think about who your customers are, what information they need from your website, and where they are likely to look for it. This information will help you determine what content should go on your website and how it should be organized.
For small sites, this "discovery process" can be done internally – and the CMO’s office can help you. For larger, more complex sites, you may need the assistance of an outside vendor. DII maintains a list of approved web design vendors who are familiar with the state web standards, template functionalities, and hosting environment. DII can also help you write your SOW to request project bids, and they are happy to review proposals with you to ensure you select the vendor that best meets your needs.
Step 3: Site Mapping & Design Mockup
Next, you’ll sketch out a blueprint of your website, showing how each page will look and function, and how all of the pages link together. Here are a couple of examples of site maps: the first is a simple site map and the second is a more complex site map. Either your internal IT team or your selected web design vendor will work with you to create the site map.
You’ll also need a set of template design mockups to show which colors you’ve chosen and which template features you’ve decided to use for each level of your website. The CMO’s office can design these for you.
Step 4: Content
Once you have a sketch of the sections of your website, it’s time to create and cull the images, text and documents that will fill them. As you gather your content, you may realize that certain pages in your site map need to be combined, re-organized, or removed. This is also a perfect opportunity to update and refresh content that’s on your current website.
Step 5: Programming
Next, you send your site map and template design mockup to DII and let them know you’re ready for buildout. DII will review your documents to ensure your site proposal matches state web standards and will sign off on your project. They will then assign your site a priority rank in relation to other state websites awaiting development, and will refer your project to the Vermont Information Consortium (VIC), which is the vendor under contract to build and host all state websites.
Step 6: Launch & Training
Once VIC has finished the site buildout, your empty template is ready to be populated with your content. DII will set up a training session to show you how to enter and update your content. The Web Content Management System (WCMS) is a “What-You-See-Is-What-You-Get” (WYSIWYG) editor and looks similar to programs like Microsoft Office that you use every day.
Step 7: Maintenance & Traffic Building
But you’re not done yet. Just because you’ve built a new website doesn’t mean “they will come.” You need to continually drive traffic to your site through promotion, content updates and traffic analysis. (At site launch, DII will set up a Google Analytics account for your key site administrators.) The CMO’s office can help you analyze your traffic data and develop a plan to maintain and promote your new site.
If you have questions about the web development process, give us a call or Email the CMO's Office .