Redefining the intranet site experience with SharePoint in Office 365

Nov 29, 2019   |  

Small business team collaborating in modern workplace.

SharePoint Online is continuously updated to provide a flexible collaboration framework. Recent enhancements to communication sites and hub sites improve collaboration and drive engagement. SharePoint sites deliver attractive, personalized experiences, integrate seamlessly with Office 365, and carry reduced development and design costs.

Microsoft Digital provides and maintains the infrastructure and technology to enable effective collaboration for more than 220,000 Microsoft users. Content-driven collaboration at Microsoft is powered by Microsoft SharePoint for Office 365 and its integration with the rest of the Microsoft Office 365 suite and our broader cloud environment.

Over the years, SharePoint has dramatically improved the quality, accessibility, performance, and usability of the base platform for users as well as publishers. Contemporary SharePoint features like communication sites, hubs, and modern groups have been fused with foundational elements like search, taxonomy, and the user profile service to form the backbone of the Microsoft intranet.

The new, modern platform reduces the need for custom development, saving Microsoft Digital time and money. Where development is needed, we can now take advantage of robust new development capabilities in the SharePoint Framework (SPFx) and the client-side web parts they enable to develop and publish attractive, highly functional intranet sites.

Thanks to SharePoint’s new flexible, modern architecture, we’ve successfully transitioned more than 75 percent of our internal publishing sites to the modern communication site.

The SharePoint landscape at Microsoft

SharePoint has a long history of being the primary collaboration platform for our intranet and extranet solutions at Microsoft. Our first corporate communications portal built on top of SharePoint debuted in 2002 and has been updated to work on every version since.

Historically, we hosted on-premises SharePoint Server infrastructure in our on-premises datacenters within our perimeter network. After the internal rollout of SharePoint Online in 2011, we worked with our internal business to convert all of our major sites for internal functions—HR, legal, finance, communications, sales, and learning—to SharePoint Online.

Traditional design and deployment

For years, SharePoint was designed to provide a starter platform on which interesting sites could be built. Although powerful, the default, out-of-box sites had some shortcomings:

  • The default site template was nondescript and basic. If site owners wanted to build an attractive site, they had to go above and beyond the default template. This meant extra work for developers and extra steps in the publishing process.
  • Customization was developer intensive. Customization of site functionality, navigation elements, and design required developer involvement. Achieving a user experience that the business would be happy with required a heavy investment in the configuration and customization of master pages, CSS, JavaScript, and web parts.
  • Sites were not responsive by default. The traditional site types were designed for a PC browser, and the mobile rendering of traditional sites often produced unattractive or partially nonfunctional results on mobile devices.
  • Sites were not accessible by default. Accessibility in the classic SharePoint templates wasn’t up to our current standards. As a result, our intranet sites didn’t provide proper interaction with tools like screen readers or high-contrast color schemes by default. Meeting accessibility standards required design and developer effort.

To mitigate some of these challenges, Microsoft Digital engineering teams developed custom SharePoint design templates that gave site owners a head start on building an attractive, useful, accessible, and responsive site experience. By applying these custom design templates, we could jump start the build process while saving businesses time and development budget. The templates were effective, but they required ongoing development and maintenance.

Our move to the cloud

Microsoft has been a cloud-first organization since 2012. Our organization runs on cloud computing, and that cloud-first ethos is reflected in how we’ve treated our SharePoint infrastructure. We’ve moved our SharePoint infrastructure out of our on-premises datacenters and into Microsoft Azure and Office 365 to take advantage of cloud agility, scalability, and reliability across our IT infrastructure.

Cloud-based collaboration provides several essential advantages:

  • All sites and tools are in one service, from one vendor.
  • Personal and business sites are all within the same administrative and functional scope.
  • All sites are designed, developed, and managed with the same toolset and in the same environment.

Hybrid cloud content management

