Redesigning grid cells in Coles Promotion Manager

From a recent audit, the team were aware of accessibility issues in the Promotion Manager application. My remit at Coles was to address these issues. This case study focuses on redesigning grid cells.

Background  #

At Coles supermarkets, each week’s promotions are planned and managed behind the scenes in a spreadsheet-like desktop-designed web application.

Problem  #

In the application, grid cell backgrounds use a colour selection to convey the type of promotion. For example, cells that contain Flybuys promotions have a blue background colour.

The old design uses colour alone to convey information, a common data visualisation problem.

The old grid cell design fails two level A success criteria from the Web Content Accessibility Guidelines (WCAG).

  • 1.4.1 Use of Color 1
  • 1.1.1 Non-text content 2

Research insights #

User research helped me uncover design constraints and content ideas.

In Promotion Manager, promotion grid cells were 118 pixels wide. At the default 100% browser zoom, this shows about 8 weeks of data columns. A common user task is to copy a promotion from an earlier time to 10 or 12 weeks later. Rather than scrolling horizontally, interviews revealed that participants decreased browser zoom so they could see patterns in up to 15 columns at a glance.

Research observations of participants’ browser zoom settings.

Interviews also uncovered that participants recognised some cell background colours. Counter to a suggestion to discard the colours, participants valued the quick recognition of familiar background colours and expressed aversion to the idea of discarding them.

A third insight was the common vocabulary participants used when describing promotions. I added their terms to the custom vocabulary in Dovetail to improve transcription. Also, I documented the terms they use to describe promotion types for later use as content ideas.

Actionable takeaways #

The key takeaways from user research are:

  • Maintaining a similar grid cell width is important.
  • Retain the coloured backgrounds by redesigning grid cells with content that complements the colours.
  • Write initial documentation of promotion types and possible abbreviations based on discovered user vocabulary.

Solution #

To build empathy, I presented stakeholders with greyscale simulations of both the old and new grid designs. This helped to better understand frustrations with the old design and validate the redesigned grid cells.

The old design in greyscale shows the importance of not relying on colour alone.
The redesigned grid cells have abbreviations to identify the promotion type.

I inspected and analysed the existing grid cell anatomy before creating a bespoke atomic component. Then I created a variant for each colour and corresponding promotion type.

Initial grid cell component for a Flybuys promotion.

In redesigning grid cells, I added a pill with a 2- or 3-letter abbreviation of the promotion type. This is similar to the technique of a colour-coded schedule with icons. 3

The abbreviations and their corresponding expanded terms employ documented vocabulary discovered during user research.

Using design annotations to communicate a requirement to expand the abbreviation for assistive technology users.

My design adds visually hidden text that expands the abbreviation for assistive technology users. Also, on click interaction with a grid cell, the expanded term is now shown in a sidebar for all users.

The sidebar design replays the grid cell and expands the abbreviation.

Results #

Adding text content to each promotion cell conveys the meaning in a complementary manner. The abbreviation content is expanded in full for screen reader users, and visually shown when Promo info is opened in a sidebar drawer.

Redesigned grid cells use both colour and abbreviations to identify promotion types.

The new design of grid cells retained background colours, and increased cell width by only 6 pixels, 5%.

The left alignment of the abbreviation and other content further improves the readability and visual scanability of cell contents.

Follow-up sessions with users validated the new grid cell design and helped further iterate on the abbreviations content.

Footnotes #

  1. Understanding SC 1.4.1 Use of Color (Level A) ↩︎
  2. Understanding the intent of SC 1.1.1 Non-text Content (Level A) ↩︎
  3. A color-coded schedule with icons in Technique G14: Ensuring that information conveyed by color difference is also available in text ↩︎