Proposalcreative Loafing Initial Site Improvements ______

ProposalCreative Loafing | Initial Site Improvements
______

Date: March 24, 2009
To: Creative Loafing Tampa
Sharry Smith, Publisher
David Warner, Editor
James Howard, Advertising Director
Terry Herring, Sales Representative
Elke Lockert, Field Marketing Specialist
Stephen Hammill, Online Producer
London Fajkus, Operations Manager /
From: The University of Tampa
Juliet Davis, Associate Professor of COM / Interactive Media
Charles McKenzie, FacultyAdvisor of The Minaret and
Assistant Professor of English / Journalism
Robin Roger, Writer, Public Information and
Adjunct Faculty of Communication
Ellery McCardle, News Editor, The Minaret
Alex Vera, Online Editor, The Minaret

______
In follow-up to the Wednesday, March 18th, meeting with Creative Loafing, faculty The University of Tampa group has collaborated to discuss the needs of Tampa Creative Loafing web site and propose usability and information design solutions. If the site is properly coded (and it appears to be), then design changes should be relative easy to incorporate.Ultimately, the team’s intention is to create design and content solutions that will:
Increase usability (visitors’ ability to see and use the site)
using research from Poynter Institute and Jakob Nielsen.

Increase traffic

Increase average time on site and per page

Decrease average clicks to destination (from 2.5 to 1.5)

Increase 18-25 –year-old visitors

SUMMARY OF INITIAL RECOMMENDATIONS

STEP1) Initial Site Improvements
The first step is tobring Creative Loafing’s site into compliance with basic web design principles (see research by Poynter Institute and Jakob Nielsen) so that the site is viewable and usable to the public. At the same time, the team recommends that we preserve the unique strengths of Creative Loafing’s current design and boost those strengths at the same time.
This proposal reviews challenges and solutions for doing that—and provides a mock-up for a re-design. This first step will not require focus group work or other research because basic web design principles are already well established in textbooks and usability research. Examples of re-design layouts are at the links below. The specifics of the design can vary, so long as the basic usability principles are maintained. These are just examples. This proposal includes a new home page layout, and, with Creative Loafing’s approval, the group will also provide the corresponding layouts for internal main pages and article pages, which also need to be addressed.
- Overview of Links:
- New Design Comp:
- Dropdown Menu Sample:
- PowerPoint Visual Critique (before/after):
- Creative Loafing’s Current Site: | screen grab

STEP 2) Research with Target Audiences
After Step One lays foundational design principles with an initial re-design, then the second step will be to test for nuances of that re-design, in content development, information design, and navigation, working with focus groups, surveys, and other research.

CL HIGHLIGHTS

Format: Alternative Publication for news, politics, arts, entertainment (“We’re edgy and we’re gonna stay that way”)
Target Audience: 35-54 (average age: 40): “center-left, educated, comfortable with their sexuality, community based, like to drink” (James).
Traffic: 10,000 uniques daily, 15,000 page views, 3-4 pages per visit, average 1.5 minutes per visit
Objectives (twofold): 1) The “one-stop shop” for events, political news, pop-culture, “snark,” sex & love.
2) The “friendly, smart companion.” You “want to spend time with that particular voice” (Dave).
Online Benefit: “We want to train people that if they come back there will be an update.” Looking for “anti-hierarchical” info design (Stephen).

RESEARCH: POYTNER INSTITUTE & JAKOB NIELSEN
“Whereas headlines and photos were the first visual stop for print readers, navigation was the first stop for online readers.

Jakob Nielsen’s findings show that readers will not scroll for navigation. Therefore, usable navigation appears either across the top or upper left. (Note: They will scroll to read a story that interests them, but Poynter shows that they seek first to navigate TO a desired story.)

Jakob Nielsen’s findings show that “Mega Drop-Down Navigation Menus Work Well “

The presence of headlines alone did not engage viewers as much as briefs with images (increased viewership by 34% above expected rate).

“Large photos and documentary photos drew more eyes than small photos or staged photos. “ (Need consistently engaging visuals for top stories)

“Voice of the reader” elements in broadsheets drew 68 percent more attention than expected based on the number of those elements available to be seen. (Option to run viewer comments down the front page).

Local Content As the Key To Value:
“There are Only Two Ways to Stop the Newspaper Death Spiral”
Calbuzz - Phil Trounstine and Jerry Roberts write:
* Newspapers have to concentrate all of their force and fire power on their own communities, making themselves indispensable to local residents.
* Or, a business like Google or Yahoo can begin to pay reporters in communities to produce content -- to cover city councils and school boards, write about local development and utilities, local sports and arts, etc.
Posted at 10:15 AM on Apr. 2, 2009
RESEARCH LINKS

•Poynter EyetTrack07 Study

•“There are Only Two Ways to Stop the Newspaper Death Spiral”

