Loblaw Digital

Creating a component to increase the efficiency of an internal personalization platform at Loblaw Digital.

Role

Associate Product Designer

Timeline

2 weeks

Team

Senior Designer, Product Manager, Development Team

In Jan 2024, I joined the personalization team at Loblaw Digital (LD). Our team built an internal platform that enabled our colleagues to create personalized campaigns for 1M+ customers across Canada.

Background

A personalized campaign generates unique content to different audience segments.

What is a personalized campaign?

A personalized campaign can generate unique on-site content to different audience segments

User Goals

Our users were colleagues at LD who authored personalized campaigns, such as colleagues on our digital merchandising and marketing teams.

Who were our users?

A key step in authoring personalized campaigns was to assign audience segments to personalized content.

What did our users need to do?

A strategic priority for the business was colleague efficiency. Colleagues need to curate personalized content for multiple audience segments, which is tedious if not efficient.

Business goals

When assigning audience segments to personalized content, our current experience was not efficient:

  • No findability – Users have to find the correct audience segment in a mega-dropdown of audience segments

  • Audience segments were difficult to parse – Segments like “P13N_Demo_Vegan” and “P13N_BakingEnthusiast_MVP2023” were not intuitive and difficult to parse

Problem

The current experience – a mega-dropdown of audience segments that were difficult to parse

How might we make it easier and faster for colleagues to assign the correct audience segment to personalized content so that authoring personalized campaigns is efficient?

Design goal

  1. I needed a quick solution – We did not have the capacity to build a robust search engine

  2. I could not rename the audience segments – Naming conventions were standardized across multiple lines of business within the organization

Constraints

Research

My product manager asked a colleague to outline her workflow assigning audience segments to personalized content.

Workflow analysis

Slack response from a colleague outlining her workflow

I summarized her response in a diagram that illustrates how she extracts keywords from the content build plan to find the matching audience segments in the dropdown.

(click diagram to expand)

  1. Users use a content build plan to assign audiences for each campaign

  2. Audience segments in the content build plan are listed as keywords

  3. Users extract keywords from the content build plan to find the matching audience segments in the dropdown. E.g. The build plan might refer to a “Vegan” segment, but the user must find “P13N_Demo_Vegan” in the dropdown

Key insights

I designed and shipped a typeahead search component. Colleagues search for keywords to filter items, reducing the number of audience segments in the dropdown from ~50 to ~10 relevant segments per search.

Outcome

Screen recording of the component in production

  • The component was built in the following sprint and is currently used in production

  • The component is currently reused 3X in production within our personalization platform to solve similar findability problems

Other outcomes

Design Considerations

When designing interactions for this component, there were several decisions I made based on the needs of our colleagues. These I all validated as feasible with the development team.

Show all segments in the dropdown by default

  • We asked our colleagues how many segments they wanted to see in the dropdown by default

  • Colleagues wanted to see all segments in the dropdown by default

  • They said: “If I immediately see the audience segment I need in the dropdown, I can just click on it there.”

Segments must be listed in alphabetical order

  • The current experience listed segments in alphabetical order

  • The said: “The audiences are listed in alphabetical order, which is helpful in finding what we need right now”

  • It was a mental model they had become familiar with

All segments are shown by default in alphabetical order

  • Audience segments were a mix of upper and lowercase characters

  • Users should not have to remember which characters in a keyword are upper or lowercase.

Results cannot be case-sensitive

  • Audience segments contained random numerical prefixes

  • Users should not have to remember these prefixes to obtain a result

  • Audience segments were sometimes conjoined by camelCase

  • Users should not have to remember what keywords were conjoined to obtain a result

Results should be parsable from anywhere, even if conjoined

  • Makes it easier for the user to parse each audience segment

  • Provides the user with visual and dynamic feedback from their inputs

Bold substrings of the result that match the user input

Results were case-insensitive and could be parsed from anywhere. Substrings of the result that matched were bolded.

The design considerations helped specify the interactions for this component, which I outlined in a document for handoff.

Interaction design + handoff

(click diagram to expand)

Learnings

When I received the design requirements from my PM, I assumed my task was to simply create the component. As it turns out, there was more to consider. How many items should we show on default? What order should the items be in? Small details such as being able to parse a keyword from anywhere within the segment compound to effect the usability of the final component.

The details matter

The design process of creating a simple component

Intuitively, I think about designing a component as an exercise in visual and interaction design. For example, if I am designing a button for a design system, I don’t really think about interviewing a user or doing any kind of task analysis. However, creating a diagram to understand how colleagues assign audience segments to personalized content impacted the design choices I made.