Intranet home page design 101: Part 3 — Elements of design

Now that you’ve developed what should be included on your home page (or in the home page’s site), it’s time to lay out how you’ll show it off. Design and layout will be seen by many as the most important aspect of your project. And, in a way, it is. You shouldn’t do foolish things with the design. But you’re not expected to create your own Mona Lisa. As I mentioned at the end of my last post, content is—and always will be—king. Design is a distant second to content and you should treat it that way.

But that doesn’t mean you should ignore proven practices and score easy points on branding, colors, and layout. You have a lot of options in the modern SharePoint Online experience. Less so with earlier versions of SharePoint, but that doesn’t mean you don’t have any.

Branding

If you have representatives from your marketing or branding department on your intranet team, you will hear a lot from them on “reinforcing the brand”. RGB values and icons do not define a brand. They may represent a foundation, but they are not the only arrow in your quiver to successfully reinforce your brand when it comes to your intranet. Below are some ways to push your brand successfully in your intranet.

Brand the Office 365 experience

Office 365 offers some built-in ways to configure your ecosystem to represent the organization’s brand. You should aim to complete at least the items below at a bare minimum. These changes are too easy and provide too much brand reinforcement value to ignore.

Figure 1: Branding at the Office 365 level affects the entire experience, not just SharePoint. And that’s a good thing. (Image from Microsoft’s SPC 19 OneDrive update post, used with permission.)

Many organizations don’t even know these options are possible, so consider yourself ahead of the game. There are some technical requirements to be aware of before performing these steps, so please read the documentation before you start pressing buttons. These steps can only be performed by an Office 365 global admin.

1. Add your organization’s logo and a “home” link to the suite (navigation) bar in Office 365. Choose your preferred color for the suite bar as well.

  • a. The logo should be a knockout version and not be too wide. In my experience, a 2 × 1 ratio width-to-height is best to ensure you can read the image. You want to err on the side of the graphic being legible in the vertical direction.
  • b. The link can point anywhere you’d like. A standard recommendation is point to your intranet homepage. And why not? You’re putting plenty of effort into making it good. (I recommend against pointing to your organization’s public website. Generally, this URL is known to most employees whereas your intranet homepage isn’t. Plus, internal folks typically don’t have as much use for the public website as they do the intranet, if the latter is executed well.)
  • c. For the suite bar’s color, I recommend a darker color and generally the primary (not back-up) color from you brand palette. Avoid light colors and pastels. Keep in mind this bar shows up on top of almost all Office 365 apps, so test them out to make sure your chosen color doesn’t clash anywhere. (Note: some apps do not show the chosen color due to technical limitations.)

2. Add a brand-relevant background image, organization logo, and short terms of service link to the Office 365 sign-in page. This page will become a familiar experience for your colleagues and if they’re on different machines (at a hotel, perhaps), the design of the page will reinforce that they’re in the right spot.

  • a. The background image should contain no text because the image automatically scales based on the device resolution, so text can easily get cut off. You can have some fun with this by updating it on a regular basis to celebrate accomplishments, holidays, etc.
  • b. The organization logo should be your primary logo. It sits on a white background, so any colored logo should look great.
  • c. You have very few characters for the message, so using something like, “By logging in, you accept these terms: https://company.com/o365terms

3. Add relevant links and icons in the App Launcher (aka Waffle) to match your brand. Many organizations include links to the intranet homepage (to supplement the SharePoint link), the Human Resources system, the IT support portal, the travel portal, the reimbursements submission app, and more. These apps also get added to the Office home page. The Waffle isn’t a static thing and you can’t get rid of it, so you might as well take ownership and make it part of the overall ‘intranet experience’.

To code or not

I generally recommend sticking to out-of-the-box options for design and layout. For one, I don’t have web development skills. But more importantly, the need for those skills means maintenance can be difficult: updates and changes take more time than OOTB web parts and there’s a big learning curve when the original developer leaves the team and someone takes over. It can leave your page and site in a state of limbo due to lack of resources.

Right now, you may think to yourself, “Nah, we’ll always have the resources for this.” Respectfully, that thought is naïve. Always build solutions that are simple to maintain and update. SharePoint Online is easy enough to use these days for almost anyone to make updates to pages and content; easier solutions mean a lower barrier to entry which means a larger pool of potential owners.

That said, thousands of Microsoft stack experts will vehemently disagree with my statements above. The SharePoint team at Microsoft has rolled out tools and add-ins to make development easier than it’s ever been. And while that’s all well and true, you’re still talking about a small subset of people with those skills working on a platform that—yes, it’s true—changes all the time. I have definitely seen the goalposts get moved by Microsoft—on a custom intranet add-in I worked on, no less—affecting which features and development options are supported.

Development is a big choice. I always steer clear. But if you feel the need to go that route, make sure it’s for good reason. Branding and “making it look good” shouldn’t be the key reason. Good reasons to custom-develop could be: a custom global navigation solution, roll-up web parts that bring critical KPIs together on the home page, integration with existing custom or third-party apps on right on the home page, and interactive experiences that entice user retention… just to name a few.

Carousels and heroes

