Redesigning DOH Web Pages<br />A New Template – Lisa Schell – 10 February 2010<br />
Introduction<br />Overview:<br />Objectives<br />Process<br />Template<br />
Objectives:<br />Design a template for all 14 NC DOH  pages<br />Provide consistency with NCDOT site look and feel<br /> I...
Process:<br />Reviewed 14 division sites<br />Reviewed other NCDOT pages<br />Looked for customer service-oriented informa...
Process:<br />Created a general site map<br />Elements that must always be present<br />DOH specific elements that must be...
Template Design:<br />Assumption:<br />Template will follow current look and feel of NCDOT site<br />
Division Information:<br />Division Map (interactive)<br />Contacts<br />Construction<br />Maintenance<br />Operations<br ...
Contacts:<br />List of division personnel and phone numbers/email address<br />Who do I call if?<br />Link to main NCDOT C...
Information for Contractors:<br />Project List<br />Register to be on Bid List<br />Bidder Qualifications Requirements<br ...
Local Projects <br />Statewide NCDOT Stimulus Projects<br />About ARRA<br />More Information for Travelers and Motorists<b...
Stormwater management on NCDOT Projects<br />Stormwater Control on Existing Roads and Highways<br />NC Wildflowers<br />Sc...
Media Carousel highlighting events in the district; links to news releases, video, photo galleries<br />Interactive projec...
Recap:<br />Integration with existing NCDOT Web Site “look and feel”<br />Standardization of key information for business,...
Resources:<br />Slideshare:<br />http://www.slideshare.net/lischell/edit_my_uploads<br />
Upcoming SlideShare
Loading in …5
×

NCDOT DOH Template

1,130
-1

Published on

A proposal to design a web template for use by the 14 North Carolina Division of Highways to unify the individual sites, and connect them to main NCDOT page via look and feel. The project also seeks to improve user friendliness of the pages.

