Chicago Sun-Times

Realigning Chicago’s most popular online publication, Chicago Sun-Times.

Bring on the sun

Chicago Sun-Times Wireframes

With over 86% of the greater Chicago area retrieving their daily news from Sun Times, they’re clearly at no shortage for an audience. Within just fourteen years, Sun-Times Media Group [STM] has extended its reach to 300 communities, providing both print and web-based news service. The only trouble was that their extended reach began to prove troublesome for a cohesive representation on their home-base website, www.suntimes.com.

All forty-one of their branches, as well as their many editorial sites, fed into the home-base site and required the ability to update as quickly as the breaking news they tracked. Ease of use at those branches and the maintenance of a unified aesthetic were not supported by the former site. The issue had always existed as an inherent flaw of their former site, but as more and more people forego their newsprint periodicals and turn to web-based news sources, this minor inconvenience developed into a mountainous predicament.

A reinvention of the old site was certainly in order and it had to happen fast! Sun-Times had numerous internal deadlines centered on the redesign, requiring a lightning-speed turn around for the new site and an absolute adherence to the deadline. We had just two weeks to assess the problem and create the solution. We hit the ground running.

“Usman Group, Inc. was able to analyze critical data and improve the user experience for over 40+ Sun-Times Media online publications.” Stephanie Pelletier Lead UI Sun-Times Media Group

We can do this way better

Chicago Sun-Times Heat Map

“The data doesn’t lie – evaluating over a million unique actions each day paints a very clear picture on typical user behavior” Naveed Usman Principal + CEO Usman Group

Step 1: A thorough evaluation of what STM’s competitors were doing right.

After scrupulously combing through STM’s biggest competitors’ sites, it became clear that a superiorly accessible news site demanded a hierarchy of its pages. It is essential that the visitor know how to find exactly which news story or editorial they’re searching for with just a quick glance through the homepage.

As the site was, visitors were greeted with a homepage overwhelmed by a crowd of headlines and columns. With their 40+ branches feeding into their home site, tidy organization posed a real challenge.

Step 2: Performing a comprehensive website audit on suntimes.com.

In order to best address SunTimes.com’s organizational weaknesses vs. their competitors’ successes, we focused particular attention on performing a comprehensive website and analytics audit. Heatmapping core legacy pages identified popular page elements, sections and categories as defined by the user. The wesbite analytics audit exposed the road most traveled by SunTimes.com‘s various visitor types.

It mapped the users’ navigation through the site, which pages were likely to be visited, when, and how long visitors typically stayed on each page. These discoveries gave us crucial insight into the way their average visitor might envision their ideal experience on the site. This was a great beginning point for designing the new site’s layout.

Spiders, Standards, & Sweat

As we learned from the usability evaluation, the site’s most frequently visited pages weren’t given any visual priority over the others on the homepage, making them rather difficult to find.

To remedy that, we created a new design that featured prioritized categories in a clearly laid-out grid across the homepage. Subcategories were more subtly displayed. A ‘Breaking News’ banner was also added across the bottom of the fold to accommodate the critical significance of timely news updates.

To ensure that the new designs were applicable to each branch, we worked in real time to develop several different structural and design concepts before making final decisions.

Throughout the process, a surplus of 30 templates were created for various sections of the site, insuring that every detail and its performance quality were accounted for.

Chicago Sun-Times Wireframe Sketches
Chicago Sun-Times Homepage Website Design

 

Index Screens

  • Chicago Sun-Times News Website Design
  • Chicago Sun-Times Website Design
  • Chicago Sun-Times User Interface Design
  • Chicago Sun-Times Menu Design

The Challenge

Designing a stunning template isn’t all glamour and imagination. There are a lot of sticky factors involved in making those stunning designs actually work in the wild. The particular obstacle in this case was that the existing site’s code foundation was not conducive for streamlined global additions and edits from STM’s many branches.

Legacy page designs were typically warped, or worse, rearranged themselves entirely due to the foundation’s inability to support modern web design standards and interactive techniques.

