⭐ More intuitive
⭐ Fixes pain point
⭐ More organized
🚀🚀 Post-launch, 95% of onboarding retailers were selecting the option to group products with multiple variants.
🤔🤔 Despite the success of the new setting among onboarded retailers, only 0.5% of existing users switched to group their products with multiple variants.
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.
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.
