Personas, Mood boards, Content strategy, Search redesign, User research, Data analysis, Card sorting, Information architecture, Wireframing, Usability testing, Responsive design, Visual design, Front-end development
1 year, 2011-2012
Nikhil Deshpande, Peter Lee, Christina Lingga, Kendra Skeene, Pooja Berrong, Noralil Fores, Jenna Tollerson, Venkat Adusumilli, Marc Xu, Andrada Erdoss, Kelly Sheffield, Donna Merit
Georgia.gov is the main website for the state of Georgia. Each year, about 5 million people visit the site, accounting for almost 16 million page views. In the past, citizens browsed the site by topic and found links to information on other state websites.
The site went live in 2002, but except for a refresh in 2006, it’s never had a major redesign. Ever.
Back in 2002, the site was designed to be like the old Yahoo! - just click around, and you’ll eventually find what you’re looking for. But state government is too big for that, and as Google replaced Yahoo as the tool of choice for web surfers, we knew we had to totally rethink georgia.gov.
With the redesign, we wanted to do something different. Something that hadn’t been done before. And we wanted to redo everything, not just give it a facelift.
So we looked at every aspect of Georgia.gov — content, search, information architecture, platform, and design. What wasn’t working, and why wasn’t it working?
We had our ideas, but we wanted our decisions to be based on real data. We gathered data from lots of areas:
- Website analytics;
- Site search statistics;
- Georgia.gov customer satisfaction survey
- Information from the 1-800-georgia call center.
- Citizens came to Georgia.gov looking for information that affected them personally - financial support for their children, copies of birth and death certificates, and jobs.
- They couldn’t find what they were looking for. The structure of the site was outdated, which caused citizens to bounce around the site, according to web analytics.
- Trying to meet everyone’s needs, we tried to link to every possible bit of information out there. The result: Long lists of links that were difficult to go through.
- Bad content on other sites. Even if we got citizens to the right place, there was no guarantee that the information there was up to date and accurate.
After pouring over blogs, presentations at major web conferences, and the latest research in usability, search, design, and content strategy, we came up with a few fundamental rules:
- The Long Neck rules, not the Long Tail.
We can’t meet every citizen’s need. In January 2011 alone, citizens searched for 25,000 different terms ranging from drip irrigation guidelines to the Advance Healthcare Directive. If we can serve 80% of the citizens with 20% of the content, it gives us an easier task.
We knew our home page was too crowded and content heavy, but we aimed to simplify the design and content as much as possible. As mobile strategist Luke Wroblewski told Forbes magazine, “I hear it over and over again, ‘The mobile site is so simple, I wish the desktop site was that easy.’”
- Holistic approach.
We had to start from scratch, keeping nothing from the current site.
As we mentioned before, the old Georgia.gov relied heavily on browsing. Each link to an agency service or content was organized in a special hierarchy. But more and more people are searching for information instead of browsing for it. And for something as big as state government, we knew our search had to carry the users’ experience.
Georgia.gov uses the Google Search Appliance, and like its mother company, the appliance is very good at searching. In fact, it’s too good. Searching for something like “child abuse” yields 30,900 matches.
We needed something a bit more intelligent. So we designed a search that would allow us to promote certain content for keywords and synonyms. For instance, a user searching for DMV will get a match for the Department of Driver Services, since that's what the Department of Motor Vehicles is called in Georgia.
We also noticed that people may be looking for different kinds of information. Some people who are searching for “Child Support” may want to know how to file for child support, while others may be looking for the online service to check on the status of payments. So we organized search results page based on the type of information - online services, agencies associated with that search term, and popular forms.
“If something is on the screen and people aren’t clicking on it, we remove it.” — Steve Hafner, CEO of Kayak
Our old design tried to be all things to all people. We crammed as much information on the page as possible and hoped people would eventually find something that pertains to them.
But according to usability guru Jared Spool, the top five links on Walgreens' home page added up to 59% of the total traffic, but those links took up just 3.8% of the page. Users had trouble finding the links they were interested in because they had to wade through all the stuff Walgreens thought they were interested in.
We decided to do the same thing. Using a service called Crazy Egg, we were able to see what users were clicking on.
The results were stunning:
- Child Support received 31% of all clicks on the front page of Georgia.gov, but the words in the Child Support links took up about .49% of the real estate.
- Search was used 13% of the time but took up just .65% of the page.
- Jobs received 10.9% of all clicks, but four links took up only .43%.
- In contrast, the Headlines feature took up 18% of the page but received only 3.6% of clicks.
Jared Spool and the Crazy Egg study opened our eyes to the realization that screen space was valuable, as was our users’ time and patience. We began laying out the front page with a few rules in mind. The fewer words, the better. We allowed for lots of white space. We made search bigger, took away the Headlines from the front page and moved our features to a less prominent area of the page. If it wasn’t important, it wasn’t going to be on our home page.
In the past, georgia.gov had simply pointed the way to information on other websites. But given our new focus on search, we had to make sure that users found the right information quickly.
There were two problems with this approach: The solution was to create our own content. We could show users the information they needed to see, direct them to the agency website for more information, and show associated forms, services and documents. And by having access to keywords and metadata, we could also control how the content appeared in search results. Instead of seeing irrelevant content appear at the top of the search results, we could steer users to the right content. We scoured search logs, call center data and site analytics to find the 50 most popular topics requested by Georgians. We worked with the agencies that dealt with those topics and wrote summaries of each topic. We also created pages for each state agency, also complete with consistent information, as well as pages for each city and county in Georgia (over 600 total). We wanted to do something special with Georgia.Gov — something that no other state site had done.
The topics contained consistent information:
There were two problems with this approach:
The solution was to create our own content. We could show users the information they needed to see, direct them to the agency website for more information, and show associated forms, services and documents. And by having access to keywords and metadata, we could also control how the content appeared in search results. Instead of seeing irrelevant content appear at the top of the search results, we could steer users to the right content.
We scoured search logs, call center data and site analytics to find the 50 most popular topics requested by Georgians. We worked with the agencies that dealt with those topics and wrote summaries of each topic.
We also created pages for each state agency, also complete with consistent information, as well as pages for each city and county in Georgia (over 600 total).
We wanted to do something special with Georgia.Gov — something that no other state site had done.
With responsive design, we accomplished that.
Responsive Web Design is a way of presenting web content in which the layout of the site adapts to the device that is accessing it. A person with a large computer monitor will see a different layout than a person using a mobile device.
This is important for two reasons: Responsive design allows the site to resize and reorganize itself based on the browser and device. We designed the site to accommodate three common screen widths: For mobile users, we reordered some of the functionality, moving search to the top of the page and sending the navigation to the bottom. Why? Because users don’t want to navigate, waiting for each page to load and then clicking on something else. They search.
At the same time, our site is accessed by 191 devices and 86 browsers at 1,750 different resolutions. We knew that we had to accommodate the fast changing trends in devices and browsers.
Testing the Look
This is important for two reasons:
Responsive design allows the site to resize and reorganize itself based on the browser and device. We designed the site to accommodate three common screen widths:
For mobile users, we reordered some of the functionality, moving search to the top of the page and sending the navigation to the bottom. Why? Because users don’t want to navigate, waiting for each page to load and then clicking on something else. They search.
We didn’t design in a vacuum. User testing played a major part in the design process, helping us gauge how well we were meeting users’ expectations.
To test the new design, we conducted a 5-second test in which users were given a snapshot of the front page for 5 seconds, then asked a series of questions about what they thought the site was about, what types of feelings it conveyed, and what they noticed about it.
We paid close attention to usability during the whole design process, paying attention to detail:
- We added “search as you type” functionality to help users find relevant content more quickly.
- Popular topics were worded as a call to action; instead of “child support,” the link read “Get Child Support”.
- Links looked like links - blue and underlined - and were consistent throughout the site.
- Long lists of content - the 600 cities and counties, the 120 agencies — can be filtered through a search box. As you type, the number of terms is filtered based on your input.
We put the new Georgia.gov site in front of users and asked them to find information to see how they interacted with the new site, whether it improved their user experience, and note any problems.
The first user noted that our suggested search results looked like the paid searches that Google shows, so they wouldn’t click on them. We changed the styling to make it more like the regular search results.
Information architecture, or the structure of the website, was now taking a back seat to search. We joked that the new Georgia.gov would just have one big search field — no menu, no navigation.
Of course, we can’t do that. Yet.
We use menus to direct users toward the most commonly used pages on Georgia.gov, such as Agencies, Cities and Counties and Popular Topics.
Most people think of design and layout as very subjective, based on the whims of a few art students who throw something together at the last minute.
Far from it. Our design decisions were based on careful research, testing and analytics.
We began with personas — creating imaginary people who we thought were typical users of Georgia.gov. We quickly discovered that, unlike other products that have a niche or a target audience, our users were the entire state of Georgia. Urban and rural, rich and poor, young and old. How could we be all things to all people?
We discovered that in spite of the all-encompassing aspects of our task, there were some basic concepts:
- Friendliness. In spite of the size, we wanted government to possess small-town values and treat citizens as a person, not a number.
- We wanted to point the way, and then get out of the way. Signs at airports are good at being clear and concise, with its fresh, modern fonts. Georgia.gov needed to show as little as possible while conveying as much information as the user needed.
We didn’t want to fall into the regular Georgia cliches. That meant no peaches, peanuts, Gone with the Wind references, state outlines, or state seals.