Saasquatch
Revamping our visual editor
Redesigned and improved the widget editing experience in our admin portal.
Redesigned and improved the widget editing experience in our admin portal.
SaaSquatch is a loyalty and referral software built for tech companies. The main touchpoint between our client's participants and the programs our clients set up are the loyalty and referral widgets embedded into their app or website.
As the rest of the platform grew in functionality and flexibility, our widget editor fell behind. Unfortunately, the editor offered limited editability, brand customization, and was not geared towards our primary users, marketers.
Our goal was simple, albeit lofty: Help marketers easily build and customize an embedded widget for two or more programs.
My role
Lead product designer
Duration
3 months
Teammates
Derek Siemens, Sam Beveridge, Zach Harrison, Siqi Li, Noah Clarke, Lucy Cao, and Ian Hitchcock
Given the tight deadline for such a large project, I decided to run a design sprint with developers and project managers to gather ideas and solutions as quickly as possible.
Discover and define
We held a group conversation with the product manager to understand the long term goal, risks and assumptions, and establish guiding HMW questions.
Research
I looked at how our competitors, other website builders and email editors were approaching this issue, and presented them to my design sprint team.
Ideate
I ran crazy 8 and sketching sessions for rapid ideation. We cycled between voting and iterating on the best ideas and ran two sticker sessions with key stakeholders to select the solution to move on with.
Test
With a rough solution chosen, I made a block level prototype and used remote user testing to validate if our solution solved our motivating use cases.
Design sprint materials: research findings, HMW exercise, and initial block level wireframes
Between the initial design sprint and the final result, there were numerous rounds of design review, playtesting, usability testing, updates to the designs, updates to the copy, and constant communication with the project manager and developers.
By the end of the three months, we had a visual builder that:
gave our users the ability to carry out their brand's visual identity by adding their brand font and colour.
provided our users with a variety of default templates for different types of programs.
remained developer friendly with a built-in HTML editor.
And most importantly, our visual builder accomplished the simple and lofty goal we had originally set out to achieve: Help marketers easily build and customize an embedded widget for two or more programs.
