Phase 1 - General Updates (Internal) (July, August) - FTP Directory ...

gasownerΔιαχείριση Δεδομένων

31 Ιαν 2013 (πριν από 4 χρόνια και 4 μήνες)

160 εμφανίσεις

Functional Specification



Website Redesign

1














Website

Redesign


Functional Specification Design Document


Presented by:

Jacob Pomplun













Revision History



Version

Date

Author


Comments

1.0


Jacob Pomplun

Functional Specification Documentation

2.0




3.0




4.0




Functional Specification



Website Redesign

2


Table of Contents


1.

Overview………………………………………………
………….
……………….…..
……Page 3

Problem Statement……………………………………………………………………..Page 3

Purpose of the Site and Goals……………………………………………………..Page 3

Objective of

Changes…………………………………………………………………..Page 4

Industry Best Practices………………………………………………………………..Page 4

Competitive Analysis……………………………………………………………………Page 5

Terminology (CMS Definition)……………………………………………………..Page 6

Team Members……………………………………………………………………………Page 6

Information Culture……………………………………………………………………..Page 8

Target Audience…………………………………………………………………………..Page 8

Typical User Demographic Profile………………………………………………..Page 9

Psychographics…………………………………………………………………………….Page 10

Broken Site Link Clean
-
up Process………………
………………………………..Page 10

Site Map and Flow………………………………………………………………………..Page 11

2.

General Updates


Phase 1



Internal Phase

(July


Oct)

Scope……………………………………………………………………………………………Page 13

Timeline……………………………………………………………………………………….Page 13

H
omep
age
1.1……………………………………………………………………………

Page 14

Product Menu 2.1…………
………………………………………………………………Page 21

Solutions Section
3.1…………………………………………………………………….
Page 32

Reseller Section 4.1………
………………………………………………………………Page 35

Tech Support Section 5.
1………………………………………………………………Page

35

About Section 6.1…………
……………………………………………………………….Page 37

Contact Us Section 7.1…..…………………………………………………………
…..Page 41

Learning Center 8.1................................................
.....................…...Page 43

How to Buy Section 9.1
…………………………………………………………………Page 44

MY TN Access Section 10.
1…………………………………………………………...Page 44

3.

Future Updates


Phase 2


DKS involvement (Q1 & Q2 2013)……..Page 45

4.

New Site


Phase 3………………………………………………………………………..Page 53









Functional Specification



Website Redesign

3


Overview


Problem Statement:


Transition Networks’ website has outgrown the infrastructure on which it was built.
Products are
becoming more
difficult to find
and are located deep within the site.
Lots
of missing updates and information and o
ur

various audience segments aren’t
being
sufficiently catered to
. The TN website needs to be the place that addresses all of
our

customer’s initial issues. We should be the place customers come to solve their
problems.
Our

content
needs to be better

optimized for search engine discovery and
cur
rently

small updates to the site require expensive third
-
party engagement

with DKS
.


Transition Networks is seeking a new direction
t
o make
our

site

more engaging to
increase more followers through easy navigation and inventive interactivity.


Purpose of
the Site and Goals:


Build a customer centric website
with up
-
to
-
date information that meets

all
the
needs
of
our

current users
while

simplifying
our

navigation over
our

competition. The idea is
to direct visitors to the locations they are trying to find efficiently and logically.

We
need to look for areas that have

traditionally bad user experience
s and improve them in
our

site, taking a preemptive approach.
In additi
on to b
uild
ing

content that solves
our

customer’s problems and differentiates us as a superior vendor.


Creative (Design)

-

Engagement should involve creating a design that visually makes an
impression consistent with the messages that brought them there. It involves creating a
design that directs them efficiently to where they want to go and creating a navigation
process that

is logical and helps people accomplish their task quickly without any
confusion.


Content
-

Segment
our

audience by visitor type or visitor intention. We need to create
messages that appeal to each vertical or visitor type. We could use more video
-

80
p
ercent of visitor traffic will click on a video more than any other type of link. Video
increases response rates. People won't buy what they don't understand. We need to
clearly explain things in language that all of
our

visitors understand. Replace "We,
" and
"
Our
" with "You," and "
Our
."

Keep
our

copy customer
-
centric. Focus on customer
challenges, not features and benefits. The likelihood is that most of
our

customers are
coming to find an answer to a question or a solution to a problem. It’s also impo
rtant
that we keep in mind we have two audiences visiting
our

site: Humans and search
Functional Specification



Website Redesign

4

engine spiders. We need to m
ake content relevant for both. Content implies the need
for a content management system. With the size of
our

site, we should be using one.


Community


Our

website needs to be
our

main hub, connecting visitors to everywhere
else that we have a presence online.


Customers
-

The best way to create a customer
-
centric website is by asking the
customer what it is they want to see. Use surveys and polls, third party tools to have
users score
our

website, incorporate customer feedbac
k forms, Use more A/B and
multi
variate split te
sting, use Google Analytics or other metrics program to gauge
customer interactivity, test and refine; test and refine
.


Objective of Changes:


Currently
it is imperative that we b
uild a better website experience with
more
up
-
to
-
date information and an
easier navigational path

to find the content that users are
looking for
. The idea is to direct visitors to the locations they are trying to find
efficiently and
logically
.


For the long
-
term we need to ensure that we have
b
uilt

a
customer centric website
that meets

all needs of
our

current users and simpl
ifies

our

nav
igation over
our

competition. We also need to continue to develop

content that
solves
our

customer’s

problems and differentiates us as a superior vendor.


Industry Best Practices




Maximum
number of clicks until a visitor reaches their intended piece of
information


3 (ideal) 4(absolute max)


Customers will not search
through a site to see if inf
ormation is/is

not there.



In three seconds the site needs to connect viscerally with an
arriving
prospect.



In thirty seconds the site needs to communicate the company’s core
message and make clear that the site contains good content to explore.



In less than three minutes, the site needs to provide enough succinct,
relevant information in
an

emotionally
satisfying format that persuades
the prospect to take the desired action. (Sites built along these lines tell a
story across time


holding visitors attention)



Do not try and put everything on
the

homepage


instead give obvious
clues on wher
e to find things.



Every page on site must load in under
three to
five seconds.

Functional Specification



Website Redesign

5

Competitive Analysis


These company websites were chosen for review as a comparison to the Tr
ansition.com site.
This

chart provides a description of the types of pa
ges and
features offered by a competitor
company’s web
site.


Functional Specification



Website Redesign

6

Terminology
:

CMS


Terminology that will be referred to at several different stages throughout this spec doc:



Content Management System (CMS)



is a computer system that allows
publishing, editing, and

modifying content as well as site maintenance from a
central page. It provides a collection of procedures used to manage work flow in
a collaborative environment. These procedures can be manual or computer
-
based.

Project Team Member
:



Our

team member
s

will consist of the following individuals which will make up the team
for the full integration from design to implementation.




Project manager



Jacob Pomplun


I w
ill take responsibility for the management and
coordinating of this project from initial
kick
-
off to its final delivery. The project manager
will use the company strategy, experience, best practice methodologies, and leadership
to coordinate all the other teams that have been allocated for this project.



Technical writer
s



(Marketing Managers

and Product Managers)
-

Will implement a
well
-
written and accurate display, which will add value to
our

