Microsoft 365 Community The intelligent intranet - Transform employee communications and digital experiences, 5 Nov 2020

Previous Meeting

Next Meeting

⏯

youtube image

►

From YouTube: The Intelligent Intranet - Build an intranet landing page in real time

Description

In this 17-minute site owner focused videos, Debjani Mitra shows how to build modern SharePoint portal landing page in real time using out of the box capabilities like with news web part, custom layouts, corporate images, Yammer conversation web part, Twitter web part, call to action web part, sites web part, recent documents web part and so on.

Video presenters: Debjani Mitra – Sr. Program Manager, Microsoft | @debjanimi

Supporting materials:
• SharePoint Look Book - https://lookbook.microsoft.com
• SharePoint pages and web parts - https://support.microsoft.com/en-us/office/pages-in-sharepoint-3833b917-a39d-43f9-85ff-f17949fc1034?=us&ui=en-US&rs=en-US&ad=US#id0eaabaaa=apps_web_parts&ID0EAACAAA=Apps_web_parts

Learn more:
• Full Intelligent Intranet Web Series playlist at https://www.youtube.com/playlist?list=PLR9nK3mnD-OVZXR9UCcw9UT59EPCt9ELD
• Intelligent Intranet Guidance at: http://aka.ms/intelligentintranet
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

Hi, I'm deep jani mitra, I'm a program manager on the sharepoint team and today I'm really excited to show you how you can build your best internet landing with modern sharepoint. So in this scenario, I'm responsible for building out contoso electronics, intranet landing. You can see I've already gotten started and added two news web parts here and though this might not look like much now. I promise you in a matter of minutes. This is going to be a thing of beauty. Now the landing is built on a sharepoint communication site in modern sharepoint.

A

It's really easy to spin up your own sites and first we'll just take a quick detour. So I can show you how, when you go to the sharepoint start page, you can see there is an option right here to create sites and when I click on it, there's two kinds of sites you can create. You can create a team site or a communication site.

A

The team site, as the name suggests, is intended for teamwork and collaboration, whereas communication sites are intended for broad communication, so it's typically built and then maintained by a small handful of people, but then a lot of people come to it to get information.

A

The internet landing, for example, is maintained and built by a small team, but all employees of the company come to it. Okay, let's now go back to the landing and get to work. First, I'm going to show you how these two news web parts were configured. This is the top most web part on the page. Employees coming to the site are necessarily going to see the content.

A

That's in it, so the corporate communications team really wants to curate the news posts that show up here, and they do that by leveraging our news organization capability that you can see right here that allows you to pin specific news posts to specific locations in that web part, and you can imagine somebody from corp comms comes in every week and updates the content that's in here below.

A

We have another news webpart now, this, as you can see, is pulling news from five important sites in the intranet and if I scroll down you'll notice that this news web part has audience targeting enabled this means that when an employee is looking at this news webpart, they see news that is targeted to the groups that they are a part of, and these groups could be their geographic location, their level at the company, their business role, etc, etc.

A

I'll also take this opportunity to point out the visual distinction between this news post from leadership connection and this news post from the consumer retail site. Now the difference arises because the leadership connection, news post is an organization news post. Let me explain: news in your organization can come from many different sites, but an admin is able to specify that some of those sites are authoritative sources of news when they do so.

A

When a news post is published to one of these sites, it is distributed broadly to all employees in their sharepoint start page and the news feed of their sharepoint mobile apps and no matter where that news post rolls up in the start page in the mobile app in any news web part across the internet just like here. It has that special visual treatment behind the site name. That indicates that it is authoritative news.

A

Okay, now to continue building out this page, I'm going to add a three column section, and here the corporate communications team wants to highlight three resources for employees, and we want to make it really visual. So I'm going to use images for each of those resources.

A

These images are in my file browser, and you can see I can just drag and drop them easily to the page.

A

And as I drag and drop them, these images generate image webparts for themselves. Now, for each of these images, I am going to go in and turn the overlay text on. So this is for the benefits porter and you can imagine- I can put in a link to the portal here, but for now I'm just going to say test.

A