Our current environment is hybrid by design, but the vast majority of our SharePoint sites are now hosted in SharePoint Online. Although we still retain some data and apps in the on-premises environment, the reasons for doing so are mostly limited to maintaining functionality with older business information systems and apps and uncommonly large org-to-org extranet scenarios.

Thanks to advances in SharePoint Online, these exceptions are now rare enough that we’ve successfully moved more than 99 percent of our SharePoint site collections to the cloud.

Enabling self-service and creative collaboration

Self-service site creation lowers barriers to effective collaboration, so we make it possible for all of our users to provision sites to meet their business needs. In doing so, we create an environment in which our users can collaborate in a way that best suits their particular needs. With SharePoint Online, our users determine what kind of sites they can create, execute on that creation, and administer their own sites.

That’s not to say that we allow site creation without appropriate enterprise-level checks and oversight. As part of our governance and security program (see SharePoint and Office 365: Securely sharing, managing, governing, and protecting content at Microsoft), we monitor site creation, site life cycle, and permissions applied to our content very closely.

Combining self-service site creation with proper governance allows us to offer robust collaboration with minimal friction.

The journey to modern SharePoint sites

SharePoint Online has continued to evolve into a complete and modern collaborative tool, and we’re using the latest features of SharePoint Online to drive collaboration and a better user experience across all of our sites. Our approach to modernization consists of the following key elements:

  • Shift to modern sites as our default site types. Though we enable self-service site provisioning for our end users, we now allow the provisioning of only modern site types: groups-connected team sites and communication sites.
  • All of our development is SharePoint Framework. Whether the customization is being built for a new site or an existing classic site, we require that all of our new customizations are built using SPFx. SPFx web parts function in both classic and modern site types, easing the transition to modern by reducing future rework.
  • Hubs. Hubs give us the ability to aggregate sites by purpose, division, region, or business unit. The hub gives a business function or division control over its own identity through consistent theming and navigation while also centralizing search across all of the sites connected to the hub.
  • Site designs. Advances in site designs allow us to automate the site-provisioning process to build sites appropriate to the business need faster than ever before. Using automation, we can install web parts, create lists and libraries, and launch Power Automate flows, for example. This streamlined process makes it possible for a business to focus on content and collaboration instead of the configuration of the container it’s in.
  • Audience targeting. With new, advanced audience-targeting features, we can target both content and navigation elements to specific audiences based on legacy or modern security groups. In doing so, we make the content more relevant to the user, improving engagement, usability, and satisfaction.
  • Cross-suite integration. Cross-suite integration in SharePoint is as easy as ever. Through useful, out-of-box web parts, our most compelling sites now integrate content from across the suite. Embedded content from Stream and Yammer improve user interactivity, capability, and engagement.

Our move to modern sites

For Microsoft, moving to modern sites means putting greater capabilities into our users’ hands while removing the traditional IT barriers to a truly self-service and user-friendly SharePoint experience. With SharePoint Online, we now have user experiences that have the following characteristics and capabilities directly out of the box:

  • Are accessible by default. Modern sites offer built-in support for ideal color contrast, alternative text, and other features that make them accessible to as many of our users as possible.
  • Are responsive by default. Modern sites are designed to accommodate a wide range of devices and platforms, so that they’re attractive and useful regardless of how our users access them.
  • Are attractive without needing a power user or developer. Modern sites are simple to design and deploy. We don’t need to enlist developers or additional IT support to get our sites up and running the way we want them.
  • Are secure by default. Whereas classic sites included no review mechanism for scripts run on the site, modern sites provide stronger security through a script review process.
  • Enable our self-service culture. Any user can create a useful, attractive, responsive site without requiring services from IT or a developer.
  • Are integrated with Office 365 groups. In addition to a shared inbox, calendar, OneNote notebook, and Planner for task management, new groups now get a modern, groups-connected SharePoint team site. When a new SharePoint team site is created, a new connected group is also created.