products and reduce the
need for additional calls to their technical support or sales staff. All the writing will be
consistent and concise to keep th
e same appeal across the entire site. It will be user
-
focused writing that is written and organized based on what the intended audience
wants to know. It is important to present information as clearly and concisely as
possible and always keeping the user r
equirements, branding and strategy in mind.



Designer
s
-

It will be important for the designer to incorporate
our

own uniqueness into
the process
of designing
our

WebPages
, Web
sites, Web applications and multimedia for
the Web. Given the niche market of
ou
r

products we will be implementing a lot of
leading edge integrations such as: animation
s
, authoring, communication design,
corporate identity, graphic design, human
-
computer interaction, information
architecture, interaction design, marketing, photograph
y, search engine optimization
and typography. They will also need to take into consideration the seven C’s of web
design: Context


We want customer to appreciate its looks, feels and acts


it needs a
traditional ease of use with a modern, edgy, utilita
rian, and emotional sense about it..
It's the “how “of site design. Color, graphics, forms and interactivity. Content


Needs to
be consistent with
our

strategic message
-

text,

video,

audio,

graphics (multimedia)
-

this
represents the
“what

“of

site
design
.
Community


Developing a feeling of belonging to
our

customers and a strong sense of Involvement
-

it's all about the shared common
interest
-

it's the “why “of site design.


Customization
-

The ability of the user to
customize the Website

(MY TN Access)
, in the limit allowed by the site, or the ability of
the Website to tailor itself to the visitors' behavior

and needs
. It's the “touch “of site
Functional Specification



Website Redesign

7

design. Communication
-

The way the site communicates with the visitor, what
is the
message

and how is

it
trans
mitted
. It's about the “strength" of site design. Connection
-

Res
our
ces offered by the site in the form of linkage between them and other
Websites
.
It's about the "networking" of site design.



Programmer
s

(DKS)
-

Our

programmer
s

will need to have the ability to program all
our

needs within the scope of
our

res
our
ces and budget.
Our

site will be
continued to be
designed on the ASP architecture.
Our

goal is to have the delivery of a dynamic,
database
-
driven content to
our

website

viewers without taxing the server
-
side system

(Cloud
-
based)
.
The ultimate goal should be to

setup a system that can integrate with
our

current
(ERP


CRM)
database to drive per
sonalized dynamic content and when

identified as
a MY TN Access

customer by lo
g
-
in. It is necessary to personalize their
experience based on previous visitor navigation. We will
have to
use someone who has
good web server knowledge and a good understanding of the communication of
technologies such as TCP/IP, Proxies, FTP
to
add to

the user experience as defined by
our

designer
s
. They also need to have a very good understanding of databases and
they need to have many programming tasks, which can be used through a variety of
different types of database
s

such as MySQL
.



Photographer/
Videographer

(Designers)
-

Our

Photographer/Videographer
s

must be
extremely talented at visually capturing all the
Transition Networks’

feature
s

above
simply showing a black box. Photos and Videos must be an elegant design that
emphasizes
our

true value w
ith a

list of features. Along with server pictures we will be
featuring short video samples of
new products
. I would also like to add 3D product
pictures

(maps, diagrams)

done in flash that will allow
our

customers to get a full
perspective of size and f
eel

of each application. For this we should look into some form
of p
owerful gallery management system, which is fast loading and optimized for search
engine optimization.



Site Evaluator
s

(Marketing,
Sales
, and Management
)
-

Our

site Evaluator
s

will be t
esting
the site for technical accuracy and reviews content for compliance with the guidelines
both during and after the development process. This person will also be administrating
site usability tests with several non
-
technical individuals. These tests
will be conducted
through careful observation on the navigation of each page. Each test will be given
simple instructions to perform a task while the Evaluators will be documenting the
entire process from start to finish.



Content Manager/Webmaster

(Ryan)
-

Our

webmaster will be tasked as the person
responsible for maintaining
our

website and ultimately responding to issues and website
design problems. The duties of the webmaster may include ensuring that the web
servers, hardware and software are operating accurately, designing the website,
generating and revising web pages, reply
ing to user comment, and examining traffic
through the site with
our

analytics and sales force software.



Functional Specification



Website Redesign

8

Information Culture
:


At Transition Networks we understand the advantages of fiber. We know fiber
technology, we live fiber technology, and we sel
l fiber technology. But it is
our

thirst to
solve customer problems that needs to be the inspiration and focus of
our

entire site.
We are no longer just a reseller of copper and fiber conversion products. We need to
stop positioning
our

products at a sur
face level. Instead we need to shift
our

focus on
how to better solve
our

customer’s problems, by picking and choosing which problems
to solve. To do this we need to start transitioning
our

messaging from “selling” to
“solving”. We currently spend a lot

of
time telling potential customers about what
our

product does rather than us being concerned with what their problems are.
Differentiating
our
selves from the competition and building leadership skills that will
result in problem solving, because leader
ship depends on “listening” and “asking,”
rather than on “telling.” We are also looking to create a relationship with
our

customers, this is not just a website it’s a community where questions are enc
our
aged
and two
-
way communication is a must. When we l
ook at other breakthrough products,
we see that they didn’t merely do a better job of addressing the same customer needs.
They chose a different set of needs or a different way of positioning from a customer
perspective. And when we look at the spectacul
ar failures, we find that the problems
that they chose to solve were not especially important to customers or never really
addressed the customers’ needs. Positioning great products is about choosing the right
set of problems to solve.


Target Audience:


The m
ass market is
obsolete
, people are no longer part of the one big family, but are

instead
members

of small

and specific

“tribes”. These “tribes” share a lot in common
and it’s due to this that marketing has evolved from mass marketing to segment
market
ing.

Our

target
audience consists of f
our

very distinctive categories. The f
ive

categories identified are: Enterprise/Campus, Service Provider/Utilities, Industrial,
Federal
, and Security Surveillance



or
within all f
our

identified categories w
e

have a
Security subsection. Each of the f
our

verticals can be broken down into several
additional sub
sections of the larger market.

We need to tap into
these subsections

to
show
our

potential customers that we truly understand their environment and pote
ntial
problems.




Functional Specification



Website Redesign

9

Typical User Demographic Profile

Persona


Occupation:

Most of
Transition Networks’

Customers will be have a col
lege education or have
worked in

some
sort
of technical field. Many will have had some form of experience
working with technology in their everyday life.

Interests, Hobbies:

We want this product to really strike a chord
with those looking for more of a
partnership rather than a single media co
nverter. We want to be in the business of
solving problems
.
Our

devices
help solve problems
, while also future proofing
.


Technical Background:

Many of
Transition
Networks'

early adopters

will be technology savvy.
While most of
the Ethernet products in the Carrier and Industrial markets will be relatively new.


Product/Company Knowledge:

While many people are still unfamiliar with
Transition Networks

in the service provider
and Industrial markets,
there is a lar
ge increase i
n consumer questions around
our

capabilities and ease of use

in

demarcation devices and industrial Ethernet as a solu
tion
to past legacy protocols used

.
We need to make sure that we are seen as a strong
player in this market, with plenty of
understanding of customer problems and solutions.
Supplemented with educational content to show some thought leadership.





Functional Specification



Website Redesign

10

Psychographics
:


We will be developing a process to generate lists from
our

IFS

database to support all
marketing efforts to new and existing customers. By creating a specific

d
ashboard and
key performance indicators (KPI) we will be able
to
analyze specifications for each
campaign.
This will be identified by

using a
database
for
psychographic

segmentation,
identifying
individual’s

activities through
our

marketing
nurturing
system

