Effective use of digital workplace applications such as SharePoint, Office, and Teams now requires more than technology rollouts. Along with superior UX and good UI, they also demand personalized, custom-built branding now. A combination of well thought through UX/UI encourages adoption at different levels and adds to the soft ROI in a huge way.

One can safely bet that a default UI can adversely impact employee experience (EX) and brand. Your employees may not refuse to use it directly but will revolt in a soft way by using the site/app in a ‘limited’ manner. This in turn jeopardizes what is often a significant investment in the site/app, as well as the core objective of building them is lost on the way.

Organizations need to think from a UI perspective to put more innovation in customizing the front-end of digital workplace applications and prove the importance of presenting a unified brand image. A better corporate branding has a close relation to business results and ROI. Every $1 invested in UX results in a return of $100. This results in a ROI of 9,900%.

Numerous studies have shown that there is a direct relationship existing between employee engagement and customer satisfaction. According to a Gallup poll, highly engaged teams can generate a 10 percent increase in customer ratings and a 20 percent increase in sales. Branding & personalized UI have a major contribution for creating an effective ‘culture of engagement’. The sense of belonging and ownership comes from a brand.

The ripple effect is but obvious, customers recommend others when your motivated employees deliver a differentiated high-value Customer Experience (CX). A simply problem-free or ‘works as expected’ CX simply does not cut it anymore. A solid brand goes a long way to gain more opportunities to scale your business and build a loyal customer base.

Corporate Brand Refresh from UI Perspective

Custom theming infuses your brand’s emotions into your apps. It enables you to rebrand apps for deeper ecosystem integration, highlight specific properties and utilities, and target different user groups in personalized ways.

Here are some cues that a custom theming/rebranding is due, and you should give it a serious thought:

• Packaged business applications with default UI proving a lame corporate branding experience

• Applications and mobile apps, built on older front-end technology, delivering poor UI experience

• Growing UI obstacles in the work environment, making it hard for employees to get work done

• A necessity for apps rebranding to improve org-level integration with other apps to avoid a disconnected experience

• Inconsistent brand identity for critical elements such as color, icons, images, typography and other UI assets

Refactoring your existing site/app

Let’s say you are sold on the idea of branding, and would like to refactor your existing site/app. How would you approach it? What are the key things that you should be cognizant about?

Before you start, you must first understand the experiences that lead to positive brand advocacy. Next, identify the custom UI factors that are highly relevant to your brand and to your consumer. Pinpoint the areas of value for few key custom theming scenarios. Here are some common guidelines for applying custom styles to in SharePoint, Office, and Teams apps:

• Branding UI Kit: Make consistent modifications to key HTML elements such as the site logo, navigation bar, text color, icons, hover link color, selected link color, etc.

• Custom Themes: Create additional color pallets beyond the defaults based on your organization’s brand and identity.

• Support Modes: There should be uniform support between the different modes like Dark, Light, and High Contrast modes. While switching between themes, your brand logo, text, color, icon, hover/focus and other UI elements must respond and render as per the brand guidelines and in an consistent manner.

• Customized Components: Customize out-of-the-box Alert, Button, Contextual Menu, Card, Dialog, Side Panel, and more to work across different themes, screen sizes, and support different scenarios.

• Multidevice and Multilingual: Ensure the overall UX/UI is consistent and visually appealing for multiple devices and has least amount of features disparity. That it has multilingual support and can transform seamlessly between the different screen sizes.

• Consistency and Scale: Create and use a design system to reuse components for consistently applying custom themes or designs to a new or an existing Site and App.

Theming Techniques for Microsoft Apps

Let us talk Apps, using Microsoft platform to be precise.

Microsoft uses Fluent UI and recommends the same to the users for building SharePoint, Office, and Teams Apps. Designed as flat as possible, these components can work across different use cases, themes, and screen sizes.

Fluent UI is a fully themeable component library. Theming is opt-in, allowing you to theme as much or as little as needed. Themes can be applied to your entire app, to specific subtrees, or to individual components. You can also nest and override themes.

Fluent UI supports four levels of theming. Following are the various levels along with sample code from Fluent UI documentation.

Default

You can start with this. This gives you a good understand of the various moving parts as well as a consistent theming experience for the various components. You just import some components and start using for the first-hand experience.

import React from 'react'
import { Button, Label, Provider, themes } from '@fluentui/react-northstar'
import { AddIcon, EmailIcon, EmojiIcon, CloseIcon } from '@fluentui/react-icons-northstar'

export default () => (
  <Provider theme={teamsTheme}>
    <Button content="Button" />
    <Button icon={<AddIcon />} iconOnly primary />
    <Button icon={<EmailIcon />} content="Send email" secondary />
    <EmojiIcon size="larger" />
    <Label content="Label with icon" icon={<CloseIcon />} />
  </Provider>
)