Owners of traditional sites can now upgrade to modern sites to reap these benefits by:

  • Enabling the modern user interface in classic sites
  • Connecting the site to an Office 365 group
  • Switching to a modern tenant-scoped branding
  • Transforming classic site pages into modern pages

Figure 1 presents examples of classic and modern SharePoint team sites.

The default classic team site experience.
The modern team site experience.
Figures 1a. & 1b. The improved default team site experience, classic site (top) versus modern site

Communication sites and site designs

We’re using communication sites in SharePoint Online as the default building block for sites that host our major internal business functions now and going forward. Communication sites provide a great place to share information with others. We can share news, reports, statuses, and other information in a modern, visually compelling format. Coupling Hubs with site designs offers some major benefits to the sites that use them and to the content creators who work with the sites:

  • Look and feel is consistent and attractive throughout a collection of sites. Modern templates already offer an attractive design out of the box. The association to Hubs ensures consistent hub-wide navigation and search functionality across all sites in the hub, along with consistent branding and design. As a result, it’s much easier for our businesses to maintain an attractive and consistent user experience.
  • Site designs can be applied anytime—at creation or after creation. Users can easily create an on-theme, on-brand communication site by selecting a site design at site creation time or by selecting Create Site within an existing hub. They can also apply a site design manually after creation by selecting an available site design from Settings > Site Information.
  • Automating repetitive tasks simplifies provisioning. Site designs can be used to install web parts, create lists and libraries, apply conditional formatting, automatically kick off a Power Automate flow, and much more. The application of site designs is cumulative. A newly applied site design that changes a value set by a previous site design will overwrite the value set.
  • Administrators manage site design permissions. Administrators on the Microsoft Digital team decide which site designs and settings are shown to each team. Using security groups, we can control which site designs are visible to and usable by our users. The permissions process helps us ensure proper branding and theming for our major business sites as well as consistency of sites across our divisions.
  • Any team or developer can submit new site designs to Microsoft Digital. After a review to make sure that the site designs are taking approved actions, we upload them and set all necessary permissions, making them available in the site design gallery for our users.
  • Modern templates and site designs reduce costs. The new modern templates have democratized the SharePoint site-building experience. In most cases, designing and implementing a modern site that’s attractive and responsive no longer requires a developer. For those times when development resources are needed, the combination of Hubs, site designs, and other new features like SPFx mean faster build times for our users.

Figure 2 shows our internal corporate communications site, MSW, which takes advantage of many of these features.

A screen shot of Microsoft's internal communications site, called MSW.
Figure 2. MSW, an internal communication site for employees, was built using mostly out-of-box features
SharePoint Framework web parts

We’re using SPFx to create web parts and extensions across all of our SharePoint installations. SPFx provides an open standards–based development model, so engineers who are already familiar with common web development approaches can, with minimal relearning, design and implement functionality that works well with SharePoint. In addition, modern and classic SharePoint site types can each use SPFx web parts, which eases the transition from classic to modern. There’s no need to relearn, retrain, or rewrite.

Embracing an agnostic, open platform

SPFx is platform agnostic, which is a huge advantage for us. Our best engineers can develop for SharePoint regardless of their preferred development platform. They don’t need to learn a new integrated development environment (IDE) or toolset. Although we default to using React for development internally, we can use other approaches in our solutions (e.g., JavaScript, TypeScript, Angular) if needed.

SPFx web parts provide several specific development advantages, including the following:

  • It runs in the browser in the context of the current user.
  • The controls are responsive and accessible by nature.
  • It is framework agnostic.
  • Performance is reliable.
  • End users can use SPFx client-side solutions on all sites, including communication, team, or group sites.
  • Users can add SPFx web parts to classic and modern pages.
  • Because Microsoft Teams has adopted SPFx, customizations need to be written only once to apply to both platforms.

The most substantial benefits of the SPFx web parts are cost and time savings created by the following advantages:

  • When we need a web part, nearly every web developer can now be a SharePoint developer with limited ramping up of skills needed.
  • Common patterns used across the internet work in the SharePoint world, saving a lot of time in building our solutions from scratch.
  • The SharePoint Patterns and Practices community offers an open-source collection of templates, examples, and even fully functional solutions.

