we will review Communication Sites features, components and how you can leverage different components to build amazing experiences

1. LED BY:
As part of this full-day workshop, we will review Communication Sites features,
components and how you can leverage different components to build amazing
experiences
UX PATTERNS
Kanwal Khipple
MWPC
2019

2. Room 4 - Devoteam - Lumapps
MWCP 2019 – MERCI à nos sponsors

3. MWCP 2019
SUCCESS IS EARNED NOT GIVEN.

5. MWCP 2019
Mission
Disney
WalMart
Fedex
Microsoft
McDonalds
Apple
Nike
Google
Toyota
Every company starts with an idea, and based on that one idea, works hard to
build a culture that helps deliver products and services
produce family fun entertainment
saving people money so they can live better
guaranteed overnight
enable productivity
be your favorite place and way to eat and drink
design best personal computers
inspire athletes
organize information to make it accessible & useful
satisfying ownership experience

6. MWCP 2019
BRAND IDENTITY
In order to have an effective brand, you need your target audience to associate
you whenever they think of the benefit they are looking to receive

7. MWCP 2019
DESIGN NEEDS TO BE INCLUSIVE
Individual and group collaboration needs are diverse

8. MWCP 2019
BRANDS IMPACT TO EXPERIENCE
Ensuring experiences and how users interact with them exemplify your brand

9. MWCP 2019
SHARED STORIES
Building champions in an organization starts by encouraging and sharing failures

10. MWCP 2019
NEWS THAT MATTERS…
It can’t just be regional, departmental and corporate news on your homepage anymore. You
need to think about how you will surface team and project news.

11. MWCP 2019
WHATS IN IT FOR ME
Make intuitive experiences that users can not live without

12. MWCP 2019
BUILDING EXPERIENCES
Implementing an effective design that drives engagement and speaks to your brand

13. MWCP 2019
INTRANET IN YOUR POCKET…
What if you could also enable better site experiences on mobile devices. What if you could
design for the user? Extending team or departmental reach.

14. MWCP 2019
ENGAGEMENT DRIVES INNOVATION
Enabling your champions and leaders to contribute

15. 300+ slides
80+ SharePoint Presentations @ Slideshare.Net/kkhipple
Intranets w/ Office 365 Whitepaper @ Office365Intranets.com
Message Me On LinkedIn or Email Kanwal@Khipple.com

16. SPEAKER | AUTHOR | SUPER GOOD LOOKING
KANWAL KHIPPLE, CEO
@kkhipple
bit.ly/linkedinkk
2014 2015

17. “My goal is to be able to find content like news, forms,
templates, and research efficiently and with as little friction
from technology tools as possible.”
KEY CHARACTERISTICS
Knowledge Worker
Tech-savvy Independent Goal-Oriented
MEASURES OF SUCCESSBEHAVIOR PROFILE
Consumer Persona
TOUCH POINT CHANNELS
Phone Website
Speech Chat
Mobile App
ATTRIBUTES
Technical Prowess
Technology Avoidance
Social Engagement
Leadership/ Influence
Openness to Change
Communication
Connection
Collaboration
Consumption
Contribution
 Ability to access content easily
from mobile devices.
 Favorite/frequent content
surfaced for easy access.
 Personalized news for teams and
workgroups.
 Ability to interact with thought
leaders through social networks.
Name Ken
Age 29
Role Associate
Location New York
Education Business Degree
Family Single
EXPECTATIONS:
Locate content or information in
three clicks or less. Locate content
from anywhere, on any device.
Engage with peers and thought
leaders via social media.
Personalization of news and content
based on his teams.
FRUSTRATIONS:
Difficult to sift through search
results/ documents to find the
relevant ones. Obsolete documents
exist within search results. Lack of
connection with both peers and
leaders.

18. WHAT WE ARE GOING TO COVER TODAY.
A DAY IN THE LIFE
BREAK
GATHERING INSIGHTS
LUNCH
UX PATTERNS
BREAK
DESIGN IN YOUR ORG
9:00am - 10:30am
10:30am - 11:15am
11:00am - 12:15pm
12:15pm - 1:45pm
1:45pm - 2:45pm
2:45pm – 3:00pm
3:00pm – 4:00pm

19. WHAT WE ARE GOING TO COVER TODAY.
TOGETHER, ENCOURAGE DESIGN TO BE INTEGRATED
INTO YOUR PROJECTS AND IMPROVE HOW TO BE A
DESIGN-LED TEAM
THINK ABOUT USABILITY THROUGH THE LENS OF OUR KEY USER PERSONAS
DISCUSS AND COMMIT TO SOME BROAD UX BEST PRACTICES & PRINCIPLES
GET INSPIRED TO THINK OUTSIDE OF THE NORM WITH EXAMPLES
ARTICULATE THE DIGITAL WORKPLACE EXPERIENCE THROUGH WIREFRAMES & SKETCHES

20. WHAT WE ARE GOING TO COVER TODAY.
A DAY IN THE LIFE
BREAK
GATHERING INSIGHTS
LUNCH
UX PATTERNS
BREAK
DESIGN IN YOUR ORG
9:00am - 10:30am
10:30am - 11:15am
11:00am - 12:15pm
12:15pm - 1:45pm
1:45pm - 2:45pm
2:45pm – 3:00pm
3:00pm – 4:00pm

21. MWCP 2019
COMMUNICATION SITES
Engaging with like-minded community members
CONCISE & CONSISTENT NAVIGATION
Is there specific content that should be
prioritized and accessible for everyone?
BRAND WITH PURPOSE
What color should we use to highlight key
content?
USER INTERFACE
Can we encourage others to contribute?

22. MWCP 2019
INTRANET HOMEPAGE
Your intranet homepage is the place where people in your organization can get
informed, get inspired, and discover news and resources.
News and Resources Social and Personalized Compelling and Highly Visual

23. MWCP 2019
NEWS & RESOURCES
News and resources are at the heart of this attractive intranet homepage. It uses a News carousel layout
to show large, scrollable images, plus web parts to show images, events, files, and more.

24. MWCP 2019
NEWS & RESOURCES
News and resources are at the heart of this attractive intranet homepage. It uses a News carousel layout
to show large, scrollable images, plus web parts to show images, events, files, and more.

25. MWCP 2019
SOCIAL AND PERSONALIZED
Put the power of your content, people and information in easy reach of everyone in your organization. Use a
distributed news system and a variety of web parts to highlight what's happening in your organization as well
as events and social conversations.

26. MWCP 2019
SOCIAL AND PERSONALIZED
Put the power of your content, people and information in easy reach of everyone in your organization. Use a
distributed news system and a variety of web parts to highlight what's happening in your organization as well
as events and social conversations.

27. MWCP 2019
COMPELLING AND HIGHLY VISUAL
Highly visual and attention-grabbing, this example shows the power and versatility of
the Hero web part along with the File viewer, Embed web part, and more.

28. MWCP 2019
COMPELLING AND HIGHLY VISUAL
Highly visual and attention-grabbing, this example shows the power and versatility of
the Hero web part along with the File viewer, Embed web part, and more.

29. MWCP 2019
COMMUNICATION SITES
Inform and engage people across your organization. Create visually stunning and
natively-mobile pages to share vision, news, information and resources.
Region Brand Single Page

30. MWCP 2019
REGION SPECIFIC
Communicating out to your organization can be done beautifully and effectively with
Communication sites for each region

31. MWCP 2019
REGION SPECIFIC
Communicating out to your organization can be done beautifully and effectively with
Communication sites for each region

32. MWCP 2019
BRAND SPECIFIC
Communicating and reinforcing your brand in a highly visual way is the goal of this
communication site

33. MWCP 2019
BRAND SPECIFIC
Communicating and reinforcing your brand in a highly visual way is the goal of this
communication site