Component level styling

If you want to tweak or add a little bit of styling to specific component instance for your application, component-level styling is the way to go. Rest of the instances will behave as defined by the style, only this specific instance will behave differently. You can modify specific component’s styles or theme-defined variables. An example could be a conditional change or highlighting of color as shown in the example below.

import React from 'react'
import { Button } from '@fluentui/react-northstar'
import { EmailIcon } from '@fluentui/react-icons-northstar'

const styles = {
  color: 'coral',
  backgroundColor: 'coral',
  fontSize: '14px',
  padding: '0 10px',
}
const btnExample = () => (
  <Button
    content="Send email"
    icon={<EmailIcon styles={{ color: 'brown' }} />}
    secondary
    styles={styles}
  />
)

export default btnExample

Theme level styling 

This is the advanced level option to ensure more design consistency across the application. You can incorporate the more detailed level of changes to the complete suite of styles. While customizing the theme, you can change components styles at different levels and use a combination of one or more together.

• siteVariables:  For high-level, overarching generic changes like colors, font size etc. these are the best choice.

• componentVariables: These work at the component type level and apply to only those specific components. 

• componentStyles: These can come handy when precise and detailed changes are required which are not covered by the component variables from the respective theme.

import React from 'react'
import { Button, Label, Provider } from '@fluentui/react-northstar'
import { AddIcon, EmailIcon, EmojiIcon, CloseIcon } from '@fluentui/react-icons-northstar'

const theme = {
  siteVariables: {
    brand: 'darkred',
    brand04: '#8F5873',
    gray08: '#A8516E8C',
    gray06: '#f4c2c2',
    gray03: '#757575',
  },
  componentVariables: {
    Button: {
      height: '24px',
      minWidth: '24px',
      borderRadius: '8px',
      color: 'darkred',
      secondaryColor: '#ffffff',
      secondaryBorderColor: 'transparent',
      secondaryBackgroundColor: '#6699CC',
      secondaryBackgroundColorHover: '#91A3B0',
    },
  },
  componentStyles: {
    Button: {
      icon: {
        fontSize: '12px',
      },
    },
  },
}

const provider = () => (
  <Provider theme={theme}>
    <div>
      <Button content="Button" />
      <Button icon={<AddIcon />} iconOnly primary />
      <Button icon={<EmailIcon />} content="Send email" secondary />
      <EmojiIcon size="larger" />
      <Label content="Label with icon" icon={<CloseIcon />} />
    </div>
  </Provider>
)

export default provider

Nesting themes

This technique helps in case you have a need for multiple themes which need to be carried down to the next level with some minor exceptions. For e.g., while showing a list of items, you need to highlight a certain line item for some reason. This is based on React Providers and picks the closet provider and applies the styling accordingly. Example below shows how the buttons styling can be overridden in the nested themes.

<div>
  {/* Default theming */}
  <Header as="h3" content="Default theming" />
  <Button content="Button" />
  <Button icon={<AddIcon />} iconOnly primary />
  <Button icon={<EmailIcon />} content="Send email" secondary />
  <EmojiIcon size="larger" />
  <Label content="Label with icon" icon={<CloseIcon />} />

  {/* First nested theming */}
  <Provider
    theme={{
      componentVariables: {
        Button: {
          primaryBackgroundColor: 'darkred',
        },
      },
    }}
  >
    <div>
      <Header as="h3" content="First nested theming" />

      <Button content="Button" />
      <Button icon={<AddIcon />} iconOnly primary />
      <Button icon={<EmailIcon />} content="Send email" secondary />
      <EmojiIcon size="larger" />
      <Label content="Label with icon" icon={<CloseIcon />} />

      {/* Second nested theming */}
      <Provider
        theme={{
          componentStyles: {
            Button: {
              root: { color: 'goldenrod' },
            },
          },
        }}
      >
        <div>
          <Header as="h3" content="Second nested theming" />

          <Button content="Button" />
          <Button icon={<AddIcon />} iconOnly primary />
          <Button icon={<EmailIcon />} content="Send email" secondary />
          <EmojiIcon size="larger" />
          <Label content="Label with icon" icon={<CloseIcon />} />
        </div>
      </Provider>
    </div>
  </Provider>
</div>

The Conclusion 

Today’s workforce has been using applications with simple and intuitive UIs for a reasonably long time, and for a good reason. They now expect the same at the workplace as well. It is inevitable that they want clean, simple, smart, adaptive and intuitive UX & UI, AND it must have a unique and powerful brand of its own. Organizations need to listen to their employees and build working environment that cater to this need by adopting innovative trends and emerging modalities to deliver immersive UI, or shall we say distinguished brands.