USERLANE
Designing the Editor for scale
A redesign, 3 content types on one pattern library, and Userlane's first AI capability. đď¸
Userlane · Senior Product Designer · 2020 to 2023 Design systems · Pattern library · Editor design · B2B SaaS
32%
drop in Jira tickets tagged usability after the pattern library shipped
93%
of tested customers rated the new Editor intuitive, helpful, and efficient
30+
features introduced and redesigned in the Editor during my 3 years
3
content types shipped on the same pattern library: Guides, Tooltips, Tags
CONTEXT
Userlane's mission was making SaaS software usable without training. My squad's job was the Editor: what content creators use to build the content types. đ§
-
Userlane is a digital adoption platform: in-app guides, tooltips, and analytics so anyone can use SaaS without formal training.
-
As the Product team grew, we organised into 4 squads: Learn (Analytics), Engage (Editor), Connect (Integrations), and Core (ecosystem maintenance).
-
The Engage squad's remit was 3 surfaces: the Editor (where content creators build guides), the browser extension (delivery mechanism for the Editor), and the Assistant (the in-app companion end users interact with). My design work concentrated on the Editor and the pattern library that supported it.
CHALLENGE
While refactoring to the latest tech, what did it take to ship multiple content types so each one cost less to build than the last? đď¸
-
When I joined, the Editor was a bottom-aligned browser-extension panel hosting one content type: Guides. Engineering had started refactoring from Java to React.
-
The architectural direction was set: turn the Editor into a host for multiple content types. Tooltips was first. Tags would follow. The pattern library was the deliverable, with the redesign as its vehicle.
-
Each content type had its own settings, empty states, and search behaviour. Under all of them, the shared question: can each new content type inherit from the last, so the second one costs less than the first, and the third less than the second?
WHAT I ACHIEVED
Authored the Editor pattern library and components library, shipped 3 content types on it, and delivered Userlane's first AI capability on top. đ
-
Authored the Editor components library, patterns library and contributed to Userlane's shared design system, Burrito, documented on Supernova (text-overflow example).
-
Shipped Tooltips as a deliberately minimal MVP. Let its lessons inform Tags via the shared pattern library, so the second content type cost less to build than the first.
-
Shipped Tags on the pattern library with faster runway. Inherited the selector, segment, and publishing improvements made during Tooltips' lifecycle.
-
Shipped Userlane's first AI capability, auto-translation, in July 2023. Designed the modal, notification model, edge cases, and glossary concept with my squad, using the feature as a system test for the pattern library.
DESIGN PROCESS
Design process: cut to 12 moves that shaped the editor. đŻ
Discovery
-
Interviewed Co-founders, VP of Product, Sales & customer success alongside customers. Design input from the people making tradeoff calls.
-
Held 3 creator personas inside one Editor design: Digital Transformation Manager, Trainer, IT Specialist. Traded feature-per-persona optimization for a coherent surface.
-
Chose creation over publishing and maintenance as the redesign focus. Highest business impact for Userlane's stage.
Testing
-
Ran moderated tests with 10+ customers on prototype flows for Hints and Tooltips. Unmoderated via UserTesting Pool for scale (15 external testers on the NPS concept, Aug to Oct 2022). Depth from moderated, scale from unmoderated.
-
Tested inside real production apps our customers used: SAP, Coupa, Salesforce, and self-built enterprise tools. Findings that repeated across apps became must-haves; findings unique to one app went to nice-to-have.
-
5-tier severity plus a Must Have / Important / Nice To Have prioritisation layer on every test. Lovable, Valuable, Serious, Minor, Critical, Idea. Cut re-litigation of findings during backlog reviews.
Ideation
-
Crazy 8s with engineers in the room from day one. Scalability got baked into concepts before pixels hit the screen.
-
MVP-then-MLP scoping on every content type. Decided what shipped in v1, what waited, what got cut.
-
Designed components with existing customer evidence first. Sequenced everything else behind post-launch feedback.
Ship & reflect
-
Open beta on every MVP, ship-then-iterate cadence. Customers self-selected in, gave behavioural data plus interview feedback. Second content type absorbed the first's learnings before its own beta.
-
Built Metabase dashboards for Guides, Announcements, Tooltips, and product-wide language usage. SQL across 3 databases, joined where reports needed both. Adopted by Customer Success, PMs, and R&D as the reference for content usage.
-
Design continued through dev. Trained 3 front-end engineers and 1 full-stack engineer to catch missing interaction moments themselves. Metabase data drove priorities; polish shipped inside existing tickets.
THE EDITOR, IN SURFACES
3 content types on the same pattern library. đ¨
Guides
The original content type, rebuilt. Bottom-aligned panel became a vertical, chapter-organised Editor with step cards, drag-and-drop reordering, and live language preview.
Tooltips
The first new content type. Editor surface for Hints and Beacons, in-tooltip icon positioning, per-language publish toggles, and audience segmentation.
Tags
The third content type. Inherited selector, publish, and segmentation flows from Tooltips. Built at reduced runway because the pattern library carried the weight.
FEATURES
A few selected features from the Editor. đ ď¸
AI TRANSLATION
Userlane's first AI capability, and a system test for the pattern library. đ
Auto-translation shipped in July 2023, before context-prompting was standard practice. I treated it as a chance to see whether the pattern library could absorb a substantially new capability.
â
I designed the modal, the notification model (a toast plus a subtle sound and animation for users with multiple tabs open), partial-text edge cases, save-first dependency, AI-vs-human-content disambiguation, and a glossary concept to keep Userlane-specific terms consistent across languages. Front-end engineers collaborated on animation refinement and in-progress error handling. Early AI training documentation I wrote was later inherited and extended by a product marketer.
â
The pattern library absorbed it. Every design choice reused an existing component. The auto-translation UI didn't need bespoke work. That was the test I set for the library, and it passed.
â
Shipped as Translate a Guide in the Userlane knowledge base. The pattern propagated to Tooltips and Messages after my tenure (release note).
REGEX AI
Painless validation, customised in natural language. đ§Ş
-
Validators let content creators enforce input rules on guide steps (e.g. email format, ID format). Writing a working regular expression is a barrier for non-technical creators.
-
I designed the interface for AI-assisted regex authoring. Users describe the constraint in natural language ("2 numbers, a dash, then 5 random lower-case letters"), the AI generates the expression, and a live test field validates it.
-
Currently documented under Add step input validation and How to use regular expressions.
STEP SETTINGS
Making complex step configuration legible, from beginner defaults to advanced controls. âď¸
-
Reworked how content creators configure a single guide step. Reselect element, alignment, selector refinement, skip conditions, and media, all in one panel.
-
Kept the interaction consistent with the pattern library so the same panel logic works across Guides, Tooltips, and Tags.
AUTOMATE: HIDE AND SHOW STEPS
Rules-based automation that turns linear walkthroughs into conditional flows. đ
-
Content creators can build guides that automatically show or skip steps based on context: URL, application state, prior actions.
-
Documented under Process automation via guides and Skip steps in a guide. Release note.
OUTCOMES
How the work held up. đ
-
Editor redesign validated across markets. 93% of tested customers (27 participants, 20 companies, German and US markets) rated the new Editor intuitive, helpful, and efficient. Timeline ran 40% longer than estimated; architecture improved by ~60%. Publicly announced on the Userlane blog.
-
32% reduction in Jira tickets tagged usability. Measured before and after the pattern library shipped.
-
Tooltips MVP. 700 of 926 applications adopted within 6 months. 7.82% adoption rate on a stripped-down v1. Of the Tooltips created early on, only 18% were published. Adoption by managers jumped 33% after segmentation shipped. I later wrote Tooltips: what they are and how to use them for the Userlane blog.
-
Tags accelerated relative to Tooltips. Inherited the selector, segment, and publishing improvements made during Tooltips' lifecycle. Publicly announced on the Userlane blog.
-
AI translation. 10%+ increase in language coverage on published Guides. 5 of 7 test customers understood the flow with no training. 6 of 7 said they'd use translation on other content types. Release note.
-
Outlived my tenure. Translation pattern propagated to Messages and Tooltips after I left. Editor patterns continued to bridge Editor and Portal.
REFLECTION
Systems thinking at the IC level is mostly about what you refuse to design twice. đŞ
This was Senior IC work. The pattern library was a set of decisions made once, written down, and easy to reuse. That's what mattered.
â
The MVP-then-systematize loop worked because we treated the first content type as a research vehicle for the next one.
What I'd do differently. Event listeners for each new content type should have shipped as part of the MLP. We deprioritised them: end-user event listeners were another refactoring track on top of the Java-to-React work already underway.
In hindsight, I should have advocated harder with leadership for consumer-side data to be part of the priorities. Today I'd frame it as retention and expansion tooling: proving consumption at renewal, surfacing expansion signals for Sales, and measuring feature ROI. That's the case leadership hears.
This was the foundation the next part of my career was built on. The strategic and conceptual layer I now work at only became possible because I spent 3 years learning how to make systems cohere in practice.