in IFS

and
leveraging
our

database and quantitative insigh
ts
in commerce server
to provide
recommendations on how to

optimize
our

marketing programs to m
eet specified ROI
and strategic objectives of each visitor.

We will d
esign, develop, and manage
our

company segmentation rules and
models, containing demographics and

psychographics.
Part of this is performing analysis to assist in overall evaluation of c
ampaign's success.
Customers should perceive this accurate information and offers they receive from us as
a benefit
.
Looking at all the facets of a psychographic segment establishes whether or
not it is a worthwhile target, allowing efforts to be focused

on the most profitable
segments, as well as those with the highest potential. These Groups will be broken into:
Personality, Lifestyle, Value and Attitude.



Broken Links


Throughout Site
-

Completed as of 4/4/12


Broken Link Spreadsheet located:

HERE




Going forward we will be implementing a monthly maintenance check to ensure that we
are providing the best user e
xperience possible and not sending visitors to a broken
page that is either no longer in use or the part has been EOL.
This should become a
regular task that is completed on a 30 days basis throughout the year.



Functional Specification



Website Redesign

11

Site Map and Flow


Transition's

s
ite flow starts with the visitor entering the website on the home page, from
there, the visitor has
several options:
Login
to MY TN Access
(which will automatically
bring you to their favorites product
/collateral

portal.), connect to the ‘About Us’ page,
w
here you can get the nitty
-
gritty details on
Transition Networks

and the value that we
strive to bring to
our

customers
. Or g
o directly to
our

extensive product catalog where
visitors can see
our

extensive product portfolio.
'Contact U
s
'

directly via
email

or
phone.
You can also

learn about
our

specific products for different application on
our

'solutions
pages'
.


Sitemap: Site Administration Pages


This sitemap shows the need

for us to be more basic. Developing easier navigation
to
keep visitors a
couple clicks away from the home page

and their destination
.
While

this

site map show
s

a hierarchy of its process, the site really
needs

a structure that does not
go to
o

deep in one particular category. It should have a

two way link, allowing for links
to the homepage from any page within the site.

This site is based on the principle of
being able to allow the user to search and travel through the site with as little restriction
as possible. This is identified in the e
asy to use flow chart below.



















Functional Specification



Website Redesign

12


Sitemap Layout

MY TN Access
Login
Home Page
Transition Networks
About Us
Transition
Product Catalog

Media Converters
Contact Us

Say Hello
**
Update
4
/
4
to
Single Page
Product Finder
User Flow
News Releases
Locations
(
Phone Numbers
)
Contact Form
Live Chat
Email
Upcoming Events
Solutions
Transition
Reseller
Transition
Tech Support
Transition
**
Update
4
/
4
to
Single Page
Learning Center
Transition
MY TN Access
Transition
Social Media Icons
Company Profile
Vision
&
Mission
Statement
Company Overview
Company Milestone
Financial Reports
Electronic Press Kit
Senior
Management
Broadband
Stimulus
Network Interface
Card
New Products
Media Converters
Switches
Industrial Ethernet
Power Over
Ethernet
Network Interface
Device
CWDM Mux
/
Demux
GBIC
/
SFP
/
XFP
Management
Software
Accessories
Enterprise
/
Governement
Service Provider
Industrial
Networking
Security Networking
Ecommerce Login
Links to Resellers
Become a Reseller
Reseller Portfolio
Locations
(
Phone Numbers
)
Contact Form
Live Chat
Email
Product Literature
Webinar
Application Notes
Case Studies
White Papers
Videos


Functional Specification



Website Redesign

13

Phase 1
-

General Updates

(Internal
) (
July, August
)



Phase 1 of this plan includes Items that we can change in
-
house and require no additional
costs to
implement. They include the following:


Simplify and Improve Navigation:

Making
our

navigation throu
gh
our

product menu more clear
and obvious. (Every question mark in the mind of
our

visitor give
s them a reason to leave
our

site
.

Possibly
watch

someone try to find something on
our

site and n
ote where they have
difficulty.)


Update old content:

Make sure that all content on Transition.co
m is up
-
to
-
date. Take the time
to re
-
read through and review
our

website and remove or update old content.


Check Site Links:

As part of building a better user experience, on
e of the frequent frustrations
on websites is: the

Page Can Not Be Found

message.


Speed up download time:

Working with Visi to have fast
load times put in place. Many
people
won’t wait
more than 4
-

5 seconds on anything fro
m a 56k modem


broadband
connections.


Phase 2
-

DKS Updates (External)
(
Sept

-

Nov
)



Phase 2 of this plan includes all items that are not within our internal capabilities to complete
or require some additional cost associated with the implementation of the changes.
This will
include the following:


Site Architecture Changes:
Hard
Coding,

Structuring
,
M
ega Menus


Products and About
,
Embed
ding/Resizing

Pictures and add text to Online Catalog Pages
.


Server Side

Changes:

Longer
-
T
erm

U
pdates
,
Recommend Tool, Personalized Experience (MY TN
Access), CMS, Product Finder Reorg
anization
,
Solutions Pages Redone with 3D Images/Products,
MY TN Access Updates)




Phase 3


Future Requirements (For New Site)(Ongoing)




Future Changes:

Site Architec
ture, Server Side Requirements,
Product Navigational Changes,
Commerse Server Changes/Adds, CMS
, Usability Testing and all future website requirements.










Functional Specification



Website Redesign

14

TIMELINE


Review and Implementation P
hase

1

(
Q3 & Q4
2012)

&
Phase
2

(End of the year 2012 &
2013) is scheduled to be completed.






1.1.
Home Page

-

General Updates
-

Phase 1

(Due July 25th)
-

Cost $0


The homepage must catch the attention of the intended visitors and allow them
multiple options of easy navigation to locate their desired location. The subtle colors
blend together to make it an easy site to like. Prevalent search function lets users k
now
that they can search in a moment’s notice to locate anything.
Our

homepage's primary
real estate (the top left corner, middle section above the fold and the primary
navigation) must answer the following questions for
our

visitors: Who
we are
? What
we
have to offer
? How do
they learn more
?


This primary real estate should
also
be focused on
our

branding, tagline and clear
messages about what
o
ur

business and
o
ur

site
does for

our

cur
rent and prospective
customers.
We

need to give
our

prospects a reason
to stay and find out more.

Think of
o
ur

homepage as a storefront window.
We

wouldn't put
our

entire inventory in
our

window, nor should
we

cram in everything there is to know about
o
ur

business on
o
ur

homepage.

An effective storefront window displays a sm
all variety of carefully laid out
items that best reflect what the store has to offer, with the purpose of giving window
shoppers the incentive to come into the store.
Our

homepage should do the same.





Functional Specification



Website Redesign

15

1.2.
Change Menu Tabs:


Task

Notes

Status

Completion
Date

Consider Moving the
About next to ‘Home’.

H敬e猠扵i
汤o牥ron 睨w T牡r獩瑩sn⁩献
We’re not just a media conversion
捯mp慮y
慮y mor攠
-

䉵楬T on⁢牡 T⁶献
p牯Tu捴cfo捵献

䍯mp汥瑥
T

4I4I12

䅤T⁐牯Tu捴⁆楮T敲eunT敲e
獥慲捨⁡s敡⸠e

M慫a⁩琠獩m
ilar to Omnitron’s


䍵獴om敲e
睩汬oWno眠睨慴⁉低⁩

