KBTX.com Redesign Proposal

Transcription

Paul Heussner - Internet Content Producer for KBTX Media
Introduction
2
The Current Site Design and Layout
3
Proposed New Design and Layout
4
Current Color and Typography
6
Proposed New Color and Typography Summary
7
Proposed New Color and Typography Detailed Style Guide 10
User Testing Analysis for Proposed Redesign
12
User Testing Results for Proposed Redesign
13
Closing Summary
14
1
Introduction
We all know that the web is a powerful platform for any modern media outlet. It’s the
broadcast medium that reaches a worldwide audience on a personal level, and that digital
traffic is what fuels online advertisement sales and revenue.
The life-blood of online advertisement sales is website visitor statistics. If we improve the
website’s visitor statistics, then online ad sales should increase proportionately.
So how can KBTX increase site hits and improve visitor statistics? Studies have shown
that site hits can be improved through better design. Improve the user experience, and the
numbers will follow.
This report summarizes the major details of the current design, and proposes some
changes that can improve the user experience for KBTX.com visitors. It also contains user
test studies and insights from our target audience.
The purpose of this document is to provide a starting point of reference for the design
team, the programming team, and the administrative team. The sections are divided and
organized to facilitate this purpose.
2
The Current Site Design and Layout
The existing site layout utilizes three
columns and a drop-down navigation bar.
There’s lots of content available, including
news stories, local interest articles, video,
local events, surveys and contests.
Unfortunately, the main site content lacks
emphasis, and can get lost among the
supplementary sidebars.
The navigation is confusing to first-time
site visitors, and the site’s content is hidden
in the non-descriptive menu bar.
I think that with improved navigation and
a few changes to the page layout, the website
will become much more desirable to online
viewers. Especially your target audience of
18-24 year old college students, who want a
modern internet experience, and also to older
adults who want news information without
confusion on the web.
3
Proposed New Design and Layout
The new layout that I propose, utilizes a custom-padded three-column layout, a large
sitemap-style footer, and a mega menu for navigation. The new mega menu allows us to add
descriptions, organize links into sections, and provide a more comfortable experience to the
user. Mega menus are quickly becoming a favorite navigation method among sites with lots
of content. NPR.org uses mega menus to organize their “program” and “listen” sections.
Officemax.com also uses mega menus to make their shopping navigation fast and hasslefree. Jack Neilson, a well-known usability expert, had this to say about mega menus:
4
“We know from user testing that mega drop‐downs work. Here are some arguments to support this empirical fact: For bigger sites with many features, regular drop‐down menus typically hide most of the user's options. Yes, you can scroll, but (a) it's a pain and (b) scrolling down hides the initial options. As a result, you can't visually compare all your choices; you have to rely on short‐term memory. People have enough on their minds, and messing with short‐term memory reduces their ability to accomplish their tasks on your site. Mega drop‐downs show everything at a glance, so users can see rather than try to remember.”
(source: http://www.useit.com/alertbox/mega-dropdown-menus.html)
This improved mega menu navigation will be complemented by a refreshed site layout.
The overall column structure is the same, so that the size and placement of banner ads,
supercube ads, and content sections remain unchanged. In the refreshed layout, the
alignment and spacing have been improved so that there’s a more clearly defined hierarchy
of content. By adding space between the main content column and the features column, the
contrast between primary and secondary content is increased, making the page easier to
understand at a glance.
The sitemap-style footer allows visitors a quick way to see all of the content that KBTX
Media offers online. Because the footer appears at the bottom of every page, it acts as a
springboard for visitors to find other content once they finish reading an article. This
increases visitor retention time, an important metric for web ad sales. This design
improvement will make first-time site visitors more comfortable. The more comfortable firsttime visitors are with your site, the more likely they will become regular viewers, thus
increasing your site’s audience.
5
Current Color and Typography
KBTX currently uses a palette of bright red and blue to match the branding of the
broadcast TV news. Arial is utilized as the font for every headline, section title, and
paragraph of text. Because the text doesn’t differentiate with the content’s hierarchy, it can
be difficult to absorb the information.
6
Proposed New Color and Typography Summary
Keeping with the existing red and blue theme for KBTX, I’ve selected a few speci>ic colors for different webpage sections. Here’s a master overview of the proposed style for the new web site layout.
News | Weather | Sports | - Sanford Book in White
In the new layout, a modern drop-down megamenu will replace the current drop-down
toolbar. The added flexibility from a megamenu allows us to consolidate and organize
sections of navigational content, in much the same manner that Officemax.com has it’s
navigation simplified.
The Sanford Book typeface has traditionally been used in print news and print publishing.
As a result, the typeface has a formal and institutional feel that reinforces the KBTX News
brand. Its wide stance emphasizes individual words, which improves readability.
7
Top Stories - Sanford Book Bold in Red-Black
To make the news content stand out as the first noticeable content section, we need a
saturated color and a large typeface. A red-black is quickly and subconsciously
distinguishable from plain black, and it draws attention appropriately for our purposes.
Stanford Book Bold has a narrow height and a wide stance, making it a very readable
candidate for the section titles. Because section titles only consist of a few words, this wider
typeface will help emphasize them without being too distracting.
KBTX Weather - Middle Column Section Titles –
A Smaller Sanford Book Bold in Red-Black
By shrinking the size of the middle column section titles, it shows the visitor that these
have a slightly lower hierarchy than “Top Stories”. This extra subtle organization makes it
easier for visitors to find what they’re looking for, and reduces confusion.
Story Headlines - Franklin Gothic Book Bold in Blue
When surfing the web, people are used to seeing links in blue. This new, darker shade of
blue adds a sense of maturity to the site’s appearance, while keeping the benefits of
familiarity. Franklin Gothic Book is a taller sans-serif typeface, making it a very readable
candidate for headlines. The letters have a narrow width with more whitespace between
them. This combination of narrow-type with a wider kerning makes it very easy for people to
scan headlines. The unique attributes of this typeface will draw people’s eye to the
headlines, without distracting them with something odd or unfamiliar.
Paragraph Text – Arial in Dark Gray
For the links and the story content, Arial is an ideal typeface. The simple shapes of the
characters remain completely readable in small sizes. It’s the reason why Arial is your
website’s current typeface, and it’s the reason why it should continue to be used for the
story content. To give the entire page a better sense of hierarchy and balance, I used a dark
gray for the text. This perfectly readable color simply calls less attention so that it’s easier to
scan the headlines.
8
Better typography, coupled with a refreshed design, will improve your customers’
experience on your website. A better sense of this can be acquired from the webpage
mockups I’ve included in the detailed style guide below.
9
Proposed New Color and Typography Detailed Style Guide
-Complete detailed font and color information below-
Homepage Top News Article Titles
Franklin Gothic Book Bold 14px
dark blue, #000088, rgb(0,0,136)
background color: pale yellow, #f7f7f2, rgb(247,247,242)
Homepage Article Text
Arial 12px
dark gray, #444444, rgb(68,68,68)
(Full Story) Link Text
Arial 11px
dark blue, #000088, rgb(0,0,136)
Megamenu Text.
Sanford Book 18px
white, #ffffff, rgb(255,255,255)
background color: #1e1f3c, rgb(30,31,60)
10
Top Stories Column Title Text
Sanford Book Bold 18px
black-red, #330000, rgb(51,0,0)
background color: off-white, #fefefa, rgb(254,254,250)
Other Sections Column Title Text
Sanford Book Bold 14px
black-red, #330000, rgb(51,0,0)
background color: ultralight gray, #f7f7f2, rgb(247,247,242)
News Article Title
Arial 20px
black, #000000, rgb(0,0,0)
background color: paler yellow, #fafaf7, rgb(250,250,247)
News Page Text
Arial 13px
black, #000000, rgb(0,0,0)
background color: paler yellow, #fafaf7, rgb(250,250,247)
Footer Column Title
Sanford Book Bold Underlined 18px
light blue-gray, #dee2e5, rgb(222,226,229)
text shadow: 1px distance, 2px size, shadow color: #7f8486, rgb(127,132,134)
background color: gray, #888d8f, rgb(136,141,143)
Footer Section Title/ Footer News Section Title
Arial 12px; line-height:18px
Footer Page Title
Arial 10px; line-height:14px
Footer Copyright Notice
Arial 10px
light-blue, #f7fcff, rgb(247,252,255)
Footer Contact Info – Footer Address
Arial Italic 14px - 10px
light-blue, #f7fcff, rgb(247,252,255)
11
User Testing Analysis for Proposed Redesign
Paul Heussner – Internet Content Producer for KBTX Media
The proposed layout and screen design seem to work well for >inding popular information like weather, news and sports. By simplifying the navigation with a large megamenu, people are able to quickly >ind what they’re looking for, in largely predictable ways. Most location tests were identi>ied in under 3 seconds.
The longest test took 14.22 seconds to >ind the KBTX contact info, a drastic time delay that is symptomatic of confusion. The user said he was looking for a footer that would probably have this information. I believe that adding a well‐designed footer to the web design’s layout will help cater to common web sur>ing styles.
In conclusion, the tests have con>irmed that the proposed layout and design allow people to quickly >ind information from KBTX. The feedback and insights from this test allowed us to re>ine the proposed design to improve the user experience even further.
12
User Testing Results for Proposed Redesign
Users were shown a mockup of the proposed KBTX.com redesign, and then asked a question. The following chart shows the test subjects, as well as the time it took to respond.
Name
Age
Hometown
Q1
Q2
Q3
Q4
Q5
Q6
Q7
Patrick C.
22
Houston, Texas
3.36s
1.97s
4.56s
<1s
<1s
4.15s
1.41s
Kristen F.
21
Boerne, Texas
2.96s
2.43s
3.12s
2.93s
1.17s
2.11s
2.25s
Cam C.
22
Houston, Texas
1.96s
7.26s
1.44s
14.22s
2.39s
2.78s
3.14s
Josh B.
22
Cartage, Texas
3.52s
7.32s
3.43s
1.30s
2.66s
1.91s
2.28s
Chris H.
19
Bertram, Texas
<1s
2.31s
1.20s
3.14s
1.68s
4.63s
<1s
Joseph F.
22
Houston, Texas
2.31s
2.20s
2.96s
2.90s
1.31s
2.43s
<1s
Questions and Responses
1. Locate where you think you'll >ind local weather information.
6 answered: “Weather” in megamenu; 1 answered: Weather Radar Widget
2. Locate where you think you'll >ind a calendar of local events
7 answered: “Community” in megamenu
3. Locate where you think you'll >ind Texas A&M Football Scores.
7 answered: “Sports” in megamenu
4. Locate where you think you'll >ind email addresses and phone numbers for journalists at the KBTX News station.
6 answered: “Inside KBTX”; 1 answered: “Scroll Down to Footer”
5. Locate where you think you could >ind a live stream of the News broadcast online.
7 answered: “Video Player Widget”
6. Locate where you think you'll >ind information on local restaurants and entertainment.
5 answered: “Community” in megamenu; 2 answered: “Community or Features”
7. Locate where you'd begin to look for the latest local news articles.
5 answered: “News” in megamenu; 2 answered: “Top Stories” column
13
Closing Summary
Dear Mr. Wright,
With these new design changes in place, it will be easier for users to find specific KBTX
content, browse other KBTX content, and makes the site easier for visitors to recommend to
their friends. This in turn will help the company achieve higher click-retention rates, as
people surf the site’s content. It will increase overall site hits, as people recommend us to
their friends. And these improved web statistic numbers will translate to more online
advertisement sales.
This document contains all the information that the design team, the programming team,
and the administrative team need in order to coordinate these changes.
If you’d like to discuss this exciting new possibility for your online presence, please
contact me. I look forward to the opportunity to serve you.
Best Regards,
Paul Heussner
14

KBTX.com Redesign Proposal

Transcription

Similar documents

Immerse yourself in a world of colour.

Webinar Training

A Journey “Back” into Black and White Photography

ACD Distribution M14 Promotion Playmats

CV-M71 A

BETAbrite® Window Displays