34. MWCP 2019
SINGLE PAGE
Create a focused training site on a single page that doesn't distract by leading users
away with off-page navigation.

35. MWCP 2019
SINGLE PAGE
Create a focused training site on a single page that doesn't distract by leading users
away with off-page navigation.

36. MWCP 2019
TEAM SITES
A team site is designed for collaboration. Work together with any group–inside or outside your
organization. Share files, news and data. Customize your site with apps that power teamwork.
Hub Connected Project Focused Single Page

37. MWCP 2019
HUB CONNECTED
Associate your team site to a hub site and get a consistent theme and design. This team
site also uses the distributed new system, a team calendar, and a document library.

38. MWCP 2019
HUB CONNECTED
Associate your team site to a hub site and get a consistent theme and design. This team
site also uses the distributed new system, a team calendar, and a document library.

39. MWCP 2019
PROJECT FOCUSED
This team site is designed to focus on a specific project. It uses a Countdown web part to generate
excitement as the project launch date approaches along with news, events, and more.

40. MWCP 2019
PROJECT FOCUSED
This team site is designed to focus on a specific project. It uses a Countdown web part to generate
excitement as the project launch date approaches along with news, events, and more.

41. MWCP 2019
MEET THE TEAM
Introduce your team with photographs and bios, along with contact information created
using a Quick links web part in a button layout.

42. MWCP 2019
MEET THE TEAM
Introduce your team with photographs and bios, along with contact information created
using a Quick links web part in a button layout.

43. MWCP 2019
HUB SITES
Organize your intranet with hub sites. Connect related sites to roll up content and activity, and to drive consistent
branding and navigation. And because you can re-associate sites, your intranet can respond and adapt to changes in
your organization
Marketing Human Resources Sales

44. MWCP 2019
MARKETING
SharePoint Hubs let you organize your intranet and drive consistency. In this Marketing
hub site, the header, footer, and custom logo is carried over to its associated sites.

45. MWCP 2019
MARKETING
SharePoint Hubs let you organize your intranet and drive consistency. In this Marketing
hub site, the header, footer, and custom logo is carried over to its associated sites.

46. MWCP 2019
HUMAN RESOURCES
Besides hub news, events, contacts and resources, this example of a Human Resources
hub site features a custom PowerApp for time off requests from employees.

47. MWCP 2019
HUMAN RESOURCES
Besides hub news, events, contacts and resources, this example of a Human Resources
hub site features a custom PowerApp for time off requests from employees.

48. MWCP 2019
SALES
This Sales hub site makes it easy to discover related content such as news and other site activities while
demonstrating the common navigation and branding that would carry across the associated sites.

49. MWCP 2019
SALES
This Sales hub site makes it easy to discover related content such as news and other site activities while
demonstrating the common navigation and branding that would carry across the associated sites.

50. MWCP 2019
SHAREPOINT LOOK BOOK
Get inspired to design experiences that engage employees
Discover the modern
experiences you can
build with SharePoint
in Office 365.
aka.ms/sharepointlookbook

51. MWCP 2019
SHAREPOINT DESIGN GUIDANCE
Get inspired to design experiences that engage employees
Design beautiful and
performant sites,
pages, and web parts
with SharePoint
in Office 365
aka.ms/spdesignguidance

52. MWCP 2019
COMMUNICATION SITES
Inform and engage people across your organization. Create visually stunning and
natively-mobile pages to share vision, news, information and resources.
Showcase Topic Blank

53. MWCP 2019
HERO
Bring focus and visual interest to your page with the Hero web part.
TOPIC SHOWCASE

54. MWCP 2019
HERO CONFIGURATION
Bring focus and visual interest to your page with the Hero web part.

55. MWCP 2019
HIGHLIGHTED CONTENT
Requirement: I want to highlight corporate content
Customizable tiles usually
displayed at the top of a
page.
Intended to be used to
focus employees on
important corporate topics
• Image
• Headline
• Hyperlink to a page

56. MWCP 2019
SECTIONS
You can add columns to sections within SharePoint pages. To show content side-by-side, you can add up to
three columns to each section. Vertically, you can have multiple sections with varying numbers of columns

57. MWCP 2019
CORPORATE NEWS
Requirement: I want to be able to publish corporate news
Customizable tiles used to provide a summary on important corporate news.
• Image
• Headline
• Abstract
• Link to a page providing rich details

58. MWCP 2019
CORPORATE EVENTS
Requirement: I want to be able to publish upcoming corporate events
Customizable tiles used to provide a summary on upcoming corporate events.
• Image
• Headline
• Abstract
• Link to a page providing rich details

59. MWCP 2019
TEAM/DEPARTMENT CONVERSATIONS
Requirement: I want to be able to participate in conversations
Tiles associated to discussion threads used to provide an overview actual and recent discussions
• Author
• Abstract
• Likes
• Link to the discussion

60. MWCP 2019
MOST RECENT DOCUMENTS
Requirement: I want to be able to see the most recent documents
Tiles associated to a specific document
• Image
• Location
• Title
• Author / Editor
• Last modification date
• Link to the document

61. MWCP 2019
DOCUMENT MANAGEMENT
Requirement: I want to be able to manage documents based on corporate policies
Customizable document library
• Document type icon
• Document title
• Last modified date/editor
• Author / Editor
• Version
• Additional information

62. MWCP 2019
ACCESS PERMISSIONS
Requirement: I want to be able to manage access permissions based on roles
Access permissions to a specific site
can be customized. Access is
provided based on groups and user
accounts are read from your
corporate Active Directory
• Site Owners
• Read/Write/Configuration
• Site Members
• Read/Write of content
• Visitors
• Read-Only of content
Content (e.g.
documents) can be
shared with others
within your
organization and (if
configured that way)
outside of your
organization. For
each shared
document, access
permissions can be
defined:
• Read-Only access
• Read/Write access

63. MWCP 2019
ADD A PAGE
When you create a communication site, you can add pages using built-in templates to help
you get started. Choose from a blank page, a multi-column page, or a single-column page.

64. MWCP 2019
NEWS
You can keep everyone in the loop and engage your audience with important or interesting stories by using the News web
part on your page or site. You can quickly create eye-catching posts like announcements, people news, status updates, and
more that can include graphics and rich formatting.

65. MWCP 2019
NEWS CONFIGURATION
You can keep everyone in the loop and engage your audience with important or interesting stories by using the News web
part on your page or site. You can quickly create eye-catching posts like announcements, people news, status updates, and
more that can include graphics and rich formatting.
Choose which sites to show Change the layout Add News Post/Link

66. MWCP 2019
EVENTS
You can keep everyone in the loop and engage your audience with important or interesting
events by using the Events web part on your page or site.

67. MWCP 2019
GROUP CALENDAR
The Group calendar web part allows you to put an Office 365 group calendar right on your
page so that it is easily visible to your readers.

68. MWCP 2019
TWITTER
With the Twitter web part, you can show tweets that are relevant to you or your
audience right on your page.

69. MWCP 2019
YAMMER
If your organization has an active Yammer network (for example: www.yammer.com/contoso.com), you
can enhance collaboration by adding Yammer conversations or a Yammer feed right on your page.

70. MWCP 2019
EMBED
You can display content on your SharePoint page from sites that allow embedding (like YouTube or Bing maps, for example).
For many sites, you can either use the site's web address for the content or embed code that the site provides. See exceptions
at the bottom of this article.

71. MWCP 2019
FILES
Use the File viewer web part to insert a file on your page. File types you can insert include
Excel, Word, PowerPoint, Visio, PDFs, 3D models, and more.

72. MWCP 2019
DOCUMENT
When you use the document library web part, you can choose to show a specific view
of the library or even a folder within the library.