Published in: Career, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,130
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Thanks for inviting me to come back and to do this exercise…it was a lot of fun….and I even had a little help from a 7 year old, who told me to tell you that NCDOT needs a web page that shows step by step how roads are built.
  • What were my objectives for approaching this redesign?The main objective was to standardize information on the 14 individual division web sites as well as make them look like they are all part of the department, part of the same organization.At the same time, useful information – the things most people who visit the division pages are looking for – needed to be easy to find and understand.
  • Interestingly, at DENR we are going through a similar exercise- revising the entire DENR front page and several of itss“child” pages – I am leading the team doing this, and we started out by looking at the analytics on the site, then making sure the customer service center director was a part of the team. If I were doing this here at DOT, I would take a similar approach, making sure customer service experts and division personnel are involved – we need to know what topics they receive the most inquiries about, and what people complain about most…..In the absence of that, I studied the current division sites, looked for commonalities in topics on the pages, looked at the rest of the DOH pages, even read the McKinsey study.I also noted the many inconsistencies on each page – some of them had something of a template in place, others did not.In deciding how to build the template, I approached the content from a customer service angle – realizing that there are four major users to the division sites – contractors and others looking to business with DOT locally, local governments and residents who want local information on projects and road conditions, and travelers.I also keep DOT’s own initiatives and the Governor’s in mind, including transparency, economic recovery and openness.
  • So, the nuts and bolts: I created and revised a site map for the template – laying out elements that must be on the page and building in some components for individualism and character of the 14 different divisions. This is something that we wrestled with at the NC Aquariums and at DENR…..
  • A quick look at the site map…..
  • So, I am still a little old school. I Sketched out a rough layout the old fashioned way on grid paper – again using the main DOT site as my guide.…and I approached the template with the understanding that the current design of the main DOT pages would not be changing.Before we look at the new design, let’s look at one of the current sites….
  • This is one of the pages that looked like a template of sorts was in place…..but there’s wasted space, and not a lot to go on if you are really looking for some thing specific…..
  • And here’s my revision….I will walk y’all through this step by step but the first thing that should be noticeable is the way it matches the overall look and feel of the main DOT site….
  • Piece by piece -- First thing to note is the Department Logo banner – unifying the division page with the department’s; this makes it clear it’s part of the NCDOT family; logo, picture and important tag line….
  • This Division banner allows for the individuality of the page to be established; all 14 division banners should have a similar design; but the intro text box is the key – it identifies where this particular division is and allows for some personality. For Div. 14, I included a link to scenic byways in the relevant counties– which are a huge part of our state’s identity, economy, natural resources, and this department’s influence as well.
  • Thenavbar here will point visitors to what I believe are topic areas most looked for when people visit these sites. Key here is the obvious Contacts link and seach bar. Here’s where customer/user service comes into play: I placed emphasis on helping contractors, subcontractors, people who are looking to do business locally with NCDOT, local officials and then residents who want information on road projects, closures or conditions in their neighborhoods and counties as well as litter pick up, etc. find what they want.Secondary to that is general travel info. I chose to focus more on the contractors, based on my review of the web sites and the commonalities I found there. I envision the nav bar as a Mega-Menu, which when clicked will provide a stationary menu of links for choose from – kind of like the REI web site….
  • Just to illustrate…..what would be in those mega-menus…..
  • On the side bar – I took a similar approach, but with some redundancy as far as topics where concerned. These bars could be expanding, as they are on the main NCDOT pages, or they could be balloon drop downs – either way, they open up with the additional choices for the user…..
  • Stimulus information is critical, to both local leaders, taxpayers, and of course the Perdue Administration….so information about recovery projects in each district needs to be in the main menu…..In the info for traveler’s – here’s one place to again promote the Twitter updates – I understand people are often calling and asking about rest stops and visitors center – so a link to an interactive map would be excellent to have….
  • I would be remiss, given my background if I didn’t include a major section on DOT and the environment….and besides, environmental sensitivity is in the department’s tag line. This is an area where we can highlight the new and improved DOT and work toward changing the attitudes that may exist about the department, And there are plenty of programs to do that…...
  • The media carousel is another place for the division to show some individuality……also since project information is a major service these sites can offer – I decided the DOT’s project finder was a great thing to plug in to each division page. More choice, more ease of finding that information, which is sometimes hard to consistently find on the division pages as they exist now.
  • And while the project finder is great for smaller projects, each division page should have a section to highlight major projects underway in its counties – the ones likely to be receving the most attention. This is just a placeholder here – but you get the idea.As we know, the Governor and Secretary Conti have made open govt. and social media a priorty – so each division’s page should have an obvious link to its Twitter regional update.
  • NCDOT DOH Template

    1. 1. Redesigning DOH Web Pages<br />A New Template – Lisa Schell – 10 February 2010<br />
    2. 2. Introduction<br />Overview:<br />Objectives<br />Process<br />Template<br />
    3. 3. Objectives:<br />Design a template for all 14 NC DOH pages<br />Provide consistency with NCDOT site look and feel<br /> Increase and improve user friendliness<br />
    4. 4. Process:<br />Reviewed 14 division sites<br />Reviewed other NCDOT pages<br />Looked for customer service-oriented information<br />Considered Dept. and Governor’s initiatives<br />
    5. 5. Process:<br />Created a general site map<br />Elements that must always be present<br />DOH specific elements that must be on site<br />Used site map as architecture for template<br />
    6. 6.
    7. 7. Template Design:<br />Assumption:<br />Template will follow current look and feel of NCDOT site<br />
    8. 8.
    9. 9.
    10. 10.
    11. 11.
    12. 12.
    13. 13. Division Information:<br />Division Map (interactive)<br />Contacts<br />Construction<br />Maintenance<br />Operations<br />FAQs<br />Jobs<br />Employee Information<br />Contract Opportunities:<br />Project List<br />Register to be on Bid List<br />Bidder Qualifications Requirements<br />Minority and Small Businesses<br />Doing Business with NCDOT<br />Directory of Approved Transportation Firms<br />Publications and Forms<br />
    14. 14. Contacts:<br />List of division personnel and phone numbers/email address<br />Who do I call if?<br />Link to main NCDOT Contact page<br />Bid Awards:<br />List of recently awarded project bids in the division <br />
    15. 15. Information for Contractors:<br />Project List<br />Register to be on Bid List<br />Bidder Qualifications Requirements<br />Minority and Small Businesses<br />Doing Business with NCDOT<br />Directory of Approved Transportation Firms<br />Publications and Forms<br />Division Construction Schedules and Updates:<br />Current Project Construction Schedules and Updates<br />Future Projects<br />Project Services<br />Transportation Improvement Plan<br />
    16. 16. Local Projects <br />Statewide NCDOT Stimulus Projects<br />About ARRA<br />More Information for Travelers and Motorists<br />Real Time Travel Info (Badges to Twitter Updates)<br />Construction Delays<br />Weather and Road Conditions (Badges to Twitter Updates)<br />Driving Safety (Gov’s Highway Safety Program)<br />Work Zone Safety<br />Rest Stop and Visitor Center Locations (Interactive Map)<br />Filing a Claim for Pothole and other damage<br />Oversized/Overweight Permit Information<br />Maps<br />
    17. 17. Stormwater management on NCDOT Projects<br />Stormwater Control on Existing Roads and Highways<br />NC Wildflowers<br />Scenic Byways<br />Wetlands Protection (EEP)<br />Transit<br />Bicycling and Pedestrians<br />Litter Pick up<br />Policies and Schedules<br />Request Pickup (online form)<br />Report a Litter Bug<br />
    18. 18. Media Carousel highlighting events in the district; links to news releases, video, photo galleries<br />Interactive project finder to increase ease of locating updates on local construction<br />
    19. 19.
    20. 20. Recap:<br />Integration with existing NCDOT Web Site “look and feel”<br />Standardization of key information for business, resident, traveler stakeholders<br />Emphasizes departmental and administration priorities <br />
    21. 21. Resources:<br />Slideshare:<br />http://www.slideshare.net/lischell/edit_my_uploads<br />

    ×