Web Design Changes? Let the Metrics be Your Guide

Violka08, iStock, Thinkstock

On September 6, 2013 at 11:27 p.m., EDT., viewers tuned in through the Internet to watch NASA launch its Lunar Atmosphere and Dust Environment Explorer (LADEE) spacecraft. As viewers logged onto the website, something unusual happened. For the first time, metrics indicated that NASA.gov’s mobile users outpaced their desktop users. 93 percent of their viewers were watching the launch from a mobile device. At the time, NASA Web managers were already considering changing their website. Metrics from this event only proved that they were making the right decision.

With the number of mobile users steadily increasing, government agencies are transforming their websites to ensure that all users have an optimal viewing experience—whether users are accessing sites on a laptop, cell phone, tablet, phablet and whatever else is to come. Responsive Web design (RWD) is the method NASA and other agencies are using to transform their websites. RWD adapts a webpage’s layout to the device.

While RWD may seem like the obvious solution, sometimes it is not. For some websites, it may make sense to leave a site as-is, create a mobile site, make an app or go to a responsive design. One thing is for sure: deciding to change a website’s design is a significant—time consuming, painstaking and potentially costly—undertaking. As we learned in the Responsive Web Design Challenges Recap, coordination, leadership buy-in and content decisions are some of the barriers that will need to be addressed.

So before you decide to make the change, you should establish and examine key metrics. Metrics show trends and can serve as the bread and butter to getting senior managers to invest into redesigning your site. However, selecting incorrect or insufficient metrics may lead decision makers to potentially incorrect conclusions, possibly prolong the review process or simply muddy the waters.

I recently spoke with various Web managers who have decided to address their increase in mobile traffic by going with a responsive design. Many of the Web managers are still working to rollout the newly designed websites. Nonetheless, they were willing to speak with me about the highlights and challenges of going with a responsive design. Based on our conversations, here are a few steps to keep in mind before you make your big pitch and afterwards.

STEP 1: Metrics

The first thing you should do is figure out what metrics are important for determining whether or not your agency’s website should be responsive. Selecting the correct metrics will help you better understand how your audience is using the website. It will also help you make informed decisions about changes to the website’s design. Everyone I interviewed for this article looked at the same metric to make this decision: How many users were accessing their site on mobile devices. Some even went further.

For example, Samuel Bronson, Web Analytics Program Manager for the Environmental Protection Agency (EPA), looked at more than an increase in mobile traffic to determine if RWD was right for EPA.gov. In addition to mobile traffic, he measured the content that was being accessed by mobile devices. By analyzing these metrics, Bronson said, “we learned that:

• Mobile/tablet visitors are looking for specific content that is scattered across the EPA website;
• Some of the most popular pages among mobile/tablet Visitors are currently non-mobile/non-responsive legacy pages;
• The pages on our mobile website are not the most popular pages for mobile/tablet visitors.”

Debra Fioritto, public website program manager for the Defense Finance and Accounting Services (DFAS)—payment services to the Department of Defense—also used metrics to determine changes to DFAS’s website. Fioritto saw spikes in mobile traffic in mid-2012. She noticed that as more people began accessing the site via mobile devices, bounce rate increased. “My bounce rate wasn’t so bad until the fall,” Fioritto said. “By December 2012, not only did I have a lot of [mobile] visitors, my bounce rate was approaching about 90%.”

STEP 2: Review Agency’s Business and Communications Strategies

Once metrics have given you a clear problem, you should determine where the problem falls within the agency’s business and communications strategies. This will help you understand how the issue is related to the agency’s goals—quantifying and qualifying the parameters of the problem.

STEP 3: Research

Going to a responsive design may not be the best solution for your agency. Creating a native application or a mobile site are all solutions to consider. The only way to know which route take is by conducting research. Researching all of the options and using metrics to understand your audience is the best way to decide what will be best for the website.

“As I started to research, I realized that the mobile site wasn’t going to work for us because it would increase the work load for our content providers,” Fioritto said. Instead, DFAS decided to go with a responsive design.

Bronson from the EPA said he the used metrics listed in Step 1 conclude that “moving to a fully responsive site seemed a superior strategy than maintaining a separate mobile site.

It seems more of a priority to get the most popular pages among mobile/tablet users into the responsive template than to continue to try and maintain a small mobile website that cannot effectively serve the entire mobile audience.”

STEP 4: Content Management

Understanding what your audience wants from your website is essential to developing a plan for migration to a responsive design. One of the most important things to establish before you make the jump is how you will migrate content and what content you will move to the new site.

Ilene France, Supervisory Digital Information Specialist for the National Institutes of Health (NIAID) considers this one of the challenges to going responsive. “Just formatting content so that all that stuff is on a mobile device doesn’t help users,” she said. “If you haven’t really thought through your content strategy, you’re just going to transfer your problems to a different platform.” To help agencies avoid this problem, a cross-agency working group created two shared content models for “articles” and “events” to help government agencies easily publish content in multiple forms and on multiple platforms.

One of the challenges with responsive design is improving content—especially if you have more links and pages than you need. To tackle this, use metrics to see what pages are being used frequently. Set goal events for certain pages. This will give you an idea of what content should be included in the redesign.

Deciding what should stay and what should go can be tricky—keep in mind that people can be attached to their content—even if you show them metrics supporting your decision. “Even though people get it in the abstract, when it comes to their own content, it’s really hard to get them to let go,” France said.

STEP 5: Getting Others On-Board

After getting all of your ducks in a row, you should prepare to present your finding to senior managers. The presentation to leadership should explain the problem, the possible solutions and include the data to support your conclusions. Make sure you also include how your recommendation will align with the agency’s goals.

Everyone I interviewed said metrics are key when they presenting responsive design recommendations to senior managers. “Since our agency is run by accountants, those metrics spoke to them,” Fioritto said. “They understood that.” Fioritto presented her finding to her director in January, and had a contractor on-board in August.

Ilene France of NIAID said it is also important to present your plan to stakeholders—even though they do not determine the final decision. It may be beneficial to establish a small communications plan to figure out who you should be speak with and how they will be affected by your decisions for the website.

STEP 6: Make It Happen

After you have the ‘okay’ to move forward, it is time to really get the ball rolling. Here is an example of Deborah Fioritto’s process to responsive design.

Fioritto made her presentation to management about responsive design in March 2013. Later that month, she was given a budget of $80,000. Then she wrote a Statement of Work (SOW) that included job requirements. It took her about a month and a half to complete the SOW. She requested bids in May. Someone responded in July. The contractor began working in August. By September 30, 2013, the contractor completed the responsive design templates and gave them to DFAS’s in-house developer. The developer for DFAS, who works part-time, coded the templates into the agency’s content management system. Their developer completed the task in May 2014, and the site went live that same month.

While the site is live, Fioritto said they are still making changes. “We’ve been doing trouble shooting,” she said. “[The Crowdsource Mobile Testing Program] did some mobile testing for use, and we got a lot of feedback on some changes we will be implementing later this year.”