73. MWCP 2019
PLANNER
With the Planner web part, you can show board or charts and work with your plan right
on your SharePoint page.

74. MWCP 2019
WEATHER
Use the weather web part which allows you to show the current weather on your page.

75. MWCP 2019
BING MAPS
Use the Bing maps web part to add a map to your page. Simply enter an address or a
well known name and your map will appear

76. MWCP 2019
IMAGE
use the Image web part. Use it to insert an image on the page, either from your site,
your computer, or from the web

77. MWCP 2019
TEXT
Use the Text web part to add paragraphs to your page. Formatting options like styles,
bullets, indentations, highlighting, and links are available.

78. MWCP 2019
SITES
The Sites web part allows you to automatically show sites associated with a hub site or a
current user's recent sites

79. MWCP 2019
SITE ACTIVITY
This web part automatically shows recent activity on your site, such as files uploaded, edits made, lists
and libraries created, and so on. Just add the web part, and the latest activity is pulled in automatically.

80. MWCP 2019
SITES CONFIGURATION
The Sites web part allows you to automatically show sites associated with a hub site or a
current user's recent sites
Choose which sites to show Change the layout Reorder sites

81. MWCP 2019
QUICK CHART
Use the Quick chart web part to add simple, basic charts to your page. Enter your data points or get
data from a list, add labels, pick your chart type -- column or pie -- and publish.

82. MWCP 2019
Chart Type Select data Layout
QUICK CHART CONFIGURATION
Use the Quick chart web part to add simple, basic charts to your page. Enter your data points or
get data from a list, add labels, pick your chart type -- column or pie -- and publish.

83. MWCP 2019
COMMENTS
Each news article and page can have its own set of comments.

84. MWCP 2019
APP LAUNCHER/QUICK ACCESS…
While many Intranets build out quick access or app launchers this is in O365 already.
Whatever we build should compliment this and not look to replace it.
Out Of The Box
●

85. MWCP 2019
NAVIGATION
Needs to be user centric and help users complete their day to day work
Typically we see this because
navigation is not user-centric. Users
generally start by finding where they
need to go through the navigation
75% of the time.
When people get stuck navigating
they resort to using site search.
SEARCH SUCKS

86. MWCP 2019
INTRANET NAVIGATION
The four (4) key elements to consider when planning your navigation.
1 2 3
HEADER GLOBAL NAVIGATION QUICK LINKS FOOTER
• App Launcher
• Office 365 taskbar
• ‘Home’ button
• Global search
• World Clocks
• Office sites
• Sections mega-menu
• Departments mega-
menu
• Tools
• Hub-site navigation
• Top Links
• My saved links
• Favorites
• External websites
• Social media
• Getting Started
• Corporate Community
sites
4

87. MWCP 2019
NAVIGATION INVESTMENTS…
The hub navigation is still relatively simple and many organizations still invest in developing
or purchasing a custom global navigation to use across their sites.
Requires Minor Customization
◑

88. MWCP 2019
NAVIGATION OPTIONS
Choose your navigation wisely
• Site navigation:
• Team site = left nav
• Comm site = top nav
• Hub navigation:
• Connects associated sites
Styling options for both:
Cascading
COMING SOON:
option to change
orientation of the
navigation from the
site default.

89. MWCP 2019
INCORPORATE THE SUITE BAR
Design to take full advantage of the platform. Don’t ignore the power and benefit that
the suite bar provides between notifications and quick navigation.
LARGE
MEDIUM
SMALL

90. MWCP 2019
NAVIGATING BETWEEN APPLICATIONS
While many Intranets build out quick access or app launchers this is in O365
already. Whatever we build should compliment this and not look to replace it.

91. MWCP 2019
OFFICE 365 SUITE BAR
TIP educate users that Office 365 and SharePoint labels are there to communicate what
applications they are using.
TIP configure Office 365 logo to direct users to the intranet no matter where they are
TIP leverage Settings menu to enable configuration for your custom applications instead of
building another settings menu
Global navigation that provides access to key applications, settings and user profile

92. MWCP 2019
OFFICE 365 APP LAUNCHER
• TIP leverage Office 365 App Launcher rather than building your own
• TIP schedule and record training to guide users how to personalize applications
• TIP add organization approved applications and make them available in users app launcher
• TIP educate users that they can easily access confidential documents that can be confident
Enabling users to leverage Office 365-based, 3rd party and in-house applications

93. MWCP 2019
OFFICE 365 APP LAUNCHER
• Available from anywhere within Office 365
• Search global Office 365 environment, not just SharePoint
• Add custom app tiles to the launcher
• E.g. 3E, Eclipse, DMS, HRIS, LearningSite, Timekeeper, etc.
Use the technology that already comes with O365 to your advantage.

94. MWCP 2019
HUB NAVIGATION
Simple hub navigation
Providing a consistent navigation experience across site collections

95. MWCP 2019
SHAREPOINT HOME
A modern site directory experience, featuring activity roll-ups and quick follow/share
options.

96. MWCP 2019
DESIGN BETTER NAVIGATION…
Navigation doesn’t need to be limited to top level links, or simple UI layouts.
Consider bringing targeted
documents and content to
the user inside the navigation
experience.

97. MWCP 2019
PERSONALIZED NAVIGATION
Bring the power of SharePoint Home and that dynamic personalized navigation into the
global/top nav experience.

98. MWCP 2019
SEARCH BASED NAVIGATION
While structured and managed navigation is still valid in today’s world it is also
important to improve navigation with powerful capabilities like search.
Improving navigation by including search functionality.

99. MWCP 2019
INTRANET NAVIGATION
The 4 elements we will design together today.
1 2 3
HEADER GLOBAL NAVIGATION QUICK LINKS FOOTER
• App Launcher
• Office 365 taskbar
• ‘Home’ button
• Global search
• World Clocks
• Office sites
• Sections mega-menu
• Departments mega-
menu
• Tools
• Top Links
• My saved links
• External websites
• Social media
• Getting Started
• Community sites
4
HOMEWORK: For each of the existing nav areas (right), determine the approach:
• E.g. Finance & Accounting – save as custom O365 app tiles, save as Quick Links.
• E.g. Communities – include in Footer, save sites as Quick Links.
• HR/ Payroll – Include in HR Dept Hub Nav, save as Quick Links.

100. MWCP 2019
HEADER
Consistent navigation at the top of all SharePoint sites.
Collapse/ Expand
LOGO
(HOME BUTTON)
OFFICE SITE LINKS
(INCL. WORLD CLOCKS)
SECTIONS DEPARTMENTS TOOLSGLOBAL NAVIGTION MY LINKSMY LINKS SEARCH SEARCH
HOMEWORK:
1. Validate the components and their general placement within the header.
2. Define behaviour of Collapse/Expand component. (Default expanded? Remain collapsed after user collapses?)

101. MWCP 2019
GLOBAL NAVIGATION - SECTIONS
Hierarchical collection of navigation links that remain consistent across SharePoint.
BUSINESS AND REGULATORY LITIGATION
Corporate and Securities
Environmental
Finance
Financial Institutions
Oil & Gas
Power
Public Entities
Public Finance
Real Estate
Tax & Benefits
Appellate
Construction
Contingent
Energy/ Oil & Gas/ Reg.
Environmental
Financial Institutions
FRG
IP/ Trademark
Labor
Securities
Trial
White Collar
GOVERNMENT/ PRG TECHNOLOGY AND INTELLECTUAL PROPERTY
• Headers in alpha-order top to bottom
• Headers are clickable (to section pages)
• Sections will be hub sites with hub
navigation.
• Practice links in alpha-order top to bottom
HOMEWORK: Validate the mega-menu headings and links.
SECTIONS MEGA-MENU

