building internet sites with sharepoint · building internet sites with sharepoint - a real world...

Building Internet sites with SharePoint- A real world case study on how we did it

ATUL TOTRE

Nov, 2009

Stay Back and Win SharePoint 2010 Book from SPC09

© 2009 Burntsand, Inc www.burntsand.com

Agenda

1. Introduction

2. About this Presentation

3. Case Study discussion of a SharePoint WCM project

4. Q&A

Stay Back and Win SharePoint 2010 Book from SPC09


About this Presentation

What we will cover today:

• Share a real-world case study and discuss

– Customer Requirements

– Business Case

– Project Planning

– Execution Process and Approach

– Design

– Governance

INTRODUCTION


• Founded in January 1996

• 7 North American locations

◦ US: Boston, Indianapolis, Houston, San Jose, Irvine

◦ Canada: Toronto, Calgary, Vancouver

• Publicly traded on Toronto Stock Exchange

• More than 350 blue chip clients

• Business is centered around Technology consulting

• We do business onsite

• Enterprise Content Management and related solutions are our Niche

• Three Partners:

• EMC

• Microsoft

• BMC

About Burntsand

Burntsand's core values reflect our commitment to your success:

Accountability – Leadership – Teamwork – Trust

CalgaryVancouver

San Jose

Toronto

Boston

Houston

Indianapolis

Irvine


About Burntsand

Three Partner-aligned and Competency-focused Business Units

ECM

Practice

Collaboration

Practice

EOSM

Practice


A Microsoft Go-To Partner

Mobile Sales Force Explorer ADATUM Financial Portal LITware Site Project Team Web 2.0 site

Microsoft Top 50 National Systems Integrator Managed Partner


About Me

• Where do I work?– Practice Director , Collaboration Practice– Based out of San Jose, CA

• What do I do?– Solve customer’s business problems by applying architecture and technology solutions– Been working with SharePoint since version 2001– Love working with Silverlight and Expression Blend– 14 years of IT industry experience

• I am..– MCTS : Microsoft Certified Technical Specialist, MOSS and WSS– MCP : ASP.NET, C#– TOGAF certified Enterprise Architect– PMI PMP

• Social Networking– Twitter : @mindscout– LinkedIn: Atul Totre– Blog: atotre.wordpress.com

ATUL TOTRE \ [email protected]

CASE STUDY DISCUSSION


Project Overview

• Customer Vision– Customer is launching a project to implement an Internet site re-

design leveraging Microsoft Office SharePoint Server 2007 as the core infrastructure.

– The goal of this project is to provide a superior user experience for the public facing Internet web site

– while implementing MOSS web content management functionality to provide ease of content publishing and more effective site management and

Please create a better web site for us - customer


Business Objectives

• Offer better web presence by improving user experience

• be more effective with presentation of advertising

• Implement better and consistent landing pages for all business lines with a focus on business specific information

• Support key WCM features such as – Content publishing

– site versioning,

– change management,

– design consistency and

– reuse

• New Search and Branch Locator Capability

• Improve customers ‘self-service’ capabilities


Execution Approach

DISCOVER


Discover Phase

• Identify constituents

• Conduct Executive Roundtable and Envisioning Workshop

• Share Concepts and Guiding Principles of Website design

• Illicit responses to gauge customer agreement and interest

• Create a high-level plan with milestones and timeline


Identify Constituents

• External Users– Retail Consumer

– Small Business Consumer

– Commercial Consumer

– High Net Worth Consumer

• Internal Users– Content Editor

– Content Approver

– Business Reviewers

– MOSS Administrator


Envisioning Workshop

• Web Design principles and parameters for consideration

1. Simplicity

2. Arrangement / Layout

3. Consistency

4. Complexity

5. Clarity

Q: What kind of web site do you want?



• Simplicity– Ockham’s Razor

• Given a choice between designs which are functionally equivalent, the simplest solution is preferred

– Hick’s Law

• The time it takes to make a decision increases as the number of alternatives increases

• Case study; Yahoo vs. Google


Simplicity

Yahoo.com

• Hick’s Law

The time it takes to make a decision Is directly related to the number of options available.

