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
3© DEVintersection. All rights reserved.
http://www.DEVintersection.com
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
5© DEVintersection. All rights reserved.
http://www.DEVintersection.com
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
6© DEVintersection. All rights reserved.
http://www.DEVintersection.com
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?
7© DEVintersection. All rights reserved.
http://www.DEVintersection.com
Poll Questions
Do you currently have an intranet?
Do you visit the homepage of your intranet?
Do you participate in any Social Networks?
8© DEVintersection. All rights reserved.
http://www.DEVintersection.com
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
9© DEVintersection. All rights reserved.
http://www.DEVintersection.com
Scenario – CatDragged In Corp
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
10© DEVintersection. All rights reserved.
http://www.DEVintersection.com
Scenario – CatDragged In Corp
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
12© DEVintersection. All rights reserved.
http://www.DEVintersection.com
Organizing Chaos
Determine the Site Structure Questions of Content and Site Templates/Site Collections Will it be Organizational, Functional or a Mix of Both
13© DEVintersection. All rights reserved.
http://www.DEVintersection.com
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?
14© DEVintersection. All rights reserved.
http://www.DEVintersection.com
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
15© DEVintersection. All rights reserved.
http://www.DEVintersection.com
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
16© DEVintersection. All rights reserved.
http://www.DEVintersection.com
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
17© DEVintersection. All rights reserved.
http://www.DEVintersection.com
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
18© DEVintersection. All rights reserved.
http://www.DEVintersection.com
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?
19© DEVintersection. All rights reserved.
http://www.DEVintersection.com
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
20© DEVintersection. All rights reserved.
http://www.DEVintersection.com
Web Parts for Displaying Content
Video/Media Document Libraries Content by Search Web Part Content Editor Wiki Style Pages Calendars Announcements Yammer
21© DEVintersection. All rights reserved.
http://www.DEVintersection.com
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
23© DEVintersection. All rights reserved.
http://www.DEVintersection.com
Develop a User Experience Plan
24© DEVintersection. All rights reserved.
http://www.DEVintersection.com
Design Methods
Wireframes are a great tool for separating Design and Function – start with a basic SP site and customize from there
25© DEVintersection. All rights reserved.
http://www.DEVintersection.com
Design Methods
Evaluate Your Designs for Functionality and Content – Not Design
26© DEVintersection. All rights reserved.
http://www.DEVintersection.com
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
27© DEVintersection. All rights reserved.
http://www.DEVintersection.com
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
28© DEVintersection. All rights reserved.
http://www.DEVintersection.com
Determine Deployment Plan
Solution Sandboxed for Office 365 Visual Studio Full Trust for On Premises
Manual Application SPD Browser
29© DEVintersection. All rights reserved.
http://www.DEVintersection.com
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
30© DEVintersection. All rights reserved.
http://www.DEVintersection.com
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
31© DEVintersection. All rights reserved.
http://www.DEVintersection.com
Design Mockup Sample
32© DEVintersection. All rights reserved.
http://www.DEVintersection.com
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
33© DEVintersection. All rights reserved.
http://www.DEVintersection.com
Branded Site
34© DEVintersection. All rights reserved.
http://www.DEVintersection.com
Branded Site
35© DEVintersection. All rights reserved.
http://www.DEVintersection.com
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
37© DEVintersection. All rights reserved.
http://www.DEVintersection.com
Always Know the Implications
Each User Experience Decision has Implications and Ramifications in a SharePoint Environment
Navigation consistency Permissions Site Template
38© DEVintersection. All rights reserved.
http://www.DEVintersection.com
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!