102. MWCP 2019
GLOBAL NAVIGATION - DEPTS
Hierarchical collection of navigation links that remain consistent across SharePoint.
OPERATIONS
BUSINESS DEVELOPMENT AND
MARKETING
FINANCE AND ACCOUNTING
Conference Services
Operations
Info Governance and Records
Special Services
Business Development
Communications
Marketing Operations
Strategic Client Intelligence
Billing & Collections
Conflicts/ Intake
Planning & Reporting
Practice Management
HUMAN RESOURCES INFORMATION MANAGEMENT PROFESSIONAL RESOURCES
Benefits
Payroll
ePractice
Knowledge Resources
GENERAL COUNSEL OFFICE
xxx
• Headers in alpha-order left to right
• Department Categories link to hub
sites.
• Dept links in alpha-order top to
bottom
HOMEWORK: Validate the mega-menu headings and links.
DEPARTMENTS MEGA-MENU

103. MWCP 2019
GLOBAL NAVIGATION - TOOLS
Hierarchical collection of navigation links that remain consistent across SharePoint.
BUSINESS DEVELOPMENT &
MARKETING
FINANCE & ACCOUNTING HUMAN RESOURCES/ PAYROLL
Corporate Ownership
Interaction (Client Relationship
Management)
Manzama (Personalized Business
Intelligence)
Practice Group Selection –
Associates
Practice Group Selection – Partners
Profile Generator
Chrome River Expense Reporting
Clarity 7
CMM (New Client/Matter)
Elite 3E Accounting
EP57 (Expense Coding)
Timebuilder
Employee Self-Service
Evaluations – Associate/ Counsel/
Sr. Counsel
Evaluations – Staff
Overtime Manager
Paid Time Off Request
SPECIAL SERVICES AND FACILITIES OTHER
EMS (Conference Room Scheduling)
Postage Charge Form
PS|Ship (FedEx shipping)
Eclipse (Litigation Document Review)
LearningSite (Training calendar and
courses)
Library Catalog
Mimecast personal portal
Recommind/ Decisiv
• Headers in alpha-order left to right
• Links in alpha-order top to bottom
HOMEWORK: Validate the
mega-menu headings and
links.
TOOLS MEGA-MENU

104. MWCP 2019
GLOBAL NAVIGATION – P&S
Hierarchical collection of navigation links that remain consistent across SharePoint.
SECTIONS DEPARTMENTS PROGRAMS & SERVICES
HOMEWORK: Incorporate these links into Departments mega-menu.
NOTE:
Programs & Services will not be a Global
Navigation heading.

105. MWCP 2019
GLOBAL NAVIGATION – MY LINKS
Personalized links saved by user.
• Top links could be set by firm, or could be determined by
number of users who have the URL pinned as a ‘saved
link’ (can update in real time)
• Links displayed in alpha-order top to bottom
• External links open in new browser tab or window
TOP LINKS
People Search
Policies
Forms
Travel Info
University
Elite 3E Accounting
MY SAVED LINKS
Travel Info
Partners Site
Elite 3E Accounting
KM Resources
LearningSite
CLE Information
• User-curated links – internal and external
• Enterprise links are predefined – user cannot change title
or URL, only pin them
• Links displayed in alpha-order top to bottom
• External links open in new browser tab or window
MY LINKS MEGA-MENU

106. MWCP 2019
FOOTER
Consistent navigation element at the bottom of all SharePoint sites.
HOMEWORK: Provide feedback on what should be included in the footer.

107. MWCP 2019
CONSIDER ICONOGRAPHY
FOR EXAMPLE:
There is an opportunity to include iconography within the Global Navigation and My
Links.
Forms
People
University
Travel
Timekeeper
Elite 3E Accounting
Policies
IDEAS:
• Icons could be colour-coded by
link type (tool, Intranet site,
external site)
OR
• Icons could be colour-coded by
topic (by Department)

108. MWCP 2019
MODERN NAVIGATION…
TIP ensure the experience benefits multiple scenarios as they are consistent across site
collections
TIP ensure the experience benefits organizations, teams and individuals as well as provides a
search-based experience
TIP take into consideration OOTB and custom navigation scenario (left hand, top nav, hub site
nav, app launcher)
Microsoft is provided top and bottom configurable area’s for you to implement
consistent navigation patterns

109. MWCP 2019
SEARCH BASED NAVIGATION…
While structured and managed navigation is still valid in today’s world it is also
important to improve navigation with powerful capabilities like search.

110. MWCP 2019
CUSTOM & OOTB NAVIGATION

111. MWCP 2019
App Launcher
Custom Navigation
Hub Site Navigation
Site
Navigation

112. MWCP 2019

113. MWCP 2019
Browse

114. MWCP 2019
PAGE DESIGNS
Key pages
Mapping components to our key landing pages.
• Homepage
• Department Category
• Department
• Section
• Practice
• Practice Team
• Office
Divide the page into
zones and then organize
the components within
each zone
HEADER
People Zone
News & Events Zone
Personaliza-
tion Zone
Links
Zone
FOOTER

115. MWCP 2019
homepage
Provide main entry point and communication vehicle to
employees.
• People Zone
• Employee Recognition
• Awards, Wins
• New employees
• News and Events
• Department and Practice news
• Upcoming events
• New Client announcements
• Personalization
• My Tasks
• Links
• External News Links
MY
TASKS
EXTERNAL
NEWS
LINKS
EMPLOYEE RECOGNITION
(Awards, Wins, New Employees)
NEWS AND EVENTS
HEADER

116. MWCP 2019
Department category
Summary page for all departments within the category.
• People Zone
• Key Contacts
• New Employees
• News and Events
• Department news
• Upcoming events
• Header
• Policies
• Procedures
• FAQs
• Links
• ?
KEY CONTACTS
NEWS AND EVENTS
NEW EMPLOYEES
LINKS
HEADER

117. MWCP 2019
Department
Showcase department contacts and content.
• People Zone
• Key Contacts
• New Employees
• News and Events
• Department news
• Upcoming events
• Header
• Policies
• Procedures
• FAQs
• Links
• ?
KEY CONTACTS
NEWS AND EVENTS
NEW EMPLOYEES
LINKS
HEADER

118. MWCP 2019
office
Provide office-specific contacts and content.
• People Zone
• Office contacts
• New Employees
• Office visitors
• News and Events
• Office news
• Upcoming events
• Office Info
• Mailing address
• Phone number
• Floor plan
KEY CONTACTS
NEWS AND EVENTS
NEW EMPLOYEES
LINKS
OFFICE VISITORS
OFFICE
INFO
• Header Links
• Policies
• Procedures
• FAQ
• Links
• Travel
• Dining
• Entertainment
• Getting Around
• Lodging
HEADER

119. MWCP 2019
section
Summary page for all Practices within the section.
• People Zone
• Key Section Contacts
• New Employees
• News and Events
• Department news
• Upcoming events
• Industry news
• Links
• Pitches and
Proposals
• Deals
• Training
• Resources
KEY CONTACTS
NEWS AND EVENTS
NEW EMPLOYEES
LINKS
HEADER
• Header
• Policies
• Procedures
• FAQs

120. MWCP 2019
PRACTICE/initiative
Summary page for Practice contacts and content.
• People Zone
• Key Practice Contacts
• New Employees
• News and Events
• Department news
• Upcoming events
• Links
• Resources
• Pitches
• Proposals
• Deals
• Training
• Research
KEY PRACTICE CONTACTS
NEWS AND EVENTS
NEW EMPLOYEES
LINKS
• Header
• Policies
• Procedures
• FAQs
HEADER