This is for training.

A

And finally, this is for hr web and because I want each of these resources to really stand out- and I want this section to visually break up the page. I'm going to give it a section background, so you can see. I have a number of options here. Currently we have none selected, but you can also select neutral, soft or strong. I'm going to go with soft, and these colors by the way are derived from the site theme. So keep that in mind, because we'll come back to site theme in just a few minutes.

A

Next, I'm going to add a one-third right column section and on the left I want to add a yammer webpart.

A

So to do that, I can just click on plus this pulls up our web part picker and, as I scroll down, you can see that sharepoint provides over 40 out of the box web parts and if you want, you can also create custom web parts for your organization that can show up in here. So I'm just going to search for yammer and select conversations and we're going to configure this web part to connect to the leadership connection community in yammer.

A

This is a place where there is great two-way conversation between employees and their leadership. People ask questions, respond to polls, get involved in ongoing conversations and more. Let's limit this to four conversations.

A

The yammer conversations web part is an excellent web part to add to your intranet landing because it creates conversation on the landing and really helps drive up that employee engagement factor also notice that the look in this web part is exactly aligned with the new and improved yammer.

A

In this remaining column, we are going to add the twitter, webpart and we'll point it to controso's official handle, which is at contoso inc and actually, let's pull up the six most recent tweets from the company.

A

Great now, contoso also has a hackathon that's coming up and we want all employees to sign up so we're going to add a call to action here. So I add another column, another section here and I can go in and pull up the call to action. Web part, and now, let's configure it so first, I'm going to say contoso hackathon is the place to be, and we want to give it a background image. So, let's go in there and click on change.

A

Now I do want you to notice that sharepoint provides a number of different sources from where you can pull your images. In fact, a big advantages of advantage of using sharepoint is that you can tell your story in a really visual way. You can get your images from stock images.

A

Microsoft has recently acquired thousands of beautiful, high quality images for you to use across your internet, entirely royalty free. You can use web search. Of course you can have organization assets. These are approved assets from your organization that authors of sites and pages and news can use you can upload from one drive from the site assets from your computer or from a link, so we'll go with stock images today, because this is a hackathon I'm going to search for a computer number of great images. I like this abstract one.

A

So let's select that and I'm also going to give it a button label. Let's say sign up great, so this is shaping up really well, but when we talk to customers about what makes for a truly compelling intranet landing, we learned that, in addition to news and resources and conversations and some content, even audience targeted to groups of employees, customers really want content. That's highly personalized to every employee, also on their intranet lending.

A

So what we've built here so far is a wii space content, that's relevant for all employees and what we are now going to build on here is a me space content, that's highly relevant to every individual employee. So your internet landing has this great interplay between a wee space and a me space, and to do that, I'm excited to show you a new design element in sharepoint called the vertical section.

A

So I can go here and say add section and I have the option to add a vertical section now this adds a column that spans the entire length of the page, as you can see here, and we're actually going to go ahead and give it a section background. So it visually stands out from the page and now, let's add some personalized web parts here, the first one we'll add is news now notice.

A

This is the third news web byte, I'm adding on this page, but news is such a versatile web part that you can configure it in different ways to serve different purposes.

A

So in this case this is going to be a my news web part and I'm going to configure it to pull the recommended news for the current user and let's actually show eight news posts.

A

Next, I'm going to add the sites webpart and we're going to configure this some more as well. Let's make it a grid layout and also, let's show the frequent sites for the current user.

A

So your intranet, of course, is made up of many different sites, and it's be fitting, then that the landing is sort of the gateway into the rest of the sites that you frequent and I'm going to give this a header my sites, great I'm, going to add another web part here which is saved for later.

A

This pulls in content from across the intranet that I have personally saved for later for myself and finally, here I'm going to add the my recent documents web part.

A

And we'll configure that a little bit as well by showing eight of the most recent documents in it in the vertical section, you can also add the my feed web part, which pulls in your content from across microsoft's apps and experiences helping you sift through the clutter and showcasing news and documents that should be top of mind for you. Well at this point, I'm really happy with the body of this landing, so I'm going to go ahead and publish great. Let's now spend a little bit of time talking about navigation.

