Intelligent Commerce
Matching Offers to Shoppers
As part of a small team, I designed a Commerce as a Service (CaaS) platform that uses AI and ML to dynamically segment customers into look-alike groups, and then test various offers against each cohort in order to deliver the most optimal offer to each individual customer.
My Role
platform: Web App, B2B, eCommerce
As the lead designer, I oversaw the entire project. I facilitated brainstorming sessions with team leads and stakeholders to generate ideas. I conducted user research to define feature and user requirements. I created wireframes, prototypes and tested designs with users. I also led a designer in developing the design system for Intelligent Commerce.
Project Goals
This project was experimental and the main goal was to create a product that would shift Nogin from an e-commerce agency space to a CaaS space. In order to achieve this, we needed to prove:
Could we use ML to segment a brand’s customers into cohorts that make sense for them?
Could we build a rules engine that could make custom offers (defined inputs and dynamic outputs)?
Could we test the offers against the cohorts and show the best results?
Would clients understand the data?
Research & Discovery
The initial thoughts around this project and what it could be came together during a leadership offsite where everyone put ideas onto the table.
After the offsite, I interviewed Brand Managers (folks who help brands manage their eCommerce sites), both internal and potential customers, to understand what some of their frustrations around marketing and running their stores.
We quickly identified that there was a big gap in understanding how different types of customers or shoppers respond to different offers (like 20% off shirts vs BOGO shirts), as well as the frustration around not being able to combine offers and discounts in the Shopify ecosystem.
We began to formulate how this product would need to utilize “smart promos” and a dynamic web theme to target shoppers individually.
We decided to build a tool that would automatically serve different content to shoppers based on their cohort. The content could be different discount offers, different messaging, different content, and different layouts of the site.
Design - User Experience & Visual Design
We decided to keep the UI very friendly since our target market was people trying to run stores, not technical users. Nogin had gone through a big rebrand the year that we started this project, and it was important for us to keep the bright bold colors that were in brand.
This project moved fast, so we started with pen and paper sketches, quickly digitizing them, and then we tested different visual design treatments of objects before landing on the final versions.
The app was designed for non-technical Brand Managers: we went with a friendly bright UI that walked them through setting up the rules for their offer tests.
We learned from feedback that the Brand Managers loved that the system auto-ran tests, but they also wanted to be able to dive deeper into the details of their orders, customers, segments, and offers. So we designed dashboards for each section that showed high level info, and then they could expose more data as desired.
Rules Engine
We wanted to give control to the brand managers to create the offers that had built in rules about who to target and would dynamically update the store’s UI for the shopper’s experience.
We decided to implement a drag-and-drop interface and controls that would allow designers and brand managers to create dynamic layouts with no required dev-experience.
I used wireframes to show the main sections of the offer builder page, and what types of interactions could occur within each section.
By the time we got to the comps, the dynamic content section was more thought out, and we better understood the controls needed.
In testing, I found some users wanted more granular detail of their dynamic content, so I designed a full-page editor mode where they could control all the CSS they wanted.
Scorecards are Hard
We iterated to find the best way to show offer scoring for different customer segments. The main challenge is that brand managers prioritize different metrics based on the offer type. AOV, cost of shipping, and net revenue are all factors they consider.
Ultimately, we decided to allow users to choose their most important metric and display the data accordingly in different sections of the app.
For example, on an offer page, a user can focus on the performance of a single offer across all segments. On the Segment page, they can view how all offers performed within one segment.
Implementation & Development
We found ourselves butting heads with the C-level stakeholder on what we could deliver and how quickly. After much back and forth, we decided to pitch him three different plans that he could choose from. The first plan was our recommendation (what we felt we could reasonably deliver within 4-6 months), the second was faster but gave up some features, and the third plan took the longest but incorporated features that our customer-base was clamoring for.
Ultimately, we went with Plan A, and the product has launched!
You can read about it here.