Broadly, users are typically visiting this site for one purpose, most other items “below the fold” are essentially noise.


Simplicity

Google.com

The primary focus is also the focus in terms of layout.

With far fewer options present on screen, the viewer has less ambient noise to process before moving to the task at hand.

(Google varies its logo periodically; it’s useful to note that, even though the logo is obscured here, the page is still clearly recognizable by its layout.)



• Arrangement / Layout– Hierarchy

• Visual structures for establishing dominance/subordinance communicate function at a glance; surfaces can be “read” without being read

• See also the “1-second” rule; Comprehension occurs in stages, meaning unfolds progressively

– Gutenberg Diagram

• User surfaces are visually divided into quadrants, arranged by our reading habits (left-to-right, top-to-bottom)

– Picture Superiority Effect

• Pictures are remembered better than words.


Hierarchy

Citigroup.com

Hierarchy is established through contrasts in scale, weight and color.

Visual hierarchies aid the viewer in “reading” a surface without literally reading it.

Hierarchies in layout are tied to cultural reading standards; western readers tend to process information left-to-right, top-to-bottom.


Hierarchy

Apple.com

Comprehension occurs in stages, meaning unfolds over time.

•“quick glance” understanding,

•“cursory overview” understanding,

• “deep read” understanding.

GESTALT

“The organized whole,” the perceptual total, more than the sum of its parts.

PICTURE SUPERIORITY EFFECT

Pictures are more easily recalled than words.


• Consistency– Usability increases when similar functional parts are expressed

similarly

– Stability of branding/navigation/tone increases brand trust

– Recognition Over Recall

• users are better at recognizing things than recalling them.



Consistency

Bank of America

One of the primary (and often overlooked) challenges in web design is communicating location in a virtual space.

Internal consistency is the biggest asset in this aim; Wayfinding/navigation and identity elements should be laid out in stable, consistent places, which aids the user in navigating “subconsciously”.

Consistency in navigation, tone and branding help build brand trust.


• Complexity – Depth of Processing

• Information which is analyzed deeply is better recalled than information that is analyzed superficially

• Deep analysis is traditionally aided via the use of multiple presentation media (photography, video etc.)

– Flexibility/Usability Tradeoff

• Usability decreases as flexibility increases.

• Flexibility increases complexity, time-to-action etc.

– Progressive Disclosure

• Only the necessary information is displayed at any given time



Complexity

Adidas.com

Deep analysis is aided by the use of multiple presentation formats (photography, animation, video etc.)

PICTURE SUPERIORITY EFFECT

Visual information is more easily recalled than verbal, and takes less time to process.


Complexity

Amazon.com

PROGRESSIVE DISCLOSURE

Complexity is in part managed by revealing only as much as is necessary at a given moment.

INFORMATION ARCHITECTURE

Complex taxonomies of items are grouped in sensible categories to manage complexity.

FLEXIBILITY/USABILITY TRADEOFF

Usability decreases as flexibility increases. Again, the time it takes to make a decision is directly related to the number of available options.

Organization makes a system of many seem fewer. (Maeda, 2008)


• Clarity– The primary goal of design is to illuminate functionality.

– Visual tools help speed the user in “reading” complex information in short order.



Clarity

Crate & Barrel

The ultimate goal of visual design is clarity; -

-layout,

-contrast,

-color,

-scale

are all tools for ensuring that readers process information in the proper order, and can intuit complicated structures with ease.


Clarity

Goldman Sachs

The combined use of

-simplicity,

-hierarchy,

-consistency,

-managed complexity

creates

clarity of purpose,

which generates impact.


Clarity

Mint.com

Easily read surfaces are perceived as more trustworthy, and can make complicated systems simple to traverse.

Design is a key determinant to building on-line trust with consumers.

Less is not more. Just enough is more. (Milton Glaser)


High-Level Project Plan

Milestone Due Date

Pre-Interview / Kickoff Planning 26-Jan-09

Governance sign-off 4-Feb-09

Requirements Sign-off 19-Feb-09

Technical Design Sign-off 23-Feb-09

Requirements Sign-off 19-Feb-09