121. MWCP 2019
UNIVERSITY
Learning opportunities and resources.
• People Zone
• Key Contacts
• Events
• Upcoming Courses
• Upcoming learning
events
• Personalization
• My Courses?
KEY CONTACTS
EVENTS CALENDAR
LINKS
MY
COURSES
• Links
• CLE
• Tech tips
• Attorney Webinars
• Standards
• Training Binder
• LearningSite
HEADER

122. MWCP 2019
partners
Secure site for Partner announcements and resources.
• People Zone
• TBD
• Events
• TBD
• Header
• Policies
• Procedures
• FAQs
• Personalization
• TBD
• Links
• TBD
• Featured
• TBD
HEADER

123. MWCP 2019
OVERVIEW
Going from Site Types to Page Designs, and then focusing on Components.
COMPONENTS
Individual pieces of
functionality, tied to a
data source.
PAGE DESIGNS
Determining which components
should be included on a page,
and how it should display.
SITE TYPES
Bringing together pages
and data sources into
reusable site templates.

124. MWCP 2019
ACTIVITY FEED
• News and events filter to separate content types.
• Color-coded categories with quick filters above newsfeed.
• Events receive nearly the same visual treatment as news, but includes the event date icon.
• Featured news/events display as a larger card.
• Where no visual image is available or required, a colored background is shown.
Review the main ideas/features from our wireframes and original creative concept.
Now that we know how the activity feed should look, feel,
and behave, we can start to examine the underlying data.

125. MWCP 2019
ACTIVITY FEED COMPONENT
The Activity Feed component will be configured for the following site types:
• Home
• Section
• Department
A configurable, reusable component that displays news and/or events.
The component will be configurable to feature either:
1. Employee Recognition news and events
2. Firm news and events
• Practice
• Office

126. MWCP 2019
LOOK AND FEEL
How will the content be displayed? What fields should be visible?
USER STORIES
I want the activity feed to have a configurable (editable) heading.
I want the activity feed to be sorted in reverse chronological order such that the
most recent cards appear at the top of the feed.
I want the size of the news/event card to reflect its importance/relevance so that I know
which cards I should prioritize reading.
I want each news card to display:
• News headline (linked to news
article page)
• Image or colored background
• News or event category
• Published date
• A ‘call to action’ statement
I want each event card to display:
• Event name (linked to article page with more information)
• Event date icon
• Image or colored background
• Published date
I want to see an icon or link for a filter feature, so that I can refine the news/events.
I want to see a ‘View more’ link so that I can catch up on older news that is no longer
recent-enough to be displayed on the front page.

127. MWCP 2019
BEHAVIORS
How will users interact with the component?
USER STORIES
I want the ability to filter the news/event cards by:
• Content Type (News or Event)
• Category
• Office
• Section (multiple select)
• Practice Group (multiple select)
• Admin Department
• Client
• Industry
I want the homepage news/events to roll up the news from Department, Practice, and
Office sites, if I select that ability (as an author).
I want the news and event cards to link to a news article page that opens in a current
browser tab or window.
I want to see a short description of the article OR the first sentence of the article page
when I hover over the card, so that I can decide if I want to click through for more
information.
If no content, auto-hide the component.

128. MWCP 2019
CONTENT – HOMEPAGE
What content will the component display? Where will it be created/sourced? By whom?
Heading Spotlight (People News?)
Content to display • New Employees announcement
• Summer Associates
• Firm anniversaries
• Awards and Recognition
• Lateral Partner hire announcement
Content source location Roll up from a Practice or Admin dept, but with option to create a
unique card right on homepage.
Configuration notes
Heading What’s New
Content to display • Top Matters
• Initiative News (Diversity, Women, etc)
• Tech tips
• Firm-wide events
• New client announcements
Content source location Roll up from a Practice or Admin dept, but with option to create a
unique card right on homepage.
Configuration notes

129. MWCP 2019
CONTENT – SECTION LANDING PAGE
What content will the component display? Where will it be created/sourced? By whom?
Heading Employee Spotlight
Content to display • New Employees announcement
• Summer Associates
• Awards and Recognition
• Lateral Partner hire announcement
Content source location Rolled-up view of all ‘Employee Spotlight’ cards on associated Practice
Group sites?
Site pages and library.
Configuration notes Not everything should be pushed to homepage – optional.
Heading What’s New
Content to display • In the news
• Partner presentations
• Hot topics
• Industry events (by location)
Content source location Rolled-up view of all ‘What’s New’ cards on associated Practice Group
sites?
Site pages and library.
Configuration notes Not everything should be pushed to homepage – optional.
ASSUMPTIONS:
1. All Practice Group content should be aggregated and pushed to the appropriate Section feed.
2. Not all content in the Section feed should be pushed up to the Homepage.

130. MWCP 2019
CONTENT – PRACTICE GROUP LANDING PAGE
What content will the component display? Where will it be created/sourced? By whom?
Heading Employee Spotlight
Content to display • New Employees announcement
• Awards and Recognition
Content source location Site pages and library.
Configuration notes Not everything should be pushed to homepage – optional.
Heading What’s New
Content to display • In the news
• Partner presentations
• Hot topics
• Industry events (by location)
• Learning events/opportunities
Content source location Site pages and library.
Configuration notes Not everything should be pushed to section – optional.

131. MWCP 2019
CONTENT – ADMIN DEPT LANDING PAGE
What content will the component display? Where will it be created/sourced? By whom?
Heading Employee Spotlight
Content to display • New Employees announcement
• Awards and Recognition
Content source location Site pages and library.
Configuration notes Not everything should be pushed to homepage – optional.
Heading What’s New
Content to display • Department announcements
• Due dates, reminders
Content source location Site pages and library.
Configuration notes Not everything should be pushed to homepage – optional.
ASSUMPTIONS:
1. Content for Admin Dept Category will be an aggregated view of all its associated Admin Depts
(through Hub).
2. Not all Admin Dept content should be aggregated and pushed to the Admin Dept Category feed.

132. MWCP 2019
CONTENT – OFFICE SITE LANDING PAGE
What content will the component display? Where will it be created/sourced? By whom?
Heading Employee Spotlight
Content to display • New Employees announcement
• Awards and Recognition
• Departures announcement
• Births/deaths
Content source location Site pages and library.
Configuration notes Not everything should be pushed to homepage – optional.
Heading What’s New
Content to display • Local news and events
• Networking news and events
• Due dates, reminders
• Office events (Holiday party)
Content source location Site pages and library.
Configuration notes Not everything should be pushed to homepage – optional.
ASSUMPTION:
1. Not all office activity feed content should be aggregated and shown on the Homepage.

133. MWCP 2019
INFORMATION SEEKING BEHAVIOR
The four main user patterns of information seeking.
“I know what I’m
searching for and
how to find it.”
SEARCH
“I know what I’m
searching for but I
don’t know how to
find it.”
FIND
“I don’t know what
I’m searching for.”
DISCOVER
“Am I searching?”
APPS
Search query and then
apply refiners.
Content is curated for
the user based on
personalization or
audience targeting.
Browse through
navigation structure –
guided by context.
Feeling that it should or
likely exists already, so
want search to guide
me.

134. MWCP 2019
SHAREPOINT SEARCH EXPERIENCE
Classic Search
Combining Classic with Modern search experience.
Modern Search

135. MWCP 2019
MICROSOFT SEARCH
Global search experience that brings in all experiences

136. MWCP 2019
SEARCH REFINERS
Refiner Values OOTB or Custom
Scope Everything, People, Conversations, Videos, Yammer OOTB
Result type Web Page, Excel, OneNote, PDF, PowerPoint, Word, Zip OOTB
Author [users who created/uploaded content] OOTB
Modified date Select date range OOTB
Content type News, Event, Policy, FAQ Custom
Client Client list pulled from 3E (Financial System) and Interaction (CRM) Custom
Practice Group Managed Metadata list of Practices and Initiatives under each Section. Custom
Admin Dept List of Admin Departments Custom
Employee Type Associate/Counsel/Consultant, Partner, Staff Custom
Language English, etc. Custom
How will we allow people to refine their search results within the Classic Search
experience?