•Jakob Nielsen’s Banner Ad Study: “Banner Blindness: Old and New Findings”

“First 2 Words: A Signal for the Scanning Eye”

“Mega Drop-Down Navigation Menus Work Well “

CHALLENGES & SOLUTIONS: Team Assessment

1) Branding
Challenge: The strong and unique branding of the print publication needs to be present online so that it doesn’t look like a generic news publication with all syndicated feeds. The “trusted voice” needs to be clearly represented. The team’s challenge was to create a solution that merges objectives—i.e., create an information design that can compete nationally as a one-stop news site while maintaining Creative Loafing’s unique branding.
Solutions:
- Home page design that captures Creative Loafing's look and feel.
- Text briefs—leads that engage the audience in that trusted “voice” and identify author and site section. - CL icon by every locally written story.
2) Navigation and Usability
Goal is to comply with basic usability standards.
Challenge: Make the site viewable and usable
Content needs to be viewable in 1024 x 768 and 800 x 600 screen dimensions, both with a “screen real estate” ratio within that area is 50% content, 30% navigation, 20% “other.”
Solution: Maximum design area will be 955 x 600, so that it can be viewed at 1024 x 768 and account for the browser menu and scrollbar. Minimum viewing area will be set to 760 x 420 to account for an 800 x 600 viewing area and account for browswer menu and scrollbar.
Challenge: Need Navigation
Usability experts such as Jakob Nielsen have proven that viewers will not scroll to navigate, so currently, viewers are navigating primarily by whatever is showing in their screen. For 1124 x 768 viewers, that means Green Community, Food&Drink, News & Politics. Visitors using 800 x 600 screens have no way of navigating. Also, visitors should be able to navigate from every page without clicking a “back” button to get back to main navigation once they have entered internal pages. The main navigation should remain constant on every page. (See Web Usability: The Practice of Simplicity).
Solution: Implement navigation bar that remains the same on every page and is accessible without scrolling. Drop-down menus will contain all the headline links that are currently spread down the page. Jakob Nielsen’s research shows that Extensive drop-down menus are very effective.
Challenge: Accessing Desired Content / Headline Overload
Currently, information is only presented by headline. Poynter Institute research shows that news briefs with photo are 34% more effective than headline lists. Currently, news is also hierarchically presented with the most current stories first. The “trusted voice” needs to be more accessible.
Solution: Make information accessible 5 ways: editor’s choice, people’s choice, breaking news, drop-down menus, and content area points of entry. Editor’s choice will also help to restore the “trusted voice.” Drop-down menus on the navigation bar will be taken from CL’s current site, which has great headline breadth (we will keep that breadth but make it more accessible), Goal: For viewers to get the article they want in an average of 1-2 clicks (and never more than 3). Current average is 2.5
Challenge: Bottom Menu Consistency
The only navigation CL currently has is at the bottom of the page. It’s a strength of the site, so we just want to tweak it so that there is an internal logic from page to page.
Solution: Separate primary and secondary bottom links. Bring important links up to a top navigation bar and make them redundant at the bottom in the same string. Then, separately, create a string of submenu items that apply only to that section. Third, create a string of lower-priority links that viewers expect to be at the very bottom (e.g., about us, contact, jobs, internships, etc.)
Challenge: Layout Consistency from Page to Page
Solution: Same layout page to page: Top bar on every page. Submenu on left side of every section, The main landing page of each section will have top story blurbs running down the page. Then, the viewer can click to go to a specific article. On that specific article page, there will be a “top story” at top of page with photo. Advertising will be located where it currently is—1) on the left under the submenu navigation bar and 2) in the right-hand margin. This layout logic will greatly improve usability.
3) Search Functions
Challenge:Viewers need to be able to search the site for both current and archived articles. There are two kinds of viewers: searchers and linkers (CL is currently only accommodating the linkers). While a focus has been on updating current news so that people will return throughout the day, it is equally important (especially for an alternative publication) for people to be able to return to past articles that engrossed them—and to share them with their friends (in ways other than using delicious, dig, etc.). Viewers also must be able to do searches for research of past articles.
Solution: Instead of having the “search” field go to Google, have it search the site internally. Also, instead of having the “archive” link goes to graphics of magazine covers, call that link “magazine covers.”
4) Layout and Typography
Challenge: Need an organized look (rather than chaotic/cluttered)
Solution: Header banner will unify page. Limit the number of points of alignment so that there is a legible grid. Use reasonable type sizes (remembering that type that is too large is as hard to read as type that is too small).

[CONT: DESIGNS ON NEXT PAGES]

New Design Proposed

Note: These are spec mock-ups only, using text and images from random sources for the content. Not intended for use. Also, a real page would be much longer, allowing for more news stories to show, more ads, more points of entry, etc.

Option: More Visuals, Less Text (Slide Show of Top Stories)

Example of Drop-down Menu (Movies & TV)

Current Web Site: