6 things we learned moving KSL.com to a responsive design

Steve Bergen | Mobile/UI Project Manager, KSL.com, DDM | September 1, 2015

KSL.com recently launched a new, fully responsive site for the news product. The purpose of moving to a responsive design was to give users a full KSL.com experience, regardless of screen size or device. It also gave us a chance to re-evaluate how we present paid content and advertising on the site, with the goal of finding ways to improve the ad experience for both users and advertisers.

The redesign rollout was the culmination of nearly 12 months of work and collaboration between several teams. We learned a number of valuable lessons that we think will help any organization make the transition to a responsive site.

1. Communication with stakeholders is key

You can’t create a site in a vacuum — responsive or not. Make sure to bring all of the stakeholders together on a regular basis and give them updates on the process. Communicate any roadblocks you are encountering and encourage them to give feedback.

In our case, the major stakeholders were our news team and the sales team. After we had a preliminary comp that addressed the needs of the news team, we took the design to the sales team. This back and forth helped us meet the needs of both teams. The process was complicated because the ad products were changing dramatically. Meeting regularly with both teams to share data and ideas was key in getting the sales team on board with the new site layout.

By the time we started the rollout of the new site, the entire sales team was excited about the new ad products they were selling. They were then able to help clients navigate the transition and adjust the ad inventory. No one was blindsided by sudden changes to the site. Yes, compromise was necessary on both sides throughout the process, but in the end, we had a sales team that trusted us and knew we were invested in their concerns.

2. Be prepared to throw everything out the window

We initially worked with a design firm to come up with some comps for what the new responsive site would look like. However, after we began coding up the new site, we realized that while the comp looked great on paper, it wasn’t going to transfer over to the kind of experience our users were used to. We took some of the basic elements we liked in those initial comps and started from scratch for much of the redesign. While we continued to use some static comps in the early stages, most of the design work was done in browser, allowing everyone to get a feel for the product in a functional environment.

This also allowed for quick changes on the fly and easy experimentation of ideas. Static comps definitely have their place, but in the world of responsive design, being able to design in browser is not only a huge timesaver but will also allow you to discover any UI/UX issues quickly.

3. Designers aren’t the only ones with good design ideas

Based on user interaction data, we made the decision very early that our home page would be a single column for the main news queue. New ad products were put in place to take advantage of the wider ad space, but we realized very quickly — again, through in-browser designing — that we had an issue with initial ad visibility on certain browser heights.

We were already accommodating different device sizes (mobile, desktop, tablet) via what are called media queries. These media queries are traditionally used to measure the width of a device screen and adjust the content accordingly. It had never occurred to me that those queries could be used to alter the page based on height. That idea came from KSL.com’s general manager, Brett Atkinson, during a brainstorming session. Taking that idea, we were able to create height-based media queries that adjusted portions of the page above the ad product, allowing the ad to be visible on a variety of browser heights. If you visit KSL.com and change the height of the browser, you can see that idea in action.

All along the design process, sales team members, VP’s and developers were all helpful in providing feedback and ideas for improving the new site. Listen to everyone on your team. While they may not be designers, they use the Web and have a good idea of what works and what doesn’t.

4. Users are mean

OK, not all users. But when you make any kind of major change (and sometimes minor) to your site, be prepared for some of your users to become unglued. Let’s face it, most of us don’t like change, and that goes for changes on the Web. We like knowing where everything is and take comfort in that. Mess with that, and you are risking the ire of your audience. In the case of our responsive redesign, it was a major change. And much of the feedback was … not nice. As someone who was deeply invested in what we had created, many times my initial reaction was, “Well, you're wrong!” However, in responding and corresponding with some of these irate users, we were able to glean information that can’t be found on any analytics suite.

We also found many users who were initially irate ended up being extremely helpful, as well as a bit apologetic for their initial response. Feedback was also crucial in finding bugs that hadn’t manifested themselves in testing. Listen to your users, no matter how painful it is. But also realize that most people don’t feel like writing a letter to the editor when they are happy and content. Don’t have knee-jerk reactions to feedback. In my time at DDM and KSL, we have made significant changes to the site every few years, and each time, a group of users say they hate the changes and are never coming back. Some have even suggested that I be fired. Yet, here we are years later, still growing — and I still have a job.

5. Roll it out slow and steady

The rollout of the responsive KSL.com site occurred over a period of about a month. For week one, we started serving the new experience to approximately 20 percent of our unique visitors. Week two, we ramped it up to 50 percent. Week three, 75 percent. And finally, 100 percent on week four.

While we had given the audience a couple of sneak peeks in the previous months, this was the first time we “forced” the users to the new site. We used the time during the gradual rollout to make bug fixes and to adjust several visual elements based on user feedback. Again, going back to the negative user feedback, it’s never fun — but it’s better to have something pointed out to you when only 20 percent of your audience is using it, rather than 100 percent.

The incremental rollout also gave us the option of rolling back to a smaller segment of users had anything catastrophic occurred with the launch. All along the way, we were closely monitoring the behavior of our users between the new site and old site, making sure that visits and page views were remaining steady. By the time we reached 100 percent, all of the major bugs had been squashed and changes based on user feedback had already been put in place.

6. It’s never, ever done

If you have worked in the Web world for any period of time, you know that nothing is ever “finished.” Yes, we rolled out a new product to our entire audience, but it is a product that will never be completely done. Whether it’s new features, new technology, new devices or new bugs, you can be assured that what you see today on KSL.com won’t necessarily be exactly the same in the next few months. We are constantly monitoring user behavior and site analytics to understand how our users digest the site. Previous assumptions and data don’t always pan out, so you have to be willing and ready to make changes and adjustments as you move forward. It’s just as important that your team has the resources, support and trust to make changes after a launch as it is before a launch.