137. MWCP 2019
PEOPLE NEWS
Column Name Column Type Column Status
Title Single line of text Required
Abstract Single line of text Optional
Call to Action Single line of text Optional
People News Category Choice – Drop-down list Required
Industry Managed Metadata (mult.) Optional
Office Managed Metadata (mult.) Optional
Section Managed Metadata (mult.) Optional
Practice Group Managed Metadata (mult.) Optional
Admin Dept Managed Metadata (mult.) Optional
Employee Type Managed Metadata (mult.) Optional
Author Person or Group Optional
Published Date Date Required
Publish to Homepage Y/N checkbox Required
(default to ‘No’)
Used in the Activity Feed Component to feature news.
People News Category
• Welcome Aboard
• Awards & Recognition
• Partner Spotlight
• Community Spotlight

138. MWCP 2019
NEWS
Column Name Column Type Column Status
Title Single line of text Required
Abstract Single line of text Optional
Call to Action Single line of text Optional
News Category Choice – Drop-down list Required
Industry Managed Metadata (mult.) Optional
Office Managed Metadata (mult.) Optional
Section Managed Metadata (mult.) Optional
Practice Group Managed Metadata (mult.) Optional
Admin Dept Managed Metadata (mult.) Optional
Employee Type Managed Metadata (mult.) Optional
Client Pull from 3E? Optional
Author Person or Group Optional
Published Date Date Required
Publish to Homepage Y/N checkbox Required
(default to ‘No’)
Used in the Activity Feed Component to feature all news that isn’t People News-related.
News Category
• Hot Topic
• Learning
• Tech Tip
• Top Matter
• Initiative News

139. MWCP 2019
EVENT
Column Name Column Type Column Status
Title Single line of text Required
Location Single line of text Optional
Start Date/Time Date/Time Required
End Date/Time Date/Time Required
Event Category Choice – Drop-down list Required
Industry Managed Metadata (mult.) Optional
Office Managed Metadata (mult.) Optional
Section Managed Metadata (mult.) Optional
Practice Group Managed Metadata (mult.) Optional
Admin Dept Managed Metadata (mult.) Optional
Employee Type Managed Metadata (mult.) Optional
Client Pull from 3E Optional
Publish to Homepage Y/N checkbox Required
(default to ‘No’)
Used in the Activity Feed Component to feature events.
Event Category
• Reminder
• Training
• Networking
• CLE

140. MWCP 2019
POLICY
Column Name Column Type Column Status
Title Single line of text Required
Policy Category Managed Metadata (mult.) Required
Policy Text Multiple lines of text (rich text) Required
Contact Person or Group Optional
Employee Type Managed Metadata (mult.) Optional
Office Managed Metadata (mult.) Optional
Top Policy Y/N checkbox Optional
Used in the Policies and Procedures list.
Policy Category
• Accounting
o ?
• Administration
o ?
• Billing
• Expenses
o ?
• Human Resources
o Bereavement Leave
o Parental Leave
• Practice Management
o ?
• Procurement
o ?
• Technology
o ?
• Travel

141. MWCP 2019
SEARCH ENHANCEMENTS
TIP encourage users to leverage
predictive search results
TIP customize filters to enable users
to get specific search results
TIP encourage users to search for
content-related metadata
Providing the ability to define custom entities and customize their display

142. MWCP 2019
GLOBAL SEARCH
Users will have the ability to search for content and people throughout in Office apps
SOON

143. PRODUCT ROADMAP
UX BEST PRACTICES
THEMES
CROSS PLATFORM
What we are going to cover today

144. MWCP 2019
WHY CULTURE
Iterative and just in time approach to adoption