Experience improvements

In addition to the flexibility of building on an open platform, several major new user-facing functionalities coincided with the improvements in the underlying architecture:

SharePoint Start. SharePoint Start provides a single, personalized portal for employees to catch up with everything they care about, including company news, updates to relevant documents and followed sites, and bookmarked content. SharePoint Start fully integrates with the SharePoint home site, automatically adopting its look and feel and its navigation.

Page templates. Reusable page templates cut down on the time needed to build out a site, and make it easy to maintain consistent branding and navigation across the entire site.

Organization assets library. The organization assets library provides a single home for all site images, streamlining the process of finding and utilizing imagery. It also creates an easy way for users to add assets when creating SharePoint sites or pages.

Root site swap. Sites can now be moved directly to the root directory, creating a true intranet home page through SharePoint Start that lives at companyurl.sharepoint.com.

In addition to new feature rollouts, some existing features also received substantial upgrades. For example, improvements to the Content Delivery Network (CDN)—which hosts static assets accessible through global high-speed networks—translate to faster page loads and reduced latency. The CDN offers access control features that we can adjust to ensure that only users with the required permissions can access CDN assets.

Hubs and site designs

Using SharePoint Hubs, we can apply and maintain a hierarchical structure to carry design elements across sites with related purposes. Hubs connect and can organize sites based on project, department, division, region, or other factors, making sites more effective and easier to use through:

  • Shared navigation. Hubs are connected back to the parent site with the hub site navigation bar, providing comprehensive navigation across a set of Hubs. We frequently customize the hub site navigation bar to fit the specific needs of each hub.
  • Consolidated search across the hub. When users search at the hub level, results are sourced from every site associated with the hub. Of course, as is the case with all Microsoft Search-driven experiences, users see only the content for which they have permissions.
  • News and event aggregation. Hubs provide a single, one-stop shop for news and events across all connected sites, so users don’t need to browse multiple sites to find relevant information.

Figure 3 shows the arrangement of an example hub that’s built around a major business function—in this case, Microsoft CSEWeb (our internal IT site). CSEWeb serves as the hub and aggregation point, whereas major IT-related areas (e.g., collaboration, meetings and voice, finding) are represented in associated team or communication sites.

A graphic of an example hub for the internal IT site at Microsoft, called CSEWeb. CSEWeb is represented in the middle. Connected to it are a variety of team or communication sites, including Collaboration, Meetings & Voice, and Finding.
Figure 3. An example of a hub site built around CSEWeb, our internal IT landing page

By default, sites attached to a hub inherit its branding and navigation. We can configure default site designs at the hub level to ensure that when new sites are associated to the desired elements, the following actions (among others) can be applied:

  • Creating lists and libraries, including the application of conditional formatting
  • Setting permissions
  • Installing web parts
  • Updating local navigation
  • Applying site columns

These changes to the attached site’s design function as an overwrite, not an uninstall or reinstall of previously applied site designs. Creators can also work backward and apply existing communication site designs to their hubs.

Because it improves the usability of sites across the hub, this feature has already made it much easier for users to reorganize sites around new hubs when teams reshuffle or when projects change. There’s no longer any need for a cutover or a loss of visibility, because site owners or IT can reassociate their sites to meet the changes in organizational structure. When they’re ready, they detach existing sites from the old hub or classic parent site and attach them to the new hub, automatically inheriting the new hub’s design and settings.

Building intranet sites on a reliable and agile foundation

Our approach to modern design and functionality in SharePoint Online is dependent on a number of foundational features and functions within SharePoint Online and the greater Office 365 landscape. We’re taking advantage of several aspects of modern SharePoint functionality to make the intranet site experience even better for our users.

Personalizing the experience with audience targeting

