Notifying retailers

Notifying Faire retailers about new settings and features

Role

Product design co-op

Team

🎨 2 Designers
💼 1 Product Manager

Timeline

Sept - Oct 2023

Platforms

Desktop

Mobile

Project goal:

Developing a notification system to inform retailers about updates and new features in the point-of-sale integration flows to allow retailers to take full advantage and benefit from the enhanced experience.

Context

Faire released a new feature for retailers integrating with their point-of-sale, allowing them to group products under one listing rather than having them show up as individual products.

⭐ More intuitive

⭐ Fixes pain point

⭐ More organized

This change was surfaced as a setting where retailers could decide how they wanted products with variants to appear in onboarding.

🚀🚀 Post-launch, 95% of onboarding retailers were selecting the option to group products with multiple variants.

However, for retailers that were already onboarded, this setting would need to be updated in the integrations settings page. While this was an easy task, existing retailers were unaware of this added setting and unlikely to discover it due to the small amount of traffic on the settings page.

🤔🤔 Despite the success of the new setting among onboarded retailers, only 0.5% of existing users switched to group their products with multiple variants.

OVERALL USER MINDSET

As a retailer I want to know when there are updated features that might help me save time or make better decisions.

The proposed solution to address this issue was to introduce notifications to inform retailers of multi-variant support so that they could take advantage of this new setting and better their integration experience. In doing so, the key goals were as follows:

1. Inform retailers of the ability to group multi-variant products under one listing

2. Allow retailers to quickly adopt this new functionality

3. Scale solution for future use cases

Early explorations

I began the design process with mid-fi explorations that adapted existing notification UX patterns to understand what might work for this context. The purpose of these explorations was to determine the following decisions:

Lightweight vs Heavyweight UI
Redirecting to settings vs. Making changes directly
Informing vs Encouraging action

After exploring a range of different UI and evaluating each option against the project goals, we decided to include a combination of a modal and badge for notifying retailers based on the context. While the modal UI was heavy-weight, we believed that given the high percentage of retailers opting in for multi-variant support in onboarding, it was extremely important to notify integrated retailers of the option to switch to this functionality. However, given the invasive nature of a modal, we knew that many retailers might quickly dismiss it if in the middle of another flow and wanted to include the badge as a lightweight reminder until the change was acknowledged. With the decision of varying UI based on retailer response, I developed the logic for notifications to assist with mapping out designs and engineering communications. This logic is illustrated in the diagram below.

Developing the modal content

Once the direction for the notifications UI was finalized, I began exploring copy versions that would both inform retailers about the new settings, while ensuring clarity and trying to be as lightweight as possible. The first decision to be made was whether the notification modal should focus on informing retailers about the new settings or encourage a setting change, and whether there should be a bias towards enabling the new group multi-variant functionality.

After exploring a range of options and discussing with other designers on the team, we decided on using radio buttons within the modal. This would allow for a simple unbiased decision to be made by the user, without requiring them to go to a separate page. The radio button UI also allowed for a clear distinction to be made between the user experience when the setting was set to "group" versus "split", allowing for an informed decision to be made. This also matched the current UI for the settings page keeping it streamlined and clear. We also decided to include a tertiary CTA below the primary one that would direct retailers to their settings page so that they could update it there.

Once the content structure was finalized, I explored a few options for what the copy could look like. We ultimately landed on the starred option to maintain consistency with the copy used in onboarding while also keeping the content concise. The question format allowed for the emphasis on how the setting might work, and worked best with the radio buttons to give retailers a clear depiction of the new functionality.

Mobile explorations

Once the desktop version of the notification modal was finalized, I began exploring versions that could be translated to mobile. However, I quickly realized that the mobile experience would need to be slightly different from desktop, given the smaller screen size and tap targets. This lead to the decision to remove radio buttons on mobile and simply give retailers the option to navigate to settings, where they would then see the new setting with radio buttons to then update if desired. This showed the importance of designing for the surface, as blindly copying over the web designs onto mobile would have resulted in a content heavy and overwhelming modal that would not have conveyed the key message as clearly.

Final designs

Web modal notification - appears when retailer first navigates to a POS-related page

Additional notifications on web - surfaced if modal dismissed

Mobile notifications

How I shared my work with engineering :)

+ How I shared my work with leadership :)

Thanks for reading :)

I'm always looking for my next design challenge — let’s connect!