Wireframes & Sitemap sign-off 5-Mar-09

Visual Design sign-off 3-Apr-09

Style Guide complete 3-Apr-09

Front-End Development Complete 1-May-09

Performance Testing Complete 29-Apr-09

System Testing Complete 11-May-09

User Testing Complete 14-May-09Finalize Application Configuration and Deployment Document 19-May-09

Finalize Content Entry 4-Jun-09

DEFINE


Define Phase

• Create wireframes or straw-mans

• Create functional requirements

• Create Functionality Matrix

• Use this time for engineering activities

• Create Visual Design – 3 alternatives

• Helps in brainstorming, Ideation and Collaboration

• Finalize what we will be building


Wireframes

Removed for Confidential Purposes


Functionality Matrix

Removed for Confidential Purposes

DESIGN


Design Phase

• Create governance model

• Create system architecture

• Create technical design specification


ArchitectureA Medium Farm Topology


Application Design

• Create technical design specification

• Decide security model

• Search and Advanced Search

• Branch Locator integration design

• Application design

• SharePoint content design


Security Model

• Active Directory Authentication– Server farm in DMZ requires AD domain in the farm

– SharePoint usability better with AD than with FBA

– No sign-in link for content creators from public site

• Internet/Extranet Domain– Separate external and internal domain (best practice)

– SP databases are part of external domain so that they can be accesses by WindowsAuth

– Alternative is to put SP DBs in internal domain and use SQLAuth

• Internal Domain– Content creators and approvers use their internal domain ID to participate

– Single Sign on with One way trust established between external and internal domain

– Note that if external accounts are created temporarily and a one way trust is established later, there is no mechanism in SharePoint to “transfer” user information to the internal domain accounts. So for example, the content histories and audit trails will always refer to the external accounts.


Workflows

• Approval– The out of the box Approval Workflow is used for all content and images that are added

or modified in the site.

• Collect Feedback– The Collect Feedback Workflow is added to specific page libraries that contain line of

business content to be reviewed by Business personnel after the content has been created by the Content Editors at the request of the business.

– The Collect Feedback workflow is configured to only run by manual start so that it is an optional workflow that can be run only when necessary.


Content Types

• Base Page

• Welcome Page

• Location Page

• Site Collection Image

• Bio Page

• Tabbed Page


• Base Page– Parent Type: Page

– Site Columns:

• Page Content (Publishing HTML): (Existing field type) This is the main content block for the page

• Page Image (Publishing Image): (Existing field type) This is the primary image that is not embedded with the content

• Summary Links (SummaryLinks): (Existing field type) A list of additional links associated with the page

• Footer Type (Choice) – Required: (New field type) indicates the footer content to be displayed for the page.

• News Alert (Boolean): New Site Column specified in Site Columns section above

• Personal (Boolean): New Site Column specified in Site Columns section above

• Business (Boolean): New Site Column specified in Site Columns section above

• Personal Sort Order (Number): New Site Column specified in Site Columns section above

• Business Sort Order (Number): New Site Column specified in Site Columns section above

• More Link Text (Text): New Site Column specified in Site Columns section above

Content Types


• Welcome Page– Parent Type: Eastern Bank Base Page

– Site Columns:

• Side Box Content (Publishing HTML): (New field type) This is the content that will appear in the content box at the right of the page below the Login box

• Home Type (Choice): (New field type) indicates if the home page is the personal home page or the business home page.

Content Types


• Location Page– Parent Type: Base Page

– Site Columns:

• Lobby Hours (Publishing HTML) – Required: (New field type) Hours that the lobby of the branch is open

• Drive-up Hours (Publishing HTML): (New field type) Drive up window hours

• Safe Deposit Boxes (Boolean): (New field type) True if the branch provides safe deposit boxes

• Drive up ATM (Boolean): (New field type) True if the branch has a drive up ATM

• 24-hour ATM (Boolean): (New field type) True if the branch has an ATM that is available 24 hours a day

• Bank Holidays (Publishing HTML): (New field type) The holidays that apply to this branch. Is it possible to specify a default for a content type property?

• Latitude (Text) – Required: (New field type) The Latitude of the branch location used in the branch locator