A major web design feature of the 2010s is the grandiose stock image that contains text and links to another place. Here’s an interesting article on the topic, if you’re interested. This element of web design may be something we all look back on in some years and say, “Why?” Kind of like websites with gifs, electric-colored graphics, and repeated background patterns back in the 2000s. (See the still-live Space Jam movie website as an example.)

But for now, they are seen as a best-practice way to share important information in a way that grabs the user’s attention and they’re always on the top of the web page. These are the digital version of the roadside billboard. They can be effective, but only when implemented correctly.
Microsoft is continuing the life of heroes with OOTB web parts that push this design. Both the hero and news web parts in SPO modern sites push large images (including built-in access to free-use stock imagery), headline text, and hyperlinks to garner more information on the topic.

Figure 2: A new SPO Communication Site comes with a hero section automatically included at the top of the page.

I mention carousels in the title of this section because, while a bit older than the SPO hero web part, having a rotating banner on the top of a web page was an earlier incarnation and there are plenty of pre-built plug-ins and web parts you can install to get this effect in SPO. Research shows carousels may not be effective, at least beyond the first image, but your results may vary.

Regardless of your execution, heroes generally get plopped right at the top of the page; very valuable real estate, indeed. You want to make sure you use this space to its potential.For that reason, I have some rules on how to smartly implement heroes and carousels:

1. Have a strict schedule for which image displays where and for how long. The longer an image displays (as in, the longer it doesn’t get replaced over a number of days), the more likely people are to ignore it and consequently the hero area itself.

  • a. For SPO hero web parts, start an image as the primary hero for a bit, then downgrade it to a smaller one. For carousels, the first one is the one everyone always sees. Demote it to a later spot quickly (within a couple days) lest everyone get bored with the area.
  • b. Pre-schedule necessary announcements ahead of time and give priority to the ones that deserve it. A reminder hero on Fridays from noon to close about submitting time cards is a good one to keep as number one or two during the relevant time period. Benefits elections, performance review submissions, and other HR processes are easy ones to schedule ahead of time.

2. Provide a way for individuals to request a hero image and provide the resources to design them. I have always built a PowerPoint slideshow with a base design for requesters to sketch out what they want so graphic designers can use that inspiration in their design.
3. Stick to the brand standards. This is one place where you can push major brand reinforcement.
4. Keep images simple and not overwhelming. Make sure the text is legible. Use a background color behind the text (on top of the image) if it’s hard to read against the background image.
5. Always include a “click for details” statement somewhere on the image (or use built-in text, like is included in the SPO hero web part) .
6. For carousels, do not pause an image for more than 7 seconds. Do not host more than four or five images at once. (Think about it: who sits on the home page for 35 whole seconds without scrolling?)
7. Never let the hero go without content. Have a number of images ready to go when you need to fill a void. Friendly reminders, tips and tricks, these types of things are super valuable and don’t get much press usually. If your organization has an Employee Assistance Plan, pull out the major offerings from that and have an image made for each one, with a link back to the EAP. People appreciate this.

The SharePoint Look Book is your new best friend

The actual design and layout is likely the toughest part of building your new home page. Most of us aren’t designers. It’s difficult to be given a blank canvas, various paints and some brushes and create a masterpiece.

To help stem the tide of bad SharePoint site designs, Microsoft recently rolled out the SharePoint Look Book. The Look Book is one of the best user-friendly guides Microsoft has ever published, if you ask me. We could have used a version of this over ten years ago.

The Look Book takes the OOTB tools and webparts provided in SharePoint Online and puts them together to provide legitimate inspiration on what can be done with an SPO site. And the results are outstanding. Some are truly beautifully executed internal websites.

Figure 3: The SharePoint Look Book compiles a number of example SPO sites and explains the features and webparts used to create it.

These examples were created by professional graphic and web designers, so you know taking inspiration and tips from this publication will do you well at your organization. Each example provides a listing of the features and webparts that were used, with links to documentation on how they work so you can implement them yourself.

The Look Book goes so far as to split up their examples into sections: intranet home pages (how appropriate!), Hub Sites, Communication Sites, and Team Sites.

Conclusion

Design is important, but it’s not the most important thing you have to do with your intranet home page. You have a number of resources out there to design your site in a way that’s more paint-by-number than paint from scratch. The SharePoint Look Book is something you need to start looking through so you get some ideas on how to execute on the content you spent so much time collecting. Another good resource (though it comes at a cost) is the Intranet Design Annual Report by Nielson Norman Group.

Now it’s time to execute and build out that site. Run it through testing, garner feedback, make some updates, and eventually you need to launch it! Once you’ve got it live, though, time doesn’t stand still. Ownership of your site is still critical to its success. In the next post of this series, I’ll talk about what it means to be a good intranet home page owner, how you should iterate and make it better over time, and how you can’t let the populace overtake your home page and wear it down into something worse than it started as.

***

Need help figuring out how to get your intranet home page design project organized? Check out part one and part two of Matt Wade’s series on Intranet Home Page Design!

GET ORGANIZED

Schedule your free demo!

Want to make your life much easier and work more effective? Yes! We’re more than happy to schedule a demo with you! Just contact us and we’ll get back to you.

We keep your information safe. Read more from our Privacy Policy.

Subscribe to our Newsletter

Get our news delivered right into your inbox. We won’t spam, promise!

We keep your information safe. Read more from our Privacy Policy.