Non-stop design @ Sauce AI

〰️

Non-stop design @ Sauce AI 〰️

What is Sauce AI? An AI product that analyses customer feedback across all teams, analysing 1000s of pieces of data each minute. Providing real-time insights personalised to each individual in an Org.

The problem: I was hired at Sauce to help them launch their BETA product, drive design strategy, test and improve the product experience, and develop a design system of UI components. When I joined Sauce, the product was nearly impossible to use. Inconsistent terminology coupled with half-baked features added fuel to the fire.

This feature expressed a rationale for why a keyword (like "pricing") might be trending if frequently mentioned by customers. Helping PMs understand which were the largest "root causes" for spikes in pricing and where that feedback originated.
Sauce's chat function was the synthesis of all functionality we had developed over the last 12 months. Ask any question about your customer feedback, and Sauce would provide actionable insights, and analytics.
As an experiment, we designed, developed, and tested a visual map of all feedback. That was presented spatially based on relationships across "AI-embeddings" from similarity scores determined by AI.
PMs and UX researchers could perform any keyword search and pin this to their sidebar, allowing them to easily switch between customer feedback from "Pricing issues" to "Onboarding issues", with customers impacted clearly visible.
Leveraging Figma's system of variables, we developed a dark mode for the entire component library. Which was replicated by the developers in 48 hours with elegant overrides and props for added flexibility in areas where the UI was dense.
So much of the product that I designed was recycled into imagery that was used to explain "how it worked" — which was packaged into an onboarding experience. Helping users understand the power of Sauce AI, and how certain concepts like "Search" differ slightly from other tools.

The outcome -> Design and usability played a critical role in enabling the team at Sauce to go from $0 to over US$522K ARR in less than 6 months. With key customers such as Atlassian, Whatnot, Linktree, and ZIP Money. Having all customer feedback analysed by Sauce AI. This meant hundreds of thousands of pieces of customer feedback from Zendesk, Surveys, Intercom, Slack messages… all being analysed live — by Sauce AI.

The design system: That we nicknamed “Pasta”, as it included all ingredients to make Sauce AI. Even as a small team, this ended up being once of my most comprehensive design systems. With complex “And-Or” filters, stock-like graphs, dark mode, and an entire feedback map.

This image is just a snapshot of the components and states required for the massive functionality that search was composed of. Users could detail which keywords they wanted to search, what to exclude, and to which level of similarity. Ultimately training the AI to only find feedback relevant to a PM's problem area.
Sauce AI's colour system stemmed from its brand into a pragmatic, usable system, with dark-mode variables. Laid out loosely as it was an ever-evolving system. We made refinements often. And received praise as Users felt the UX gracefully refine over time.
Lists in tables are deceptively complex. Min-max widths that appreciate common data lengths, null-data states, sortable columns, feature iterations as customers demand specific columns for x, y, and z. But most importantly, components require explanations for developers. Not just a component sheet.
Sauce's UI window included a LHS sidebar (Like Notion) that pushed the UI in when visible. It also included a RHS drawer that overlapped the UI, allowing users to multitask. Establishing pane and window behaviour upfront is critical in product growth and scalability over time. It's not always easy to tack these constructs on after the fact.
This is often what component pages look like as I iterate through a product solution. It's messy. Things are all over the place as you figure out what works, what doesn't — and gather feedback from collaborators.
A component for an $expandable-reasoning-card. This card was comprised of components like tabs, a collapsable bar chart, our stocks-like recency line chart, buttons, and type elements. It was supported in dark-mode and featured on the entry screen of the product.

Product explainers: On top of product iterations for 4+ engineering streams, Matt Hinds (CEO) was flying back and forth from San Francisco every few months selling the product to tech giants like Atlassian and Linktree. Weekly product explainers, marketing materials and assets for podcasts were often requested.

Assets for help centre categories like: 1) Anyone can self-serve customer feedback insights. 2) How to train Sauce AI. 3) Understanding how automated highlights works. 4) How to connect live sources of customer feedback from Gong, Slack channels, and more.
Detailed animated gifs that help users understand how to include and exclude feedback that matters most. Reducing unwanted noise when gathering product insights.
As Matt Hinds (CEO @Sauce AI) expanded his online presence and relationships with other tech companies, he developed a podcast and videos that required assets wrapped in Sauce's brand.
Like many startups, we used intercom's email-system for weekly product updates. Things like "Sauce now auto-highlights praise" — Not just customer pain-points. Helping you know what is working well and what isn't.
These were 2 of 50 different LinkedIn assets that I usually threw together in a matter of minutes while James Gabb (CPO @Sauce AI) exported them from Figma and posted them moments after. They aren't much, but they did the job. That was very much the mentality of marketing at Sauce.

