Create Engaging Branded SharePoint Portals and Plan for Content

SharePointintersection

Create Engaging Branding SharePoint Portals and Plan for Content

Cathy [email protected]

2© DEVintersection. All rights reserved.

http://www.DEVintersection.com

Speaker Bio

Cathy Dew Consultant at Planet Technologies

Graphic Designer, Consultant and SharePoint MVP

Over 6 years of SharePoint

branding experience

Author: SharePoint 2010: Six in One

catpaint1 on Twitter



Introduction

Gather Requirements What kind of site

Scenario – CatDragged In Corporation Organize the Site Determine Content Needs Design your Site Develop Engage Users

Gather Requirements

Start at the Beginning



What is the Purpose?

Public Facing Extranet Intranet – Informational Only Intranet – Informational and Collaboration Intranet – Collaboration Only Intranet with Social and MySites Plus everything else



Asking the Questions

Can be the biggest challenge Example Questions:

What is the one thing you want users to know when they go to your site?

What sites do you like? What sites don’t you like?



Poll Questions

Do you currently have an intranet?

Do you visit the homepage of your intranet?

Do you participate in any Social Networks?



Scenario – CatDragged In Corp

Cat Supply Manufacturer that needs to manage their business documents and communicate effectively with their employees.

They currently have a SharePoint 2007 intranet that is poorly managed and often has very stale content.

CatDragged In




The Company has the following Business Units Accounting Administrative/Executive Human Resources IT Manufacturing Project Management Office Quality Assurance Research and Development Sales and Marketing Shipping

CatDragged In




Challenges: How to Organize their Content How to Engage their Users How to Keep their Content Fresh Geographically Divided Teams Capture and Store Documents and Knowledge in a Centralized

Location

CatDragged In

Organizing, Managing, and Content

Developing the Plan



Organizing Chaos

Determine the Site Structure Questions of Content and Site Templates/Site Collections Will it be Organizational, Functional or a Mix of Both



Site Map

CatDragged In decided to go in an Organizational Site Map with a few extra bonus Sites that fall outside a Department

Questions to ask: How do your users typically find information? How do your users typically work, who do they work with on a

daily basis?



CatDragged In Site Map

Mix of Collaboration and Publishing Site Templates Also has a combination of Organizational Based Sites and Specialty Sites

Home

Accounting

Admin HR

IT

Manufacturing

PMO QA

R&D

Sales and Marketing

Shipping

Coffee Lounge

University



Navigation Needs

Determine if you need more than just the SharePoint Navigation Breadcrumb Navigation Footer Navigation

Ask the right questions about Navigation and make decisions based off talking to End Users not just management

Card Sorting can be a useful tool for determining Navigation



But What About the Content

What is it that you want to put on the main pages? News Announcements FAQs Letter from the President HR Information Tips and Tricks Events



Who will Manage Content

Centralized or Decentralized Management? IT Staff will manage all is Centralized Departments will manage their own is Decentralized

Advantages to Decentralized Content is Updated more Frequently Content stays relevant to the time frame Less overhead on IT Staff

Disadvantages to Decentralized Must live in the same Site Collection (unless you use a 3rd Party

tool) Training must be performed for Content Owners



Where Does My Content Live?

Determining the Content Locations is especially important for things like Rollup Lists and Announcements.

Did you create more than one Site Collection for database size purposes or security concerns?

Do you want it in a team site, or in a section of the main intranet, typically publishing pages?



What Kind of Pages will I use?

Determine if you will be using Publishing Pages or Collaboration Sites Will you Use a Custom Page Layout?

Publishing Infrastructure allows for this using Design Manager or SPD methods

Will you be creating Custom Display Templates? Customize the way information is displayed in items like the

Search Pages and some WebParts and Views Use the Design Manager, SPD or other tools to create these



Web Parts for Displaying Content

Video/Media Document Libraries Content by Search Web Part Content Editor Wiki Style Pages Calendars Announcements Yammer



Getting User Attention

This is one of the bigger challenges when planning the User Experience Need that “Squirrel” moment Pay attention to your users demographics

Gamification Stock Ticker Weather Social

Time to Design the Site

Ready, Set, Go



Develop a User Experience Plan



Design Methods

Wireframes are a great tool for separating Design and Function – start with a basic SP site and customize from there



Design Methods

Evaluate Your Designs for Functionality and Content – Not Design



Wireframe Tools

Balsamiq SharePoint 2013 Team Site Template from Flucidity http://flucidity.azurewebsites.net/2013/02/sharepoint-2013-bals

amiq-mock-up-template/

Visio Adobe Creative Suite

http://flucidity.azurewebsites.net/2013/02/sharepoint-2013-balsamiq-mock-up-template/





Create a User Experience Artifact Plan

Determine Master Page Needs Design Manager or Custom

Determine CSS Needs Determine if your site will be Responsive Browsers will you target Web Parts will you use Images will you need Page Layouts if Needed



Determine Deployment Plan

Solution Sandboxed for Office 365 Visual Studio Full Trust for On Premises

Manual Application SPD Browser



Create Design Mockups

At this stage you will want to create a design mockup Standard Web Development principles and requirements apply at this

stage Mockups will contain the visual elements, colors and images you

propose for the final solution



Things to Pay Attention To

Pay Close Attention to: Navigation

Top Navigation Quick Launch Navigation Breadcrumbs

Ribbon Suite Bar Search Pages – Display Templates for Search Results Pages Any Web Template Changes My Sites



Design Mockup Sample



Create Customized Design Artifacts

Make use of the tool you are most comfortable with to develop your design artifacts

SharePoint 2013 Design Manager Adobe Creative Suite SharePoint Designer 2013 NotePad Visual Studio Plus Many More



Branded Site



Branded Site



Branded Site Artifact List

One Custom Master Page – Built in SPD – no HTML version One Custom CSS File Custom Images Video Library Corporate Announcements Library

Plan Adoption Activities

Understand Your Users



Always Know the Implications

Each User Experience Decision has Implications and Ramifications in a SharePoint Environment

Navigation consistency Permissions Site Template



User Adoption Activity Samples

Scavenger Hunts Rewards Searches Attend Susan Hanley’s User Adoption Session tomorrow morning.

Demo

Demo TitleSubtitle

Questions?

Thank you!

Don’t forget to enter your evaluation of this session using EventBoard!

Technology

Create Engaging Branded SharePoint Portals and Plan for Content