• Longitude (Text) – Required: (New field type) The longitude of the branch location used in the branch locator

• Address (Publishing HTML): (Existing field type) The street, city, state, and zip code for the branch locator

• Phone Number (Publishing HTML): (Existing field type) The phone number for the branch

• Eastern Insurance (Boolean): (New field type) Indicates if the location is an Eastern Insurance location

• Eastern Bank (Boolean): (New field type) Indicates if the location is an Eastern Bank location

Content Types


• Site Collection Image– Parent Type: Document

– Site Columns:

• Splash (Boolean): New Site Column specified in Site Columns section above

• Carousel (Boolean): New Site Column specified in Site Columns section above

• Personal (Boolean): New Site Column specified in Site Columns section above

• Business (Boolean): New Site Column specified in Site Columns section above

• Personal Sort Order (Number): New Site Column specified in Site Columns section above

• Business Sort Order (Number): New Site Column specified in Site Columns section above

– This content type inherits from the Document content type

– used in the Site Collection Images library.

– It is assigned the custom site columns needed to classify site collection images for the splash and carousel home page features.

Content Types


Site Columns

• Images– Splash (Boolean), Group EB – indicates if the image is a Splash image. It will

default to False.

– Carousel (Boolean), Group EB – indicates if the image is part of the personal or business home page carousel

– Images for SharePoint pages can be stored at each site level or at the Site Collection level.

– Any image that may need to be used in more than one site is stored in the Site Collection Images library and assigned the Site Collection Image content type.

– Images are organized in folders


Site Columns

• Home Page Content (News, Splash Images, Carousel Images)– Personal (Boolean), Group: EB – indicates if the content should appear on the Personal

home page. It will default to True

– Business (Boolean), Group: EB – indicates if the content should appear on the Business home page. It will default to True.

– Personal Sort Order (Number), Group: EB – indicates the sort order for associated Personal Home Page content; defaults to 10.

– Business Sort Order (Number), Group: EB – indicates the sort order for associated Business Home Page content; defaults to 10.

– News Headline (Text), Group: EB – The news/alert headline to be displayed

– News Alert (Boolean), Group: EB – indicates if the content should appear in the news and alerts section of a home page.

– More Link Text (Text), Group: EB – the text to display in the “More Information” link in the news and alerts section; defaults to “full story …”


Site Columns

• Tabbed Content– These site columns will be used on pages that have tabs with content.

– Tab 1 Label (Single line of Text), Group: Page Layout Columns – Label for the first tab

– Tab 1 Content (Publishing HTML), Group: Page Layout Columns – Content for the first tab

– Tab 2 Label (Single line of Text), Group: Page Layout Columns – Label for the second tab

– Tab 2 Content (Publishing HTML), Group: Page Layout Columns – Content for the second tab