The marketing site: Was relentlessly refined. And went through two major interations. One overhaul within the first 2 months when I joined. And another 8 months later in preparation for a Webflow rebuild which was developed by 224 industries.

The redesign was tighter. Inheriting learnings from before. Our customers didn't need to be huge. They were well known. The product had distinct feature-areas like "Discover what's trending" or "track a new problem". And our enterprise sales approach meant we wanted to encourage booking a demo over organic sign ups.
The blog was elegantly designed. Housing experiences from San Francisco, developer insights, team retreats, and podcasts with tech companies like Webflow, Carta, Linktree, Atlassian, and Linear.
A vertical slice of element styles that I provided 224 industries for the website build.
A sample of the blog page so that we could see how all the styles would come together. We nicknamed the blog section of the site "Sauce Cookbook".
The site footer with clickable elements that took users to those respective feature sets.

Non-stop design @ Sauce AI

〰️

Non-stop design @ Sauce AI 〰️ Non-stop design @ Sauce AI 〰️

What is Sauce AI? An AI product that analyses customer feedback across all teams, analysing 1000s of pieces of data each minute. Providing real-time insights personalised to each individual in an Org.

This feature expressed a rationale for why a keyword (like "pricing") might be trending if frequently mentioned by customers. Helping PMs understand which were the largest "root causes" for spikes in pricing and where that feedback originated.

Sauce's chat function was the synthesis of all functionality we had developed over the last 12 months. Ask any question about your customer feedback, and Sauce would provide actionable insights, and analytics.

As an experiment, we designed, developed, and tested a visual map of all feedback. That was presented spatially based on relationships across "AI-embeddings" from similarity scores determined by AI.

PMs and UX researchers could perform any keyword search and pin this to their sidebar, allowing them to easily switch between customer feedback from "Pricing issues" to "Onboarding issues", with customers impacted clearly visible.

Leveraging Figma's system of variables, we developed a dark mode for the entire component library. Which was replicated by the developers in 48 hours with elegant overrides and props for added flexibility in areas where the UI was dense.

So much of the product that I designed was recycled into imagery that was used to explain "how it worked" — which was packaged into an onboarding experience. Helping users understand the power of Sauce AI, and how certain concepts like "Search" differ slightly from other tools.

The design system: That we nicknamed “Pasta”, as it included all ingredients to make Sauce AI. Even as a small team, this ended up being once of my most comprehensive design systems. With complex “And-Or” filters, stock-like graphs, dark mode, and an entire feedback map.

Sauce AI's colour system stemmed from its brand into a pragmatic, usable system, with dark-mode variables. Laid out loosely as it was an ever-evolving system. We made refinements often. And received praise as Users felt the UX gracefully refine over time.

Lists in tables are deceptively complex. Min-max widths that appreciate common data lengths, null-data states, sortable columns, feature iterations as customers demand specific columns for x, y, and z. But most importantly, components require explanations for developers. Not just a component sheet.

This is often what component pages look like as I iterate through a product solution. It's messy. Things are all over the place as you figure out what works, what doesn't — and gather feedback from collaborators.

A component for an $expandable-reasoning-card. This card was comprised of components like tabs, a collapsable bar chart, our stocks-like recency line chart, buttons, and type elements. It was supported in dark-mode and featured on the entry screen of the product.

Assets for help centre categories like: 1) Anyone can self-serve customer feedback insights. 2) How to train Sauce AI. 3) Understanding how automated highlights works. 4) How to connect live sources of customer feedback from Gong, Slack channels, and more.

Detailed animated gifs that help users understand how to include and exclude feedback that matters most. Reducing unwanted noise when gathering product insights.

As Matt Hinds (CEO @Sauce AI) expanded his online presence and relationships with other tech companies, he developed a podcast and videos that required assets wrapped in Sauce's brand.

Like many startups, we used intercom's email-system for weekly product updates. Things like "Sauce now auto-highlights praise" — Not just customer pain-points. Helping you know what is working well and what isn't.

These were 2 of 50 different LinkedIn assets that I usually threw together in a matter of minutes while James Gabb (CPO @Sauce AI) exported them from Figma and posted them moments after. They aren't much, but they did the job. That was very much the mentality of marketing at Sauce.

The marketing site: Was relentlessly refined. And went through two major interations. One overhaul within the first 2 months when I joined. And another 8 months later in preparation for a Webflow rebuild which was developed by 224 industries.

The blog was elegantly designed. Housing experiences from San Francisco, developer insights, team retreats, and podcasts with tech companies like Webflow, Carta, Linktree, Atlassian, and Linear.

A vertical slice of element styles that I provided 224 industries for the website build.

A sample of the blog page so that we could see how all the styles would come together. We nicknamed the blog section of the site "Sauce Cookbook".

The site footer with clickable elements that took users to those respective feature sets.

Vouch

Non-stop design @ Sauce AI 〰️