🧐 So what's this all about?!

Recently, I was chatting with a friend about a site they were building. The site was fantastic... functionally, but from a look and feel perspective... well... it left a lot to be desired.

I politely challenged him (in a roundabout way) by asking when he planned on completing the site and adding the 'polish'. He looked at me with a not-so-subtle look of defeat and simply said, "Ah it's not that bad... for SharePoint anyway...."

We haven't spoken since...

I'm joking of course, but... his comment did slightly get under my skin.

I typically spend half my life thinking about SharePoint and the second half thinking about user experience, so naturally, these worlds tend to have quite a lot of influence over each other in my mind.

SharePoint is a platform which does have what can be considered constraints in terms of how you can create/structure pages and sites BUT, this should be no excuse for creating something with a poor user experience.

The user experience should never be an afterthought, whether it's a digital or physical solution. Merely meeting functional requirements is not going to be good enough for successful usage or adoption. It should and must be a core part of the solution design.

At the risk of going on a rant (maybe too late! 😜) I'll get to the point of this post. It's quite simple. The theme here is inspiration.

The idea of me building 'ShareFlix' is to take a global well-known platform and try my best to replicate the user experience (some creative license taken of course) in SharePoint. Hopefully, this will inspire you to see past SharePoint constraints and challenge yourself to think outside the box when building solutions!

What are we building?

We are going to build a SharePoint Online flavour of Netflix (and probably YouTube now that I think of it). Complete with a site homepage which displays a hero or promoted movie as well as displaying the latest from multiple categories of movies.

We will also create a standard movie page experience which can be replicated again and again which not only displays the chosen movie but also provides information about the movie as well as dynamic navigation to discover similar movies.

All powered by metadata, so... it all actually works 😎

Fig. ShareFlix Home Page

Fig. ShareFlix Home Page

🎥 SharePoint Tutorial Part - How to build ShareFlix for video promotion and discovery

The video below will give you a step-by-step walkthrough of how I built ShareFlix, so I'll save my fingers the typing and let it do the talking. If you are only interested in a specific part, I've provided the timestamps for the main sub-topics covered.

• 1. Solution Overview - 00:00

• 2. Creating the managed metadata for video categorisation - 05:35

• 3. Add the managed metadata to the site pages library for tagging - 07:28

• 4. Create the video category navigation list - 09:02

• 5. Create the video page template - 12:10

• 6. Create a video document library - 19:03

• 7. Add our sample video content - 21:10

• 8. Create the site homepage - 25:55

• 9. Create our video category pages - 31:30

• 10. Site navigation and branding - 33:00

☝️Core Concepts of the ShareFlix Solution

There are a few core concepts or ideas that require some thought to bring ShareFlix to life. Without any one of them, the solution would not be functional or deliver the desired user experience. There are:

• Front of house vs backstage approach
• Metadata-driven discovery
• Look and feel

Let me explain each in a bit more detail.

Front of house vs. Backstage

I generally design intranet SharePoint solutions with a 'front-of-house vs. backstage' approach. Essentially, there are two main user types for a communication or Intranet based site.

• The people who create and maintain the site - Backstage Crew
• The people who want to consume the information on the site (these guys couldn't and shouldn't need to care less if it is SharePoint or not) - Front-of-House Audience

Front of House

'Front-of-house' is where we focus on the end-user experience. Here, our primary focus is allowing the end users to find what they want, discover what they didn't know they wanted and generally leave them with a positive user experience in doing both of the above.

Where possible, we shield them from having to know anything about SharePoint and present them with a site experience which follows the same rules as external consumer-grade websites (when is the last time you had to read a user guide on how to navigate Netflix or Youtube?!)

For ShareFlix, our 'Front-of-house' will be comprised of the following:

• Homepage - This will be the landing page of our solution and will present a hero movie as well as the latest movies from multiple categories a la Netflix style
• Video Pages - The primary objective of the Video pages will be displaying a movie as well as additional information about that movie for context. A secondary objective of these pages will be to provide an opportunity to discover similar content and quickly navigate to other movie categories.
• Video Category Pages These pages will provide a gallery of all movies tagged with a specific category providing a clear overview of all movies within that category.

Backstage

'Backstage' is where things get very SharePointy. This is where we bend SharePoint to our will to organise our site content and use the functionality to make it all functional. The Backstage Crew will be site Owners and Members who have some degree of competency with the platform.

They are stewards of the sites user experience and care deeply about it 🤨

For ShareFlix, our 'Backstage' will primarily focus on:

• Pages Library - This is where all of our video pages will be created and managed from
• Video Library - This will be where we store the video files which will be embedded within our video pages
• Category Navigation List - We will use this to create and maintain our video category navigation which will be embedded on every video page
• Site Term Store - This will be where we maintain our list of video categories as metadata

Metadata-Driven Solution

Our ShareFlix solution relies heavily on metadata to help with content discovery. What is metadata, you ask? Well... in our scenario, it's simply a set of words (or 'Terms' in SharePoint language) that we will use to tag our video pages with, so that we can tell other web parts only to show content tagged with a specific word.

For example, the words (or metadata) we will make available to tag our videos will represent video categories.

We will have:

• Award-Winning
• Binge-Worthy
• Children & Family
• Critically Acclaimed
• Documentaries
• Horror

And that means we can tag each video page with one of the above video categories, allowing us to have a dedicated feed for each one. Simple but super effective in building our target user experience.

We'll manage our metadata within the site Term Store and then make these terms available for tagging within the Site Pages library by using a 'Managed metadata' column (all covered in the below video 😉).

Note: Metadata is a much broader and fundamental topic within SharePoint. It is basically any additional information you use to describe a site page, file or list item. It doesn't have to be a managed set of words, it can be dates, people, free text, yes/no etc. It is extremely powerful and something you want to get your head around. But, It deserves way more attention than I could give it as a side topic in this post, so I'll have to save an in-depth look till another time.

Branding

How we apply branding to our site will be absolutely crucial in selling the Netflix/ShareFlix illusion. To be fair, it doesn't take too much as the defining feature is a dark theme which is not commonly used in SharePoint sites (that I tend to see anyway). Couple a dark theme with a cheeky Netflix-style logo and we are there nearly there!

Outside of the "Branding" options SharePoint offers you, it's also important to ensure that the imagery you use within your site is somewhat curated and aligns with the overall desired look and feel of your site. This generally has a massive impact. I'm sure we have all seen sites that are dominated with random images that, in isolation look fine, but when added to a site, tend to look out of place and mismatched. Try to avoid that if at all possible!!!

Luckily for us, the imagery on our site is all movie posters which generally tend to look great and fit the look and feel we are aiming for.

Summary

So that's it. Netflix (kind of) within SharePoint!

Now I know this was a bit of fun, but as I mentioned at the start, the purpose of this post is to hopefully provide you with some inspiration to try to create some pretty cool user experiences within SharePoint.

Hope you found it useful, I certainly had a giggle in creating it!

Until next time, Dan