Audience targeting makes site content more interesting by showing users content that’s relevant specifically to their team, department, interests, or geographic location. SharePoint site owners can turn on modern audience targeting to specify which groups of users will see a particular piece of site content such as a news post, page, or navigation element.

Site owners can utilize modern audience targeting—which they can toggle on or off in SharePoint settings without the help of a developer—to target classic security groups or modern Office 365 groups.

Search

The modern SharePoint site enlists comprehensive aggregation for search. When connecting sites together and implementing Hubs, subsequent searches include content from the parent site, providing an aggregation of content that we can tailor to our needs.

Learning from our migration

Configuring modern SharePoint as the default platform within our Office 365 tenants for new sites was a straightforward process. In hindsight, though, existing sites that weren’t using the modern design should have been given more consideration. Migration of these sites was examined on a site-by-site basis. Our tenancies contain thousands of site collections, and we needed to determine which sites were good candidates for immediate migration and which ones required more preparation before migration was an option.

Our migration approach

In planning for our migration, the user experience took precedence. We wanted our migration tasks to provide the environment that would best facilitate a shared, collaborative experience for our users and interfere as little as possible with that experience. To start the process, we first determined the best candidates for migration and how we would facilitate the migration.

Using the SharePoint Framework in migration

The SPFx foundation was critical in allowing us to provide a firm cutover point for using the modern interface and communication sites as the defaults for our sites. Because SPFx is backward compatible, we could use web parts created using SPFx in sites that aren’t built on the site design or converted to the modern user interface. We didn’t lose any creation time by keeping legacy sites current before migration. When we needed a new web part in a legacy site, we simply used SPFx and brought over the web part when the migration occurred. Because of this, we were able to establish SPFx web parts as the default before we migrated a single site, and we moved many of the web parts that required changes to SPFx while still in their legacy state. This greatly simplified migration of the site as a whole.

Migrating complex sites

For some of our larger and more complex sites, we had to consider and adopt a refactoring of the site and site collection as part of the migration. Refactoring allowed us to examine each site and how they were connected and related before migration. If we wanted those relationships or connections to change, we built that process into the migration, so our migrated sites and Hubs were properly organized after the migration was completed. For example, when we migrated our internal company site, refactoring was built into the migration. That process included important tasks that should be carried out on all large or complex sites:

  • Determine which site collections and related components are essential to the site.
  • Build out larger subsites as Hubs to allow more autonomy and control.
  • Use the Hub model to aid migration. Leave older content in the previous site and build out new content as Hubs.
  • Link Hubs together to aggregate content and search. Branding and navigation can float down to child sites while searchable content floats up to parent sites (coming to customers in 2020).
  • In addition to these steps, we found it helpful to use a loosely federated and aggregated design rather than a more rigid and monolithic design. Unlike subsites, sites associated to a hub can be freely disassociated and associated to a new hub quickly and easily.

Creating components designed for reuse

When necessary, we create web parts to suit our needs in SharePoint. Custom web parts help us provide a directed and comprehensive user experience without sacrificing user experience or design elements. We always consider reusability when we create new web parts. If we can use a web part for other parts of the organization or fulfill a need in other sites, we want to design it in a way that allows for reuse. We have many web parts that are built with a more general and broad approach in mind that are reused—and potentially customized—in different places throughout our SharePoint site landscape.

Benefits and looking forward

The greatest benefit of the migration to modern sites has been reduced requirement for development and IT intervention. Our users can now create attractive, useful, accessible, and responsive sites using default tools and site-creation processes. Our business groups are driving their own site creation and design, and they can maintain more current and complete sites with less effort. We don’t need to enlist extra IT resources or incur additional development delays or extra costs, which saves us time and money.

The process of migrating our intranet publishing sites to SharePoint in Office 365 is ongoing. Every day, we draw closer to our goal of migrating every last publishing site to SharePoint. As we do, we unlock new time and cost savings while providing our organization with attractive, useful, accessible, and responsive intranet sites.