Title
Description
Overview
UX design
impact.com
3 months
SaaSquatch is a loyalty and referral platform that allows tech companies to launch embedded customer programs via customizable widgets. As the platform evolved, our widget editor lagged behind — especially in flexibility and user experience.
Our goal was to empower marketers — our primary user group — to independently build and customize branded widgets across multiple loyalty programs, without technical support or manual HTML editing.
Problem
After analyzing support tickets, stakeholder interviews, and marketer feedback, we identified four major user pain points:
Lack of visual styling options
Advanced users had no visual way to apply brand styles, forcing them to edit raw HTML/CSS offline — a frustrating, error-prone workaround.
Rigid templates
The editor offered only one default layout, which didn’t meet the visual or structural needs of different customer programs.
Limited layout control
Users couldn’t move, add, or remove components — critical for customizing the flow of a widget.
Hidden editing tools
Content editing required access to an internal page or developer help, making self-serve updates nearly impossible.
The Process
Discovery & Research
Held stakeholder alignment sessions to define project scope, risks, and assumptions.
Audited competing tools to identify UX patterns in no-code builders and what made them effective for non-technical users
Design Sprint
Ran a week-long cross-functional design sprint with engineers and PMs to accelerate idea generation.
Facilitated Crazy 8s and sketching exercises to explore layout, editing flow, and theming interactions.
Conducted internal voting and critique sessions to prioritize the most viable and impactful ideas.
Prototyping & Testing
Built a high-fidelity, block-level prototype mimicking real user scenarios.
Conducted moderated usability testing with 6 marketing users to evaluate ease of editing, layout control, and theming features.
Iterated on layout logic, interaction feedback, and branding controls based on user insights (e.g., simplifying the way color schemes and fonts were applied).
Design sprint materials: research findings, HMW exercise, and initial block level wireframes
The Outcome
After one month of collaboration, iteration, and testing, we launched a new visual editor that dramatically improved both usability and flexibility:
Self-serve customization
Marketers could now build and style widgets without developer support, reducing time-to-launch for programs
Flexible layouts
Users could add, move, and remove components with a simple drag-and-drop interface
Visual branding tools
Integrated brand font and color pickers allowed users to match their widget to their company’s identity.
HTML/CSS access for advanced users
Maintained developer friendliness by embedding a live code editor for those needing deeper control.
Impact
Marketers reported increased confidence using the editor without technical help — even those who had previously relied on our support team. Users embraced the improved branding controls, creating on-brand widgets that felt seamlessly integrated with their products and elevated customer trust.
