Article
4 comments

Un-brand Office 365 Tenant-wide – A Design Showcase

In Office 365 there is a great mechanism that allows you to implement a corporate wide branding on the suite bar. The customer can apply their logo and their corporate colors there.
On Monday I thought to myself what if I can make the suite bar less distracting than it is. The solid black and blue combination draw a lot of attention on every load while browsing the various portals and applications.
I customized my suite bar in the admin center to have a white background with the logo in the center of the page. All content pages in Office 365 so the white background, I thought, will seamlessly integrate the ribbon on the page instead of standing out.

The base setup

In the admin center, I changed the global theme to the following settings.

Office 365 Theme Settings

After applying the theme settings to my tenant, the suite bar then changes to this design in the admin center.

Office 365 – Admin Center

It looked pretty good in the admin center but let’s check out the user experience as a new user.

Good Morning – John Doe

I created new user John Doe and signed in for the very first time. The first page for this user looks like this.

First logon experience

You might recognize there some small issues with the tiles on the page. The white icons on the light gray gradient background are hard to identify. Those changes when you hover over the images for the most, but it’s not the best color combination. The reason for this problem is that the icons use the background instead of the text color of the suite bar. The same tile behavior is present in the app launcher. When you the app launcher icons will be hovered some get a solid color background, while some of those get a white background.

App Launcher

Another tiny issue can is related to the notification icon on the suite bar. It is a general problem and not related to this branding. An alternate and great way to highlight those notifications might be to show the notification index based on the last announcement.

Office 365 – Notification

A general information might be colored in green, while less relevant information might are yellow. In the case of critical information, this might can be color in reading.

First Mail Experience

Let’s check out how Outlook looks with this kind of suite bar branding. To be honest, my first impression was that it looks pretty decent.

Office 365 – Outllook

Sad to say but I discovered some small issues again that was directly influenced by the suite bar branding. Again on some elements, the background color of the suite bar is assigned instead of the text color.
The same effect happens to the mail icon in the left bottom corner. The selected mail item vanishes on the background.
After some adjustments in the browser, I was able to fix those issues temporarily to see how the optimal result looks.

Office 365 – Outlook optimized

Besides, I introduced a small border below the suite bar to have a small but not distracting delimitation.

Calendar, Contacts, Tasks

After Outlook lets take a look at the other exchange components.

Office 365 – Calendar

From my perspective, it works pretty well, and the first look was on the important part, the events and not the bold suite bar.

Blank Contacts Page

 

Office 365 – Contacts with a contact

The contacts again have some small issues because some text elements again use the background and not the text color. In general, the design works here too.

Task View in Office 365

The task view looks pretty blank because of the same issues as previously mentioned. The colors on the user interface are directly affected by the background color of the suite bar. It makes it sometimes hard to work just in the browser.

Video Portal

Let us move away from the mail application and check how this suite bar affects the branding of the video portal.

Video Portal

The video portal looks a little bit blank in my case because I only added one video but their overall user interface works as expected. Even the detail view looks beautiful.

Video View in Video Portal

I think in this case the white suite bar and the white content work pretty well together.

OneDrive

OneDrive the tool to share and store documents. Again this works well with the white reduced suite bar.

Office 365 – OneDrive

My first experience when I accessed this site was that my eye wasn’t distracted by the suite bar anymore and focused directly on the content.
Also, it was easier to stay focused on the documents.

Newsfeed and Delve

First, let’s look at the old school Newsfeed and even there everything looks nice.

Office 365 – Newsfeed

When I switched over to Delve, I haven’t found any issue here too. For the following screenshot, I replaced the default image with a solid background color. I think this serves the overall design better than the predefined limited selection of stock photos.

Delve experience

The background color or an image makes a perfect separation between the navigational objects and the content.

SharePoint and the new Communication site

On classic pages especially with custom themes, there is still a small issue because the ribbon bar is colored to match the theme colors and not the suite bar.

Classic Sharepoint Experience

On a new communication site, for example, it looks way better. The suite bar matches the header, and it seems to be a single page instead of having the dominant suite bar. The eye is not distracted and focus directly on the content.

Communication Site

Even when you scroll down, you keep the focus on the content instead of being irritated by the suite bar.

Office 365 –
Communication Site scrolled

It makes the experience more pleasant even on the modern team sites.

Finally what else?

I think a white suite bar is a good option to move away from the Microsoft branding in any customer scenario. Even when the logo is colored, it is well visible.
While there still some theming and branding options are missing I think is a good compromise for now.
These small glitches and problems I recognized may solve in future.
I At least according to will keep my white suite bar because from my perspective the overall experience is better. I realized that I would stay in any case more focused while working on the different portals or develop and test solutions for customers.


Also published on Medium.

4 Comments

  1. I’ve been setting the background in the suite bar to white for a while now. It really does help focus on the content rather than that generally wasted strip across the top of the page. Thanks for the tour!

    M.

    Reply

    • Great tweak, I’ve tested it today it looks good but unfortunatly with the very last modern applauncher (first release only), the links to “All applications” and “new documents” arey completely greyed out

      Reply

  2. Great idea, it is far too overpowering with the default colours!

    Reply

  3. Nice as this would be, it breaks WCAG 2.0 AA & accessibility all over the place!

    Would be nice if your blog post had a disclaimer telling people not to deploy it until this stuff is fixed by MS 🙂

    Reply

Leave a Reply

Required fields are marked *.


This site uses Akismet to reduce spam. Learn how your comment data is processed.