Microsoft

CRM Redesign | UI Accessibility

Apr 2017 - Jan 2018

Outsourced via Cognizant, Bangalore

In the enterprise world, CRM acts as a backbone in running the business — from sales, marketing to customer service. With the advent of distributed computing, ML & AI. The focus has moved to how devices & apps can make the life of the user more productive by understanding the users context. Every process in a business is being digitized at an ever increasing rate. This rapid shift means customers are looking to move away from monolithic suites that perpetuate disconnected data silos and expensive custom extensibility frameworks to realtime contextual applications which serves the role & job at hand.

Need for the Redesign

Earlier, upon purchasing the CRM suite, enterprises used to employ CRM Experts (trained professionals) to design and operate the platform to solve the enterprise needs. The end-users(Customer care representatives for instance) could not even manage or edit their viewer. It was complex and cumbersome for an average user.

Because of its highly customizable nature, the suite presented every application with a huge number of options in the form of a huge sitemap with nested doll architecture of information.

Using multiple applications is a very common use-case on the platform and that would multiply the usability concerns as panes overlap on each other and some fill the entire screen.

Thus, platform redesign which simplifies the structure and boosts the usability of the suite was imperative to change this scenario.

Platform Redesign Principles
What you see is what you get
Clarity of Information
Modular Design
Scalability to Complex Scenarios

Microsoft’s UI Accessibility Guidelines

Microsoft strictly adheres to the WCAG Compliances for Accessibility which not only enables the interface/product to be accessed by the physically challenged but makes the product much more usable and reliable for every user.

Contrast Ratio

Contrast of a foreground object with respect to background color ranges from 1:1 to 21:1. For making a foreground object legible at the AA level, WCAG recommends:

AA — 7:1 Minimum Contrast Ratio for Small Sized Text (<16px)

AA — 4.5:1 Minimum Contrast Ratio for Normal Sized Text (16 to 21px)

AA — 3:1 Minimum Contrast Ratio for Large Sized Text (≥24px)

AA — 3:1 Minimum Contrast Ratio for Graphic Elements on the UI

Microsoft strictly employs ‘em/rem’ usage for font sizes with a base size of 16px. 0.75em is the smallest font size restricted to be used in Regular styling reserved for rare occurrences. Typical font sizes are 12px, 14px, 16px, ~18px, 20px, 24px, 32px, 36px, 40px which translate from 0.75em to 2.5em.

High Contrast Black

While Contrast Ratio guidelines ensure the legibility of web elements to an average user in the normal mode, that doesn’t serve the users with severe visual impairments. Visually challenged users rely on HCB theme with their own custom color choice. Not many estates on the web stand a chance when the color mode is changed to HCB. Microsoft’s CRM stands out by specifically catering to its requirements.

Cheat Code: Create border for UI elements such as filled buttons with same color as that of background color. This supports HCB without disrupting the normal mode.

Categorization — Multi Styling

In order to differentiate elements one from the other (for instance, selected tab option from the rest) rely on more than one stylings depicting the difference. Typical options are shape, color, pattern, size, font style, border.

Right to Left Support (Bidirectionality)

Global products have user base around the globe demanding native language usage support. In that, RTL Language Support for is quite challenging where users. Mirroring layout is the usual strategy to achieve it for which it is to be taken into consideration at the early stages of designing — while forming the layout itself.

Cheat Code: While designing layout, avoid multiple elements in a row (equivalent to multiple data entries in one specific HTML ‘td’ tag). Keep equal padding and margin for all elements on both sides, even though it might seem unnecessary in the LTR version. They don’t invert in RTL mirroring.

Keyboard accessibility (Tab Order)

Keyboard alone operationality is supported in Microsoft’s CRM platform. When the normal interface reading flow of the user of a web page is mapped with the HTML skeleton in the background, Tab Order will be alignment, that is to say that upon pressing ‘Tab’ key, user won’t jump to a random section within the page.

Labels for narration

The experience of surfing on web changes drastically when a user has to navigate through voice over assistants. In order to support it, every tappable and focus-able element on the interface should be assigned a proper understandable label so that user is able to make sense of it or it’s purpose on the page.

Zoom support

200% Zoom on the browser should typically be supported by the interface throughout the product. This means that each pane in a view should dynamically reorganize content so that horizontal scroll does not appear till 2× zoom.