– Tab 3 Label (Single line of Text, Group: Page Layout Columns – Label for the third tab

– -…….


Page Layouts

• Home Page

• Basic Content Page

• Product Comparison Page

• Insurance Page

• Tabbed content page


Page Layouts

• Home Page Layout

– Based on the Welcome Page content type.

– Two content areas:

• one in the middle of the left side of the page

• one in the right side box.

– Web part zone areas for

• the Splash and News features,

• the Login Web Part, and

• the Carousel section.

– Splash Image

• The Splash image on the Personal and Business Home Pages

• Rotates using one or more images uploaded to the Site Collection Images library in a specific folder dedicated to the splash images.

– The Splash Image data is loaded onto the home page using a Content Query web part

– and then utilized by javascript to enable the rotating of the images


Page Layouts

• Basic Content Page Layout

– Based on the Welcome Page content type.

– Multiple layouts

– Content summaries section:

• Content Query Web Part display content summaries

• Product Comparison Pages

– Product Comparison Pages created as Basic Content Pages, but utilize the “Reusable Content” feature of SharePoint Web Content Management.

– One or more Product Comparison HTML snippets created in the Reusable Content list that can then be added quickly to basic pages as the basis for the comparison on that specific page.

– The Reusable Content must be created with Automatic Update set to No, so that a copy of the comparison HTML is inserted which can then be updated by the copy writer.


Footers

• Footers

– Several different footers depending on context.

– Maintained in Reusable Content List

– Master page contains control that reads Footer Page property and displays appropriate content

• Reusable Content Control

– A user control

– Pulls content from Reusable Content list.

– Uses Page property


Branch Locator

• Implemented by using

– Google Maps API.

– Codeplex GoogleMap control (googlemap.codeplex.com)

– Smartpart with AJAX connections user control web part wrapper (codeplex.com/smartpart)

• Three User Controls are developed

– Search (implement the SmartPart.IConnectionProviderControl interface)

– Results (embeds the CodePlex GoogleMap control )

– Directions• This control uses the GoogleMap control and set it to display directions based on the query

string parameters

• create a “directions query” of

• “from: startLat, startLong (startAddress) to: destinationLat, destinationLong (endAddress)”.

• It contains a section for the step by step actions to take to reach the destination.

• This will be filled with data obtained by the GoogleMap object.

GOVERNANCE


MOSS Governance – Overview

• IT and Support Resources– Infrastructure roles as well as administrator, business and end user

• Logical Site Architecture– Use of web applications, site collections and sub sites

– Taxonomy

• Application Usage Policies– Policies for use of SharePoint

• Communication and Training Plans– Communication to the business about the Internet

– Communication within the Strategy and Tactical Teams

– How users will be trained

• Information Architecture and Visual Design Standards– Typically includes standards to guide future build out of SharePoint.

– This will be handled outside of the governance sessions.

• Physical Site Architecture– Server farm model and scalability plans

– Physical environments (Dev, QA, Staging, Production)

• Operations Policies– Standard IT policies for maintenance of SharePoint


IT and Support Resources

• Strategy and Tactical Teams– Good definition provided

• IT Infrastructure Roles– Need to identify who will fill the various roles

• Training Roles– Need to break out roles and make assignments

• SharePoint Application Support Roles– Are custom roles needed?

– Need to make assignments at user level

• Do roles vary by audience?

• Business Roles– Content Managers

– Content Approvers


Logical Site Architecture

• Web applications– How many web applications

– What specialized web applications should be considered

• Central Administration

• Shared Services

• Site collections– How many site collections

– What are the policies for creating new site collections

• Subsites– Includes guidelines as well as description of templates or site definitions


Application Usage Policies

• Application Settings– Features allowed

– Self-service site creation

– Information management standards

• General Policies– Rules for use of third party products

– Codes of Conduct

– Confidentiality policies

• Content Authoring and Management Policies– Roles, Check-in/out, Versioning, Workflow

• Responsibilities and requirements for site owners– Requirements of site owners

• Support and Site Access Procedures


Communication and Training Plans

• Communication to/from the business about the Internet– Governance Policy

– Promotion of content to the Internet

– Codes of conduct

– Who to contact about the Internet

• Communication within the Strategy and Tactical Teams– How, When

• How users will be trained– Content Managers, Approvers

• Support Plan– What will be the support model for the Internet as external users or internal users

encounter issues?


Information Architecture and Visual Design Standards

• Information Architecture– Taxonomy of site

– Need for more than one site collection

– Site Templates

– Page layouts

• Visual Design Standards– Master Pages

– Style Sheets

– Images


Server Farm Architecture

• Farm type– Small, Medium or Large

– Gather requirements for application servers (Shared Services)

– How will farm scale?

• Environment Configuration– Identify environments

– Define physical attributes for each environment

• Development Process– Define procedures for developing, testing and deploying changes

– Include details for deployment and/or migration processes

• Change management process

• Deployment best practices


Operations Policies

• System administration– Standard Tasks

– Required Documentation

– Policies

• MOSS platform administration– Standard Tasks

– Required Documentation

– Policies

• Communications– Separated into root level section

• Support– Separated into root level section

• Training– Separated into root level section


Contact information:

– Atul Totre, Practice Director

• [email protected]

Burntsandwww.burntsand.com

Thank you!

Questions

mailto:[email protected]

building internet sites with sharepoint · building internet sites with sharepoint - a real world...

Documents