A

As you can see, I've already gone ahead and set this up. It was super easy to do, but, frankly, no fun watching me do it, but I will go into edit mode to show you that you have the option here to enable audience targeting for navigation.

A

Now, when you do that for any of these navigation nodes, you can specify audiences that it is relevant for thus creating a really personalized navigation experience on the landing for a site like the landing site. Branding is also really important, and now let me show you how you can really make the look and feel of this site your own. So when you go to the gear you see here, you have the option to change the look and there's a number of things you can change about this site. Let's take a look at each of these.

A

The first is theme, so sharepoint has nine out of the box themes, but for a site like the landing, you might actually want to have a custom company theme and that's super easy to do with the fluent ui theme designer, so we're in this tool. Now I won't spend a whole lot of time here, but let me give you a quick overview here. You provide the three top line colors.

A

This results in a few derived colors, each of which you can individually update as well and up here you can see the impact of that theme in various on various elements in sharepoint. Now what I love the most about this tool is that front and center? You have this section that tells you about the accessibility status of that theme when you're finally ready you can go ahead and export that theme into sharepoint using any one of these three handy methods.

A

So back to the landing you can see that contoso electronics has already imported a number of custom themes. I'm going to go ahead and select the controlso corporate theme for this site.

A

Okay, next is the header. So here we have the standard header. If you'd like to save space, you can use the compact header as well. We go back to standard. You can give it a site logo, including a non-square logo, which is exactly what we're going to do now and that looks great and then finally, you can give it a background emphasis, that's derived from the theme, so I'm going to go ahead and give it the strong emphasis.

A

Next, we have navigation. So here we have mega menu navigation selected, and this sort of helps your employees see the full information architecture of your intranet at a glance. But if you'd like a more click-through experience, you can select cascading as well, and that is what it looks like.

A

I'm going to go back to mega menu for our landing and then finally, we also have a footer. So let me scroll down to show it to you by the way, as I was scrolling notice, that the header became shy to save you space on the page. Now here is our footer. We have an extended footer here, but if you just want to have a single layer of navigation, you can have a simple footer as well.

A

You can give it a logo, a display name and a emphasis, and of course, if you don't want a footer, you can toggle this off, but we'd like to keep ours in. So I can go ahead now and save the theme.

A

So this, I think, is a really compelling intranet landing, but there's one thing you can do to make it even better and that is by making this site a sharepoint home site. So what is a sharepoint home site? A home site is a communication site on which you have run a powershell command to make it particularly useful as the landing for your intranet. So, in other words, a home site is a communication site with some added superpowers.

A

Let's take a quick look at what these superpowers are. The first is searched so when you designate a communication site to be a home site, the search scope expands to the entire organization.

A

Now, when an employee comes to the home site and searches for something they get results from the entire tenant, which is exactly what they'd expect from the landing to their intranet, and when I click in the search bar, I get great zero query suggestions from sites I frequent files. I've recently used people. I work with, and news that's relevant to me.

A

Second, the home site is automatically designated a source of organization news. As a reminder, this means that when a news post is published directly to the home site, it is distributed broadly across the internet to all employees and no matter where that news post rolls up it has that special visual treatment, just like the one you see here with behind the site name. That indicates that this is authoritative news.

A

The home site also has easy access in the sharepoint mobile app. When you launch the app there is an icon that takes you directly to the home site, thus helping employees stay connected with the organization, even as they are on the go and speaking of easy access. There is one thing that we highly recommend you do, which is configure a branded link in the suite nav like this one that points directly to the home site. Now this is quite easy to do. You can just go to the admin center and search for custom theme.

A

And here you have the option to provide the image, provide a link to the site that that image, points to and after you've hit save, no matter where an employee is whether they are in sharepoint in outlook in onedrive and any one of the office apps. They can just click on that link and be brought right back to the intranet landing, be grounded and situated in this top level.

A

Intranet experience if you'd like to learn more about information, architecture, governance or even how to train folks in your organization about sharepoint, you can go to docs.microsoft.com sharepoint to learn more.