145. MWCP 2019
COMMUNICATION
COLLABORATIONPRODUCTIVITY
Groups Teams
YOUR ROLE AS A PRODUCT MANAGER
• TIP follow the office 365 roadmap (roadmap.office.com)
• TIP follow the techcommunity (https://techcommunity.microsoft.com)
• TIP major release every 2 years
• TIP 4 minor releases every year
• TIP build a visual roadmap of product features
You managing a product not a set of projects

146. MWCP 2019
INNOVATION BENEFITS ARE MORE INTERESTING…
Continually improving experiences, continuous rollout of new capabilities, continued
integration with more technologies, and much more. (https://roadmap.office.com)

147. MWCP 2019
PERSONAS
A review of user personas
Manager
“My goal is to break
down communication
barriers internally and
publish firm news quickly
and easily.”
Communicator
Assistant
“My goal is to support
Partners and Associates
within the organization
by connecting them with
the right individuals and
the right content.”
Connector
Partner
“My goal is to be as
effective as possible in
managing my section. I
want to know the status
of various matters and
what issues my team
members are facing.”
Collaborator
Associate
“My goal is to be able to
find content like news,
forms, templates, and
research efficiently and
with as little friction from
technology tools as
possible.”
Consumer
Support Staff
“My goal is to ensure
that employees reference
the latest and greatest
material from around the
firm. I want Intranet to
be the go-to tool for
administrative content.”
Contributor

148. MWCP 2019
INTRANET ROADMAP
The new and custom features and their primary/secondary personas, across 3 releases.
RELEASE 1 RELEASE 2 RELEASE 3
Feedback mechanism for
content owners.Community site calendars.
Amalgamated firm calendar.
Buy and Sell bulletin board
Publish firm-wide news and
events.
Social engagement (Likes and
Comments) on news pages.
Staff directory within
predictive keyword search
‘Follow’ communities for
personalized activity feed
Matter dashboard for who is
working on what matters
Client dashboard for past,
current, and prospective clients
Upload, edit, and share
Intranet content with my team.
Predictive search
Social photo collage
Custom search scopes and
refiners
University Center of Excellence Enterprise metadata model

149. MWCP 2019
DESIGNS IMPACT
Teams that are investing in design are improving in many ways
Employee Engagement Market Position Business Profitability

150. MWCP 2019
LEVEL 1 - PRODUCERS
focused on the most visible aspects of design - pixels on the screen; product usability
wireframes Design comps Interactive prototypes

151. MWCP 2019
LEVEL 2 - CONNECTORS
Design teams at these organizations have developed more collaborative processes, like joint
working sessions and integrated tooling with non-design peers; customer satisfaction
Workshops Rapid Sketching
with Stakeholders
Integrations between designer
and developer tools

152. MWCP 2019
LEVEL 3 - ARCHITECTS
These companies have moved beyond basic participatory design processes and have shared
ownership, role clarity, joint accountability with key partners, and more documentation of
their now more substantial design practices; revenue
Daily standups Planning and prioritization Design briefs

153. MWCP 2019
LEVEL 4 - SCIENCISTS
Organizations at this level are masters of data-driven design with sophisticated practices for
analytics, user research, and monitoring and measuring the success of specific efforts; metric
driven
Concept Testing A/B Tests Analytics Data

154. MWCP 2019
LEVEL 5 - VISIONARIES
These companies are robust in all the dimensions of maturity, but what really separates
them from the others is design’s involvement in strategy; share price
Trendspotting and foresight Product market fit tests Cross-platform Strategies

155. MWCP 2019
DESIGN TEAMS
For those embrace design teams benefit from designs teams
Level 4
More adoption of design
Moreadoptionfromdesign
41%
21%
21%
5%
12%
Level 1
Level 2
Level 3
Level 5

156. “An investment in
UX is an investment
in your employees.”
Increases User Adoption
Improves Productivity
Drives User Behavior
Delights End Users
Reinforces Brand
Empowers Employees
Experience is adoption.

157. PRODUCT ROADMAP
UX BEST PRACTICES
THEMES
CROSS PLATFORM
What we are going to cover today

158. MWCP 2019
DESIGN PRINCIPLES
Collaboration
Fostering a collaborative environment
among employees
Communication
Ensuring meaningful information
dissemination
Connection
Pulling information together through
search and apps
Consistency
Intuitive, clear, consistent content,
navigation and page layouts
Digital
Workplace
Guiding principles for the new Digital Workplace.

159. MWCP 2019
COLLABORATION
Fostering a collaborative environment among employees
Collaboration Communication
Connection Consistency
Digital
Workplace
Examples
• Separate public and private sites allow for targeted page layouts by site function
• Public sites feature news, while private sites feature activity and documents
• ‘Share’ button featured across site and at library level
• Direct users to the document library so that they can see the menu options, instead of linking
to documents through a Quick Links web part
• Using Microsoft Teams to interface with private team sites
• Facilitates collaboration by making it easier to jump between chat and files, and co-authoring.

160. MWCP 2019
COMMUNICATION
Ensuring meaningful information dissemination
Collaboration Communication
Connection Consistency
Digital
Workplace
Examples
• News and events are the focus of public intranet sites
• Top stories featured in a hero banner to emphasize importance
• Pictures help to capture reader’s attention
• Welcome messages on public sites help users learn about what the business
unit does and how they work to achieve the organizational vision.

161. MWCP 2019
CONSISTENCY
Intuitive, clear, consistent content, navigation and page layouts
Collaboration Communication
Connection Consistency
Digital
Workplace
Examples
• Custom headers and footers give intranet more of a cohesive ‘web’ feel
• Same global navigation across all intranet sites
• Site templates used to provide consistency across all business unit sites
• E.g. department sites and delivery unit sites have very similar layout

162. MWCP 2019
CONNECTION
Examples
• Provide seamless integration points so that user doesn’t get taken out of the
intranet experience
• Surface information from LMS or Active Directory (e.g. My Courses page)
• Link in ‘Quick links’ from public intranet site to restricted team site
Pulling information together through search and apps
Collaboration Communication
Connection Consistency
Digital
Workplace

163. MWCP 2019
LESS = ALMOST ALWAYS MORE
As we prepare to wireframe, what are some UX principles & best practices to keep in mind?

164. MWCP 2019
LESS = ALMOST ALWAYS MORE
above-the-fold, top of mind, centralized navigation

165. MWCP 2019
DESIGNING WITH MULTIPLE DEVICES IN MIND
in-field, on the move, and at your desk

166. MWCP 2019
BALANCE
Balance standard, everyday user experience expectations with those of your unique
users
As we prepare to wireframe, what are some UX principles & best practices to keep in mind?

167. MWCP 2019
TEST, DON’T GUESS
capturing in-field feedback & usability testing
As we prepare to wireframe, what are some UX principles & best practices to keep in mind?

168. MWCP 2019
NEW DESIGNS & TEMPLATES…
The ability to add custom themes, set a default site design, add additional site designs,
scope site designs to users, and more!

169. MWCP 2019
ACCENT COLORS
More use of accent color for more visual energy
New theme
color application via
background
colors provide visual
interest and
organization
Out-of-the-box
themes provide 120
theme color
combination options
Shy header creates
more room for content
consumption

170. MWCP 2019
HEADER
Continued updates are coming to customize header sizes
Minimal Header
Compact Header
Strongly branded
JPG, GIF or PNG format
Use 2x dimensions listed
for best display in higher
Resolutions
64x64
192x64

171. MWCP 2019
FOOTER
Continued updates are coming for managing links in the footer
Extended
Simple
Stacked
SPFx solution using PnP
footer extended
(personal links)

172. MWCP 2019
MEGA MENU
enable you to better organize and showcase the related content and sites associated
under that hub site.
COMING SOON
Limited to site collection
TOP OF MIND
Global mega menu

173. MWCP 2019
SECTION BACKGROUND
Use to break up a long page or highlight content; keep
to 1 viewport tall
Ensure your custom web parts support theming and test
against section backgrounds
Customize Theming for page backgrounds not section
backgrounds
ability to change the background color

174. MWCP 2019
UNIVERSAL SEARCH
Search will be removed from the site header to the Office 365 Suite bar
Current suite header
Coming soon suite header with universal search

175. MWCP 2019
CREATIVE DESIGN TOOLKIT
What tools do you need to accomplish unique designs in modern SharePoint
development https://github.com/SharePoint/sp-dev-site-scripts/tree/master/samples
SITE DESIGNS MICROSOFT FLOW
Placement of controls
Adding triggers to changes to the
site
Connecting with other platforms

176. MWCP 2019
SHAREPOINT SITE DESIGNER BETA
Community built user interface to create site designs https://www.sitedesigner.io/#/

177. MWCP 2019
CREATIVE DESIGN
TIP leverage modern SharePoint UX rather than build custom
TIP leverage Site Designs to apply font color & background color
TIP limit custom fonts to Headings
TIP no need to build a custom master page
TIP leverage for your intranet
Bringing your brand to life

178. MWCP 2019
SHAREPOINT MOBILE APP
TIP unable to customize the brand
TIP extensibility is not yet availability
Take your intranet with you to stay connected and informed about important content,
news, sites and people while on the go – for those in-between moments.

179. MWCP 2019
COLOR HARMONIES
color harmonies are useful when exploring a possible color palette
TRIADIC
COLORS
COMPLEMENTARY
COLORS
TETRADIC
COLORS

180. MWCP 2019
BRANDING OPTIONS
How you customize determines your team’s
Levelofeffort
Flexibility
Office 365 Theming
Site Designs
Master Pages
JavaScript embed
Intranet in a Box

181. MWCP 2019
NEW DESIGNS & TEMPLATES…
The ability to add custom themes, set a default site design, add additional site designs,
scope site designs to users, and more!

182. MWCP 2019
BRANDING
TIP keep customizations minimal to colors (CSS-driven)
TIP leverage Site Designs to apply font color & background color
TIP no need to build a custom master page
TIP works well for team sites
Bringing some character to your team sites

183. MWCP 2019
ICONS
TIP leverage Fabric icons instead of building your own to streamline design scenarios
TIP leverage Site Designs to apply font color & background color
TIP limit custom fonts to Headings
TIP no need to build a custom master page
TIP leverage for your intranet
Leverage Fabric icons which you can scale, color, style and even flip them

184. “Our brand will only ever be the
memory of the experience our
people had when interacting with us”
Steve Sammartino
Experience is branding.

185. MWCP 2019
CREATIVE DESIGN
TIP leverage modern SharePoint UX
rather than build custom
TIP leverage Site Designs to apply font
color & background color
TIP limit custom fonts to Headings
TIP no need to build a custom master
page
TIP leverage for your intranet
Bringing your brand to life

186. MWCP 2019
COLOR HARMONIES
color harmonies are useful when exploring a possible color palette
TRIADIC
COLORS
COMPLEMENTARY
COLORS
TETRADIC
COLORS

187. MWCP 2019
BRANDING OPTIONS
How you customize determines your team’s
Levelofeffort
Flexibility
Office 365 Theming
Site Designs
Master Pages
JavaScript embed
Intranet in a Box

188. MWCP 2019
NEW DESIGNS & TEMPLATES…
The ability to add custom themes, set a default site design, add additional site designs,
scope site designs to users, and more!

189. MWCP 2019
BRANDING
TIP keep customizations minimal to
colors (CSS-driven)
TIP leverage Site Designs to apply font
color & background color
TIP no need to build a custom master
page
TIP works well for team sites
Bringing some character to your team sites

190. MWCP 2019
ICONS
Leverage Fabric icons which you can scale, color, style and even flip them

191. MWCP 2019
CONFIGURABLE
Connect title and description to web part configuration

192. MWCP 2019
PROPERTY PANE
Use Single pane or accordion pane wisely

193. MWCP 2019
PLACEHOLDER
add placeholders to SharePoint web parts that can also be used as a fallback if an issue
occurs loading content or data for a web part

194. MWCP 2019
ACCESSIBILITY
SharePoint Framework provides a structure to help make all web parts accessible.

195. PRODUCT ROADMAP
UX BEST PRACTICES
THEMES
CROSS PLATFORM
What we are going to cover today

196. MWCP 2019
THEMES
Apply your brand within SharePoint

197. MWCP 2019
ACCESS THEMES
Users can change the look of their sites
1. Office 365 Settings
menu
2. Change the Look 3. Select your theme

198. MWCP 2019
DISABLE OOTB THEMES
Site Administrators can manage the visibility of OOTB themes via set-
spohidedefaultthemes
OOTB Themes Disabled
with no custom themes
OOTB Themes Disabled
with custom themes

199. MWCP 2019
CUSTOM THEMES
• DYK The ability to define custom themes and make
them available to site owners. Themes are defined in
a JSON schema that stores color settings and related
metadata for each theme.
• DYK An online Theme Generator tool that you can
use to define new custom themes.
Create your own custom themes https://aka.ms/themedesigner

200. MWCP 2019
THEME GENERATOR
Change the look of your site by applying a custom color palette

201. MWCP 2019
SITE THEMES
Change the look of your site by applying a custom color palette
DYK A simplified set of default themes, with six light themes
and two dark themes presently available.
DYK An updated color palette, with 12 light colors and 6
dark colors, as well as 16 supplementary themes.
DYK Control over which themes are available for use on
pages within your sites.

202. MWCP 2019
THEMES
Limited customizations for creating custom themes

203. MWCP 2019
SITE SCRIPTS
Site scripts define one or more actions
1. CREATE SITE SCRIPT 2. CREATE SITE DESIGN 3. USE SITE DESIGN

204. MWCP 2019
1. CREATE SITE SCRIPT
Site scripts define one or more actions
1. Download SharePoint Online
Management Shell (PowerShell)
2. Use SharePoint Online PowerShell to connect
to your SharePoint tenant.
3. Create and assign the JSON that
describes the new script to a variable

205. MWCP 2019
1. CREATE SITE SCRIPT
Site scripts define one or more actions
4. Each site script must be registered in
SharePoint so that it is available to use.
5. Capture Site Script ID as you will need it for
creating Site Design
5. Repeat for each site script
REPEAT
STEPS 1-5

206. MWCP 2019
2. CREATE SITE DESIGN
Site designs can be used each time a new site is created to apply a consistent set of
actions
1. Create Site Design with associated
Site Scripts

207. MWCP 2019
3. USE SITE DESIGN
Users can leverage Site Designs when creating new sites
1. Use Site Design when creating sites 2. Site Script kicks off when visiting
the site for the 1st time

208. MWCP 2019
VIEW SITE SCRIPT
Use Get-SPOSiteScript -Identity <site script id>

209. MWCP 2019
REFERENCE MULTIPLE SITE SCRIPTS
Calling multiple site scripts can help with a component-based site design model
i.e. “site script id 1”, “site script id 2”
Site Script 1
Site Script 2

210. MWCP 2019
APPLY COMPANY THEME
Calling multiple site scripts can help with a component-based site design model
i.e. “site script id 1”, “site script id 2”
Site Script 1
Site Script 2
Site Script 3

211. MWCP 2019
UPDATE EXISTING / CLASSIC SITE
Already have a site but now want to apply site design to it? Leverage the Invoke-
SPOSiteDesign on each
Invoke-SPOSiteDesign -Identity ba9c058e-0575-4db5-b9aa-2dc5dbae996d -WebUrl "https://khippledev.sharepoint.com/sites/201807181450”

212. MWCP 2019
CREATIVE DESIGN TOOLKIT
What tools do you need to accomplish unique designs in modern SharePoint
development https://github.com/SharePoint/sp-dev-site-scripts/tree/master/samples
SITE DESIGNS MICROSOFT FLOW
Placement of controls
Adding triggers to changes to the
site
Connecting with other platforms

213. MWCP 2019
SHAREPOINT SITE DESIGNER BETA
Community built user interface to create site designs https://www.sitedesigner.io/#/

214. PRODUCT ROADMAP
UX BEST PRACTICES
THEMES
CROSS PLATFORM
What we are going to cover today

215. MWCP 2019
RESPONSIVE DESIGN…
Responsive design is a default requirement. Every Intranet should be responsive by design.
Microsoft is incorporating in all modern site designs and so should you.

216. MWCP 2019
INTRANET IN YOUR POCKET…
What if you could also enable better site experiences on mobile devices. What if you could
design for the user? Extending team or departmental reach.

217. MWCP 2019
SHAREPOINT MOBILE APP
TIP unable to customize the brand
TIP extensibility is not yet availability
Take your intranet with you to stay connected and informed about important content,
news, sites and people while on the go – for those in-between moments.

218. MWCP 2019
GRID BASED DESIGN
Build experiences that follow structure

219. MWCP 2019
BREAKPOINTS
To create a smooth flowing experience between screen sizes, the SharePoint UI should
adapt layouts for the following breakpoint widths

220. MWCP 2019
TEAM SITE GRID
How the different layouts map across

221. MWCP 2019
FITS ALL SIZES AND DEVICES
Ensure your sites work seamlessly on any page layout, screen size and to work great on
mobile phones.
Responsive experiences
seamlessly scale across
devices to better
display your content on
a range of different
screen sizes
http://bit.ly/docspresponsivedesign

222. MWCP 2019
DESIGN EXPERIENCES
Iterate and design experiences for your teams
SharePoint Look Book
https://lookbook.microsoft.com/

223. WHAT WE ARE GOING TO COVER TODAY.
A DAY IN THE LIFE
BREAK
GATHERING INSIGHTS
LUNCH
UX PATTERNS
BREAK
DESIGN IN YOUR ORG
9:00am - 10:30am
10:30am - 11:15am
11:00am - 12:15pm
12:15pm - 1:45pm
1:45pm - 2:45pm
2:45pm – 3:00pm
3:00pm – 4:00pm

224. WHAT WE ARE GOING TO COVER TODAY.
A DAY IN THE LIFE
BREAK
GATHERING INSIGHTS
LUNCH
UX PATTERNS
BREAK
DESIGN IN YOUR ORG
9:00am - 10:30am
10:30am - 11:15am
11:00am - 12:15pm
12:15pm - 1:45pm
1:45pm - 2:45pm
2:45pm – 3:00pm
3:00pm – 4:00pm

225. Give you guidance and recommendations to successfully plan and
implement an Office 365 Intranet http://office365intranets.com
DOWNLOAD INTRANETS WITH
OFFICE 365 WHITEPAPER!

226. My twitter handle is @kkhipple and I work at
Thank You!
Organizers, Sponsors and You for making this possible.
50+ SharePoint Presentations @ Slideshare.Net/kkhipple
When to Use What Whitepaper @ WhentoUseWhat.com
Intranets w/ Office 365 Whitepaper @ Office365Intranets.com
External Sharing w/ Office 365 Whitepaper @ Office365Extranets.com
and more!
Message Me On LinkedIn or Email Kanwal@Khipple.com
SPEAKER | AUTHOR | SUPER GOOD LOOKING