The solution for this was to pay special attention to standards based design for aesthetic consistency and optimized for instant content delivery, making Sun- Times.com quite successful with users and search engines.


The SOLUTION

We adhered to well-formed documents, or Standards Based Design, in developing the site structure. The product is a website that performs well, looks great (renders as intended) in all the major web browsers. Employing these standards ensures compatibility with all current web technologies.

To show off all this gorgeous design work, we also worked hard to make sure that SunTimes.com could land itself a spot in any relevant web search. More eloquently put, we included Optimized Content Delivery in the redesign. To do this, the content was laid out in a way that has meaning and is easily accessible to any search engine.

The site is laid out like a well-formed document, speaking the search engine’s language to produce a more efficient match in a keyword search: when the search engine’s ‘spider’ finds the keyword on the site, it knows whether it is a title, main point, image, or just a random coincidence in the body of the text.

We knew that this site had to breathe and grow with Sun Times, and we designed it to do just that. The portability of the site was a main concern due to STM’s size, and the ever-changing world of media.

We ensured that:
  • The designs created could be used in a variety of ways, across branches, and news related situations.
  • The templates were tested and validated to meet the (soon-to-be mandated) Accessibility Standards for Americans with Disabilities Act.
  • Templates were tested for cross-browser compatibility and CMS integration, meaning that the designs were “bullet-proof” and accommodated various content amounts.

“Usman Group was able to bring to life the concept of a global template structures which set the ground work for all online products for Sun-Times Media & drastically optimized the online publications performance.” Stephanie Pelletier Lead UI Sun-Times Media Group


Two men in a burning house must not stop to argue

Working under such a critical deadline, there really wasn’t any option for revisions or changes at the end. Difficult? Yes. Nerve-wracking? Of course. However, it turned out to be a blessing in disguise. This challenge called for a new plan of attack.

Rather than engage the client in a design critique at the end of the process, we realized it made a lot more sense to collaborate with them right from the start.

This way, decisions could be approved before implementation, eliminating a lengthy revision process at the end. We asked more questions, rather than assuming anything; focused on the essentials from a design perspective, and learned how to better write code that allows for real-time updates.

We developed standards for faster design and code implementation, allowing us to keep up the pace without sacrificing quality. As a result, the project stuck to schedule, time was more efficiently spent, and deadlines were met with ease.

This rapid prototyping approach also allowed us to immerse ourselves in the project, as an equally-invested member of the team with the client. We felt their pain, inherited their frustrations and came to solutions together.

As a result, we were better able to anticipate their needs, intuitively knowing what move to make next.


Pretty page? Icing on the cake

Gorgeous design is a given, but this challenge was much bigger than simply that. It’s flawless craftsmanship and savvy marketing consultation that brought SunTimes.com’s new site into fruition.

Thoughtful design is just the icing on the cake. The final product is one that will stand the test of time and progressing technology. It is equipped for a long life of incessant, trouble-free updates from any STM branch and any Internet browser.

SunTimes.com’s readers reap the benefits of this with an experience that’s search-efficient, consistent on any web browser, and terrifically easy on the eyes.

Usman Group is proud to foster the Chicago tradition and long-standing relationship between news icon Sun-Times Media and its loyal readers. With the new SunTimes.com site, STM’s loyal readership-base is sure to include a burgeoning market of new devotees.

Launch Website

Interior Screens

  • Chicago Sun-Times Subpage Design
  • Chicago Sun-Times Video Page Design
  • Chicago Sun-Times Photo Page Design
  • Chicago Sun-Times Lifestyles Page Design
  • Chicago Sun-Times Sports Page Design
  • Chicago Sun-Times Business Page Design
  • Chicago Sun-Times News Page Design
  • Chicago Sun-Times Search Results Design
  • Chicago Sun-Times Blog Design
Chicago Sun-Times Icon

Mobile Screens

  • Chicago Sun-Times Mobile Website Design
  • Chicago Sun-Times Mobile Website Design
  • Chicago Sun-Times Mobile Website Design