卥攠卥Sv敲⁓楤攠
䍨慮g敳

?

Delete ‘How to Buy’ tab.

周楳⁴慢⁩猠on⁡汬⁰ oTu捴cpag敳e
慮T⁳ v敲慬
污lT楮g⁰慧敳⸠e䥴I
楳o琠neeT敤⁦e爠r瑳Wo睮w
瑡戠慮T⁷e⁨慶攠汩瑴l攠
瑲慦晩挠瑨慴W捬楣欠on
瑨慴⁴慢
睩瑨wu琠b敩eg on⁡⁰牯Tu捴cp慧攮

䍯mp汥瑥T

4I4I12

Add the ‘Why Transition’
汩n欠瑨慴⁩W⁣u牲敮瑬y⁩渠瑨攠
L楴⁳e
ction to the ‘learn
more’ link
on 瑨攠
Hom数慧攮

U
pT慴a⁤ 捵c敮琠eo⁢ mo牥ro映f
呲慮獩瑩sn⁁ v慮瑡来

䍯mp整敤

⡃(n獩s敲e
慤T楴楯n慬a
牥r楳ion猩


4I12

䅤Tor攠v慬ae
-
p牯ps⁴o
Uom数慧攠
-

䅤T⁖慬 e
-
Prop on “easiest vendor to
To⁢ 獩s敳猠睩瑨

Mor攠empU慳楳aon⁴U攠晡f琠瑨慴⁷攠慲a W
橵獴

愠m敤e愠捯nv敲e敲ecomp慮y⁡湹
mo牥r


8
I1I12

䅤T⁰ 獳楢汥⁦污l⁩ on猠s猠
牥灲敳en瑡瑩Wn o映捯un瑲y
污lgu慧e

䥮瑥牮慴楯n慬⁰r敳ence


7I25
I12

呡戠牥摥獩Tn

䍵牲敮瑬W 瑨攠W慢⁳ 牵捴畲e⁤ 敳 W⁡汬 眠
獯m攠us敲猠Wo 敡獩汹⁩摥 瑩Wy⁴Ue⁴慢
獴牵捴畲攮e


8
I1I12

剥獯汵瑩Wn

M䭓⁩O o歩kg⁩湴o⁴Ua琠Myn慭楣⁔慢
却牵捴畲慬⁃桡 g敳e瑨慴W睯w汤敥T⁴o
瑡步⁰污c攠fo爠
瑨Ws

捨cng攠

(
Po獳楢汹l1280
砠1024 o爠r366 砠768.
)


8I1
I12



1.3
. Wireframe



Homepage


The homepage should be

laid out in a simple fashion to help to make search ability
extremely intuitive.
Adding a rotating banner to catch
the user’s

attention.

We need a
two pronged approach, one that caters to TN customers already familiar with TN and
the other for new visitors that are not familiar with our products. The split over the last
year (Jun/11


Jun/12
)

has been 70% new visitors and 30% return visit
ors.




Functional Specification



Website Redesign

16

1.3
. Example

1:


Rotating Banner Highlights
(
Advertising
/
Industry
/
Product
)
NEW
:
Promo
/
Featured Products
/
Content
Value
-
Props
Events
News
/
Press
Videos
Promotions
Company Overview

















Rolling Flash Banners and
with multiple links to
highlights of
our

choice.
Users can easily

identify a
direction on this page
within seconds allowing for
a low bounce rate.

Promotional


New
Products, New
Content

to capture
the visitor’s interest.

Links to associated
landing page.

Quick Intro to TN

Highlighting a
number of our value
props

Functional Specification



Website Redesign

17

1.3
. Example

2:


Flash Banner with rotating highlights
Opening Statement
Company
Overview
MY TN
Access Login
Events
News
/
Press
Videos
Promotions

















Rolling Flash Banners and
with multiple links to
highlights of
our

choice.
Users can easily identify a
direction on this page
within seconds allowing for
a low bounce rate.

Quick Intro to TN

Highlighting a
number of our value
props

Push
Personalization with
a large MY TN
Access Icon

Functional Specification



Website Redesign

18

1.4
. Design

Comparison


Phase 1



Cost $0


It’s important that

we
communicate concisely who
we

are, what
we

do, and what
our

site is for. Speed it up.
We need to get
our

homepage to load much faster
. Site speed

is
important (See Site Speed section in ‘Future Changes


Phase 2’
). Add a strong

Call to
Action


and place it

prominently. What do
we

want
our

visi
tors to do once they arrive
at
our

homepage?

(
See redesign #2 where we added a value prop section along
with
the feature product flash rotating banner and who we are.
)


Google Website Optimizer
as the testing platform,
then we can ru
n separate experiments on the Home Page
comparing results against the Control

page

(i.e., the current website pages).


The Home

Page experiment consisted of the Control

page

and
three


to
-

four page
variations. Traffic
should be

split evenly and randomly between the
multiple

versions
(
copy approach and two
-
or three
-
column format).


1.4
.
Example 1
-

Current

Design





Transition.com/flashbanner





Functional Specification



Website Redesign

19


1.4.
Example 2
-

Redesign
Mock Option
# 1





1.4
.
Example 3
-

Redesign

Mock
Option #

2


With Value Prop



Functional Specification



Website Redesign

20

1.5
. Resolution

Possibilities



Phase 1

-

Cost $0

(Internal) or $2,640 (DKS


Scalable)


The three main criteria in optimizing a page layout for a certain screen size are:




Web Page Initial visibility: Make sure that

all key information visible above the fold so
use
rs can see it without scrolling.

This is a tradeoff between how many items are shown
vs. how much detail is displayed for each item.



Web Page Readability: Make it easy to

read the text in various colum
ns, given the
allocated width.



Web
Page Aesthetics: How good does
our

page look when t
he elements are at the
proper size and location for this screen size? Do all the elements line up correctly


that
is, are captions immediately next to the photos, etc.?

This will likely be an issue given
our

embedded tables for the product menus.

1.5
. R
esolution

Options

The website design could be reworked to a wider resolution, or changed to scale to a range of
resolutions.


Per our designer:

The target size we are using for layouts is still 1024, which in reality is 940
-
960. This site is right
at abo
ut 930 right now. I don't know that making it a fixed width wider than that is really a
smart move, unless
we

have statistics showing that the majority of their users are consistently
using higher resolution monitors.


I'd suggest making the layout
liquid.

We should extend the layout to fill the width of the browser
at all times. Content will scale between 940


1280. I think having it widen out any more than
1280 may look really stretched out. Extending the header, footer and white backgrounds on th
e
pages will go a long way in making it look updated.


Scalable Design


Assumptions

-

Design will support 1024x thru 1920x resolutions


Page templates that would be edited

-

Home page

-

Content page

-

Category page

-

Product page


Estimates

-

2
-
4 hours to
do mockups

-

4
-
20 hours to update the html

If you would like to eliminate the HTML tables, the estimate to update the html would go up.


Functional Specification



Website Redesign

21

1.5.
Example 1
-

Industry Percentage





1.5. Example 2
-

Transition Percentage


Transition.com Jun/11
-

Jun/12



2



1024x768

54,222

12.53%

7


1920x1080

23,401

5.41%

3


1366x768

52,418

12.11%

8


320x480

14,764

3.41%

4


1280x800

49,186

11.36%

9


1600x900

11,915

2.75%


5



1440x900

30,015

6.93%

10


1920x1200

10,416

2.41%


6



1680x1050

24,145

5.58%





Functional Specification



Website Redesign

22

1.6. Browser
Usage


Transition.com Jun/11
-

Jun/12



Internet Explorer

184192

44.47%


Firefox

98036

23.67%


Chrome

71074

17.16%


Safari

38868

9.38%


Opera Mini

7600

1.83%



Opera


4527

1.09%


Android Browser

3711

0.90%


Mozilla Compatible
Agent

3123

0.75%


IE with Chrome Frame

699

0.17%


Mozilla

235

0.06%




















2.1.
Product


Menu

-

General Updates
-

Phase 1


Navigation performs two functions: The primary function is to direct visitors to
information on
o
ur

site, and the second function is to give visitors an idea ab
out what
the site has to offer.
Our

navigation needs to be easy to
use
and intuitively named.

Typically, the primary navigation is along the left side of the page or along the top (or a
combinati
on of both). This is where visitors are used to loo
king for the site's navigation.
Links should be named with
o
ur

typical user in mind
.
Re
-
architecting the product
section and product detail pages with an aim to reduce the depth of multiple parent
-
child
categories that go deeper than a user would find useful, as well as enriching the
content found on product detail pages to both attract search engine traffic and provide
a more satisfying user experience.





Internet
Explorer


Firefox


Chrome


Safari


Opera
Mini


Opera


Android
Browser

Internet Explorer
Firefox
Chrome
Safari
Opera Mini
Functional Specification



Website Redesign

23

2.2
. Tactical

Changes


Task

Notes



Progress

Completion

Dat
e

Put SFP on
intermediate page

Change SFP section by Technology

100base,
Gigabit, 10 Gig


Then Type


Cisco, HP,
CWDM

Complete

8/1/2012

Put Media Conversion
on one intermediate
page

Break down by technology, then
standalone or chassis

Create Page and
Structure

8/1/2012

Put Industrial Ethernet
on one intermediate
page


Break down Industrial Switches, Substation
Switches, Industrial Converters, Industrial
Managed Device Servers

Create/Revise
Page


8/1/2012

Put Power
-
over
-
Ethernet and
PoE +
under one page


Break down by Managed Switches, Media
Converters, and Injectors and Splitters.


Create/Revise
Page

8/1/2012


Put NIC’s on one
intermediate page

Break down by NIC PCI, NIC PCIe, NIC
PCMCIA.


Create/Revise
Page

8/1/2012


Put acces
sories on one
intermediate page


Break down by Power Supplies, Media
Converter Racks, Media Converter Shelf,
Switch Mounting Accessories, Wall Mount
Brackets, Patch Cords


Create Page

8/1/2012


Add New Management
Section for EMS


Focal Point, and
DBManager


Create Page

8/1/2012 EMS will
be added when
complete.


Add 3240 and 3280
on NID landing page






Complete

7/1/12


Add ISDN to product
menu






7/1/12


Add PoE+ to PoE
intermediate page








8/1/12

Change Transceivers


Put under media
conversion section 10mb
Ethernet products

Completed

4/4/12


Change Product
Support Files

Review Overture Networks Product
Support Files



8/1/12


Delete Conversion
Center

http://www.transition.com/TransitionNetw
orks/Products2/Static/Ethernet.aspx


Completed

4/4/12


Delete MIL
-
SM8TAF1GPB from
switch landing page


http://www.transition.com/TransitionNet
works/Landing/switching/switching.aspx


Completed

4/4/12


Embed pictures and
add text to online
catalog pages


DKS is reviewing this capability and will be
back shortly to quote us for a dynamically
changing picture manager


See

Image
Thumbnail


Phase 2


Mega Menus and
Product Navigational
Menu

Please see:
http://www.overturenetworks.com/ or
http://www.exfo.com/



See ‘Mega Menu
Section’

Phase 2

Functional Specification



Website Redesign

24

Task

Notes



Progress

Completion

Dat
e


Homepage Banner


Rotating Capabilities

Reviewing Tools


See
‘Homepage’
Section

8
/1/12


Recommend Tool


Relational Database:

See

Server Side


Phase 2

Personalized
experience


for those signed up for MY TN Access

See

Server Side


Phase 2

or Phase
3


CMS


A single database to update all product
information (SQL
-
> Reference Pulling Info)
Possible Integrations


See

CMS
Section


Phase 2


Product Finder

Searching by technology vs. product family
name. e.g. ION


New Customers may not
know what ION is.


See

Server Side


Phase 2


TN Live Help Fix


Works for tech support, but not Inside
sales.


Completed

8/1/12


Add
Speak to a ‘Sales
Engineer’ on advanced
products.


Indura, S3280, Packetband

Completed

7/1/12


Change Product
Pictures to say stock
photo







7/1/12




2.3
. Tab

Structure on Product Page



Due Date 8/1/12


Cost $0


A module tab is a User Interface (UI) design pattern where content is separated into different
panes, and each pane is viewable
one at a time. The user requests content to be displayed by
clicking the content’s corresponding tab control.


We have started to hear a lot of feedback from product management and sales that customers
are having a difficult time with the look and organiza
tion of
our

product page tab structure.

Some of the feedback suggests that we add a more pronounced tab with easy to identify
information pieces. Please see ‘Competitor Tab Structure’ for clean organization on content.

The primary goal of the module
tabs UI pattern is to permit users to view a group of related data
one at a time, which in turn allows designers to modularize this group of information in a
compacted manner, saving valuable screen real estate. In this section, we’ll discuss the
instances

when module tabs are desirable.



USE HIGH
-
CONTRAST COLORS FOR ACTIVE AND INACTIVE TABS

-

Users with low
-
vision must be
able to see which tab control is the active tab control. Using highly contrasted background
colors to distinguish the active tab contr
ol from the inactive tab control is good practice.

As a
counter
-
example, the module tabs utilized in
TN’s

website has very little contrast between
active and inactive tabs; they may be fine for sighted users, but can be troublesome for low
-
vision users.

Also, make sure that the tab control text color (foreground) is sufficiently
Functional Specification



Website Redesign

25

contrasted with the tab control color (background), even for inactive tab controls, so that users
can easily read the text in inactive tabs. It is not a good idea to deemphasize i
nactive tab
controls by graying them out.


2.3. Our

Current Tab Structure:


Now that we’ve explored module tabs in detail, it’s time to see various real
-
world examples of
module tabs in action. In this section, we present some examples of module tabs for
inspiration
and analysis.


2.3
. Competitor

Tab
Structure
:


Easy to identify and laid

out for people easily find their supplemental information.






Functional Specification



Website Redesign

26

2.4
. Image

Thumbnail


Phase

2
-

Cost ~$990


An image thumbnail could be added to the category page if an image resizing library was ported
from the DKSCommerce platform.


Estimates

-

Port image resizing library to .NET 1.1 (4
-
6 hours)

($660)

-

Implement resizing on category page (2
-
3 hours)

($330)



2.5
.
Original Product Menu Dropdown Process:


As a general rule, most usability enthusiasts, say it is bad practice to use drop
-
down menus
because they are confusing, annoying and oftentimes dysfunctional. From a design standpoint,
however, drop
-
down
menus are an excellent feature because they help clean up a busy layout.

D
rop
-
down menus are used to pull all of the pages in a certain category together in one
organized element. This is essentially sub
-
navigation.

Drop
-
down menus do in fact organize
co
ntent into small, uncluttered elements, but if not done correctly, they can be just as bad as a
messy layout. Here are some ways to make this controversial element more usable.


Avoid a Drop
-
Down with More than Two Levels

Overall, this is just about the wo
rst mistake one could make with drop
-
down menus in terms of
usability. If done with a hover menu structure, the user will lose focus of the menu whenever
the mouse pointer moves away from it. If done with a clickable structure, it has too many
buttons an
d
doesn’t work nicely.
The website
in 2.5
. Example
: 1

below makes this mistake. The
menus are very difficult to use because if you even slightly lose focus of the menu with the
mouse pointer, you have to start from the top. Notice the tooltip, which also ge
ts in the way of
the navigation.



2.5
. Example: 1
-

Two Level






Functional Specification



Website Redesign

27

2.5
. Example:
2
-

Current

Site



Four Levels



Bad Practice





2.5
.
Example 3
-

Competitor

Designs



















Functional Specification



Website Redesign

28

2.5
.
Example 4
-

Competitor

Design





Both competitor sites
have a simple one level design.
























Functional Specification



Website Redesign

29

2.6
. Product Navigational
Menu

-

Media

Converters


Hover ‘Products’
Hover Media
Converters
Hover Media
Converters By
Network Topology
Hover Media
Conversion Platform
Type
Hover Topology
or Platform







Hover Media
Converters By
Network Topology
Hover
-

Ethernet
Fast
Ethernet
10
/
100
10
/
100
Bridging
10
/
100
/
1000
Ethernet
802
.
3
ah
Remote
Managed
Gigabit
Ethernet
10
Gigabit
Ethernet
ATM
/
OC
-
x
DS
3


T
3
/
E
3
High
Speed
Serial
RS
232
RS
232
/
432
/
485
To
FE
RS
422
/
485
T
1
/
E
1
4
xT
1
/
E
1
Transport
Mux
Pots
2
-
Wire
Point
System
Slide
-
in
Module
Media
Conv
Stand
-
Alone
Point
System
Slide
-
in
Module
Media
Conv
Stand
-
Alone
Online Catalog Page
Point
System
Slide
-
in
Module
Media
Conv
Stand
-
Alone
Point
System
Slide
-
in
Module
Media
Conv
Stand
-
Alone
Point
System
Slide
-
in
Module
Media
Conv
Stand
-
Alone
Point
System
Slide
-
in
Module
Media
Conv
Stand
-
Alone
Point
System
Slide
-
in
Module
Media
Conv
Stand
-
Alone
Point
System
Slide
-
in
Module
Media
Conv
Stand
-
Alone
Point
System
Slide
-
in
Module
Media
Conv
Stand
-
Alone
Point
System
Slide
-
in
Module
Media
Conv
Stand
-
Alone
Point
System
Slide
-
in
Module
Media
Conv
Stand
-
Alone
Point
System
Slide
-
in
Module
Media
Conv
Stand
-
Alone
Point
System
Slide
-
in
Module
Media
Conv
Stand
-
Alone
Point
System
Slide
-
in
Module
Media
Conv
Stand
-
Alone
Point
System
Slide
-
in
Module
Media
Conv
Stand
-
Alone
Point
System
Slide
-
in
Module
Media
Conv
Stand
-
Alone
Point
System
Slide
-
in
Module
Media
Conv
Stand
-
Alone


One

TN’s biggest

problem
s is that potential customers may

struggle with
its

product
menu
. Customers need organized and clearly
-
defined ca
tegories for smooth navigation.
We need to a
void categories that are either so specific

(Names of products)
that barely
any products fit into them or so general that the customers cannot find wh
at they are
looking for.

Functional Specification



Website Redesign

30

2.7
.
Mega Drop
-
Down Navigation
Menus
-

Phase
2
-

Cost ~ $4
,
500


A redesigned navigation menu could aid in overall site navigation and improve usability. The
existing menu is driven directly from a data file which is currently
managed by hand. That same
file is used by the left navigation on many sections of the website. The simplest solution would
be the replace the navigation and break the connection to the data file. Doing so would require
no code to be written. If the connec
tion was retained, a new shim would need to be developed
to adapt the data file to the new navigation menu.


Assumptions

-

The menu can be changed without code changes

-

The estimates below are all optional, and only represent support that could be offered

by DKS


Estimates

-

Design menu to match existing look (4
-
6 hours)

($600)

-

Locate and install new menu, and reskin to match new design (6
-
10 hours)

($1000)

-

Develop new shim to drive menu from data file (6
-
10 hours)

($1000)

-

Create administration secti
on to manage menu content (10
-
18 hours)

($1800)


As the following screenshots show, mega menus have the following characteristics:




Big, two
-
dimensional panels divided into groups of navigation options



Navigation choices structured through layout,
typography, and (sometimes) icons



Everything visible at once


no scrolling



Vertical or horizontal form factors when activated from top navigation bars; when
activated from left
-
hand navigation, they might appear as mega fly
-
outs (not shown).


Example 1:


The Food Network's mega menu has a close button (the "x" in the upper right corner), but this
isn't necessary. Mega drop
-
downs are inherently temporary and go away on their own when
users move the pointer to another top
-
level option or to a "regular" part

of the screen.


2.7.
Mega
-
Menu Drop
-
Downs

vs. Out

Regular Drop
-
Downs

Functional Specification



Website Redesign

31


We know that after researching the topic on user testing that mega menus
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
Our

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
Our

site. Mega drop
-
downs
show everything at a glance, so users can
see

rather than try to
remember
.



Regular drop
-
downs don't support

grouping

unless you use kludges, such as prefixing
secondary choices with a "
-
" to indent them. Mega
-
drop
-
downs let you visually
emphasize relationships among items. This again helps users understand their choices.



While plain text can be wonderful,
illus
trations

can indeed be worth a mouthful of
words, as the Word 2007 example shows. Mega drop
-
downs make it easy to use icons
and pictures when appropriate. And, even if you stick to text alone, you have richer
typography at
Our

disposal (letting you differe
ntiate link sizes according to their
importance, for example).

Speed

Speed is essential to making any user interface feel responsive. Interface elements must
render
within 0.1 seconds

to suggest physicality and make users feel like a display's changes are
a
direct result of their actions. Slow
-
rendering GUI elements seem sluggish and make users feel
like the computer is making things happen, not them.

We need to should our

mega drop
-
down implementation's response time on a variety of
computers and browsers.


The
response

time
should not be
too

fast, though: the mouse should
remain stationary for 0.5 seconds

before you display anything that's hover
-
dependent, such as
a mega drop
-
down or a tooltip. Violating this guideline will make the screen flicker insufferably
when users move the mouse. Only after 0.5 seconds of resting the pointer on a navbar item can
you

assume that a user actually wants to see its associated drop
-
down.

Thus, the timing should be:

1.

Wait 0.5 seconds.

2.

If the pointer is still hovering over a navbar item, display its mega drop
-
down within 0.1
seconds.

3.

Keep showing it until the pointer has been outside both the navbar item and the drop
-
down for 0.5 seconds. Then, remove it in less than 0.1 seconds.

Functional Specification



Website Redesign

32

One exception to item 3: The very best implementations can sense when a user is moving the
pointer from the

navbar item to a destination within the drop
-
down. When the pointer is on
such a path, the drop
-
down should remain visible. This supplementary guideline addresses the
diagonal problem
, which happens when the path temporarily takes the pointer outside the
active area. The drop
-
down shouldn't disappear when the user is on the way to point to
something within it.


The diagonal problem:

The pointer path goes outside the area that keeps the drop
-
down active.

In the above example, the user first pointed to the
"Holidays & Parties" navbar item and now
wants to select "Appetizers." Moving the pointer between these two spots makes it cross the "In
Season Now" navbar item. Many users will move so fast that the pointer will exit the active area
for less than 0.5 seco
nds. However, older or leisurely users might move the mouse so slowly
that the drop
-
down would disappear while they're still aiming for a menu item. Very annoying.

Grouping the Options within a Mega Menu

The main grouping guidelines are:



Chunk options into

related sets
, such as those you discover after doing a
card sorting
study

of users' mental model of the features.



Keep a medium level of
granularity
. Don't offer huge groups with numerous options
that require extensive time to scan. Conversely, don't make

the individual groups so
small that the drop
-
down has an overabundance of groups that users have to spend
time understanding.



Use concise, yet
descriptive labels

for each group. Remember the standard rules for
writing for the Web
: enhance scannability by
starting with the most information
-
carrying word and
avoid made
-
up terms
.

o

To keep words short and direct, the base form of verbs ("shop") is usually better
than gerunds ("shopping").

o

Differentiate labels. Action Envelope's "Ways to Shop" and "Shops," for
example, don't work well together.



Order

the groups. You can do this using an inherent order among the features (as for a
workflow) or according to importance, putting the most important and/or frequently
Functional Specification



Website Redesign

33

used group on top (in a vertical design) or to the
left (in a horizontal layout, assuming a
left
-
to
-
right language like English).



Show each choice only once
. Duplicating options makes users wonder whether the two
occurrences are the same or different. Also, redundancy makes the entire interface
bigger and
more cumbersome.

Keep Megas Simple

The standard usability guideline to "keep it simple" also applies to mega menus. Just because
you
can

put anything into them doesn't mean that you should.

In particular,
avoid GUI widgets

and other interface elements that involve more advanced
interaction than simply click
-
to
-
go. Mega drop
-
downs are a fleeting screen presence and
shouldn't replace dialog boxes, which are the natural home for more complex interactions and
can support them b
etter. Among other benefits, dialog boxes have a standard dismissal method
(the
OK/Cancel buttons
), stay on the screen until they're dismissed, and can be moved around if
users need to see something that the box obscures.

Action Envelope offers a complete
login mini
-
screen within the navbar's "My Account" drop
-
down. It would be better to simply have a one
-
click "My Account" link that takes users to a full
-
featured page that supports login for existing users. (Better still: put this link in the utility nav,
which is where people actually look for it according to
eyetracking research
.)

Similarly


but worse still


Novell hides its search box within a mega drop
-
down of the site's
main navigation options. This is bad for two reasons:



The
search box should be co
ntinuously visible

on the page rather than displayed only
when users activate the drop
-
down menu.



Having GUI widgets (a text field and a command button) makes the drop
-
down a
heavyweight interaction area instead of a simple navigation menu.

A final point
here: just because mega menus are big and have room for many options doesn't
mean you should overload them. Simplicity applies to interaction semantics at least as much as
it applies to the presentation layer. Fewer options mean less to scan, less to under
stand, and
less to get wrong.


Accessibility

Because dynamic screen elements always have the potential to cause accessibility problems, it's
important to code them with screen readers and other assistive technology in mind.

Even if coded correctly, mega dr
op
-
downs can cause problems for low
-
vision users who use
screen magnifiers to enlarge tiny portions of the screen. (The same issue impacts iPhone users
Functional Specification



Website Redesign

34

and other users of zoom
-
capable
mobile devices
.) If the user is unlucky, the zoomed view might
show only

a portion of the mega drop
-
down, which will appear to be the complete menu.

For example, in the Action Envelope screenshot above, the screen magnifier might show the
"Paper & More" and "Ways to Shop" groups but not the "Shops" group. The missing drop
shad
ow, which appears on the full menu's right edge, is too subtle a signal to help most users.
Thus, the site could lose orders if it had many low
-
vision customers (a common situation for
sites
targeting older users
). Having a strong visual signal for menu bo
rders is one way to
alleviate this problem.

In addition, having tiny selectable items hurts touchscreen users, and overly finicky show/hide
behaviors hurt people with motor skills impairment.

There are two main approaches to improving the accessibility of
mega drop
-
down menus:



Simple
: Don't bother making the drop
-
down itself accessible. Instead, make each top
-
level menu choice clickable,
leading to a regular Web page

where you present all drop
-
down options in plain, fully accessible HTML.



Advanced
: Emulate
the "keytips" approach designed to add accessibility to Microsoft's
ribbon controls. Keytips are an alternative to access keys and are easier to understand.
The keytips interaction sequence is:

1.

Press "Alt" to enter keytip mode.

2.

Press a character to choose
one of the top
-
level navbar items and display its
mega drop
-
down. In the drop
-
down, show the access key next to each menu
option.

3.

Within the drop
-
down, let users press one (or two) characters to choose
options. Because the access key displays while the dro
p
-
down is in key

tips
mode, users who can see don't have to rely on memory.

If you're a rich site and/or especially concerned with accessibility, you should implement both
the simple and advanced features. Most sites, however, will probably have to make do

with the
simple approach.



3.1
. Solutions



Menu



General Updates

-

Phase 1

& 2

User experience design would entail:



Engaging each of the f
our

audience segments more effectively, speaking to their unique
challenges and highlighting solutions that cater to their needs.




Redo intermediate Solution Page:
(
http://www.transition.com/TransitionNetworks/Solutions/Default.aspx
)






Not
hing else immediate, all phase 1 (Q3
) changes (Being reviewed by VMT).

Functional Specification



Website Redesign

35

*
Example 3.2. shows our current intermediary page, by adding mega
-
menus we can add a lot
more value to our us
ers without even clicking through to an intermediary page. See alternative
examples 3.3. and 3.4. These allow user to pick a particular sub
-
vertical without having to go
through multiple pages. A lot of our competitors have already taken advantage of th
is layout.
Please see 3.5. and 3.6.


3.1. Example 1
-

Current Page
-

Intermediate Page






3.1. Example 2
-

Alternative Design (5 Verticals)







Functional Specification



Website Redesign

36

3.4
. Example 3
-

Alternative Design
(4 Verticals
)




3.5
.

Example 4
-

Competitor Designs



3.6
. Example 5
-

Competitor Designs


Functional Specification



Website Redesign

37

4.1
. Reseller

-

Menu

-

General Updates
-

Phase 1


Change Reseller Dropdown Menu:



Clean
-
up



Isreal and Adam to review



Move Reseller Portfolio To Reseller landing page.



5.1
. Tech

Support
-

Menu

-

General Updates
-

Phase 1



Cost $0


Today, more and more
of
our

products
created
are becoming very complex and software based.
.

There are quite a lot of different Internet services that we use every day and most of those
popular websites do provide online help systems to their users. And it is really great when an
average user who gets in trouble can quickly solve their problem wi
thout contacting technical
support and waiting too long for the reply. Moreover, as it was mentioned above, having a Web
Help system on
our

website, you can simply give customers who need technical support a link to
the corresponding topic in the online he
lp system.


5.2
. Tactical

Changes


TASK

Notes

Status

Completion Date

Change to a single
page

Move the following
under a single
intermediate page

Completed

4/3/12

Contact Tech Support


Completed

4/3/12

MY TN Access


Completed

4/3/12

Visio Stencils


Competed

4/3/12

CAD Drawings


Looking into
-

Tentative Direction 8
-
7
-
12

8/1/12

Help Files

Focal Point and Web
Based Management


8/1/12

Product Change
Notification


Competed

4/3/12

Warranty


Completed

4/3/12

End of Life Products

My TN Access

C
omplete
d

4/3/12

Customer Satisfaction
Survey


Completed

4/3/12

Look into Skype
localized Number



8/1/12






Functional Specification



Website Redesign

38

5.3
. Tech

Support Today

-

Completed




5.4
. Tech

Support Revised (Updated 3/4/12

-

Completed
)






Functional Specification



Website Redesign

39

6.1
. About

-

Menu

-

General Updates
-

Phase 1


The about us page will talk about who we are and why we’re here. What
our

mission is
and

why it is important to
serve
our

customers with the highest level of transparency.
This page includes: Who we are, and what we do. Content will change from text to

video through a flash banner. The video will be an overview of engineers building the
product testing the product and talking about why it is the best product in the world.
Currently
our

pages are heavily text based (see ‘current page’) and will require

a lot of
reorganization.


6.2
. Tactical

Changes


Task

Notes

Status

Completion
Date

Senior Management


M慫攠慳⁡
獩sg汥⁰慧攠comp汥瑥


Pos獩s汥l
Picture with ‘Pop
-
up’ box with
楮景.



President & General Manager



Engineering Vice President



Finance:
Controller



Human Res
our
ces Manager



Manufacturing Manager



Director of Operations



Director of Marketing (Possible
Update) Update


䍨慮g攠P慴a
瑯⁖楣攠P牥獩r敮琠o映䝬ob慬a
M慲步瑩Wg⁃卉⁣omp汥瑥



Quality Manager



Sales


坯牬r⁗楤攠


噩c攠
P牥獩r敮琠of⁗o牬r睩w
e⁓慬敳e
佰敲慴Oons



Sales


No牴栠rm敲e捡c


噩c攠
P牥獩r敮琠of⁎ r瑨⁁W敲楣en
卡汥l



Sales
-

Director of Sales &
Operations EMEA



Sales
-

Director of International
Sales



Update


䅤T⁋ev楮


M楲ic瑯爠
o映P牯Tu捴⁍a牫r瑩Wg
⡲敱(敳e敤⁰eoWo⁡湤
T敳e物r瑩Wn)⁲ qu敳瑥T⁩湦o
晲fmev楮


坉P

8I17I2012

Functional Specification



Website Redesign

40

Make Company Profile a single
page, which includes:



Vision/Mission Statement



Company Overview (Needs
Update)



Company Milestone



F
inancial Reports



Electronic Press Kit (Needs
Update).



9/1/2012

General Updates



Review and
Update. Change intermediary
page



Career Openings




ISO Certifications




Environmental




Associations



Broadband Stimulus



9/1/2012



6.3
. Wireframe

-

About Us


About Us
Company
Profile
News
Releases
Events
Senior
Management
Career
Openings
ISO Cert
Environment
Associations

Identifying who
we are and
building trust in
our

products.

Put a face to
TN

Functional Specification



Website Redesign

41

6.3
.
Example 1
-

About

Section
-

Current Page

Layout




6.3
. Example 2
-

About

Section
-

Potential Page

Layout

with

Mega Menu














Functional Specification



Website Redesign

42

6.3.

Example 3
-

About

Sec
tion
-

Competitor Page





6.3. Example 4

-

Site

-

Company Overview






Functional Specification



Website Redesign

43

7.1
. Contact

US
-

Menu

-

General Updates
-

Phase 1



Cost $0
-

Completed


Contact us form, also used to track conversions. The visitor simply fills out a
small
contact field and without getting too detailed or having too many fields to scare the
visitor away. These simple easy steps allow the customer to make the first approach,
letting them make the first move and not be pushed into the situation.





Mak
e 'Contact Us' a single page: This includes Corporate Headquarters, US Sales
Office, International Sales Office, Department Contacts (Consider Putting this under the
‘About’


Senior Management complete




Delete Direction (Corporate Headquarters include
s this). complete




7.2
. Contact

Us

Wireframe


Name
Email
Subject
Text
Telephone
Where did you
find us
?
Message









Functional Specification



Website Redesign

44



























7.2. Example 2
-

Contact Us
-

Section Update 4/9/12
-

Now Current Page



7.2. Example 1
-

Contact Us
-

Section

-

Current
Layout


Functional Specification



Website Redesign

45

8.1
.
Learning

Center
-

Menu

-

General Updates
-

Phase 1



Cost $0


Task

Notes

Status

Completion
Date

Delete the
following
menu
dropdown
items:


Completed

3/15/2012

Add the
following
items:



Add Learning Center Intermediate Page


When a user
clicks of the
actual menu.



Add Telco Glossary to Product Literature Section



Add the ‘add to button’ in the literature page even when
not logged in, which brings user to MY TN Access login.



Industrial VMT is updating the Media Conversation for
Industrial Applications


Whitepaper and Power Over
Ethernet


AppNote.



Enterprise VMT is updating the Fiber to the Desktop


AppNote and Financial Campus


AppNote.



Telco VMT will update Quality of Service


Whitepaper
and Remote Management
-

AppNote


WIP

8
/5/12















Functional Specification



Website Redesign

46

8.2
. Learning

Center
-

Updates and Changes





9.1
. How

to

Buy
-

Menu

-

General Updates
-

Phase 1



Cost $0

-

Completed


Delete from menu and make sure that this is on every page



10.1.
MY TN Access
-

Menu

-

General Updates
-

Phase 2


Cost $


Continue to build off the personalized experience.
Web personalization is a strategy, a
marketing tool, and an art. Personalization requires implicitly or explicitly collecting visitor
information and leveraging that knowledge in
our

content delivery framework to manipulate
what information you present to
our

users and how you present it.


Correctly executed, personalization of the visitor
’s experience makes his time on
our

site
,
more
productive and engaging. Personalization
should be

our

goal and can

also be valuable
TN
,
because it drives desired business results such as increasing visitor response or promoting
customer retention.


Functional Specification



Website Redesign

47

To make sure that we always have the goal in mind we need to do the following:


1.Define
Our

business go
als.

2.Convert
Our

business goals into personalization business requirements.

3.Convert
Our

business requirements into use cases.

4.Define the user profile and formally define the user segment(s).

5.Determine which metrics you will use to evaluate the init
iative.

6.Implement.

7.Repeat.



Future Changes
-

Phase 2

or 3

(Q1 & Q2


2013)


Database Requirements
:


1.1. Change

To Cloud
-
Based Virtualized Server (Visi)


In Process
-



Cost $
4,244

-

$724 from Visi and $3,520
(32 hours @ $110.00)
from DKS

We are currently switching to
a cloud
-
based server to help

with some
of the slowness to
our

site. (see site speed to understand the importance of a fast server response and
better customer experience.)

This is import element that will provide a much bett
er
experience in addition to helping us rank higher with Google and bring up
our

ad quality
scores with Google.


Server Side Needs:

(Dynamic Product Finder & Navigational Menu)



2.1.
Product Finder



Phase 2


Cost ~$
2
,
310


This can/will be updated the same way that we could update the product menus.
(Please see product menu server side changes) The reason for this change is to make
this tool more intuitive for first