Looking for my case studies?
The case studies show up best on a wider screen. Open my portfolio on your laptop to view them.
Redesigning Toplyne's Core Workflow: How We Adapted to Meet the Needs of SMBs and Enterprises
OVERVIEW
Toplyne is an AI tool tailored to sales and marketing teams, helping them qualify, prioritize and sync leads based on business rules and user activity data. Initially, our customers were primarily SMBs and startups, where a single person handled the entire workflow. However, as we expanded to enterprise clients, we encountered new challenges. Multiple personas with distinct responsibilities required a more flexible, scalable approach.
Along the way, we learned valuable lessons about balancing user roles, cognitive load, and the need for detailed copy to explain complex B2B SaaS workflows.
MY ROLE
Research, Analysis, Product
Design, User-testing
TEAM
1 Product Designer & 1 PM
TIMELINE
December 2023 to March 2024
PROBLEM STATEMENT
Toplyne’s lead qualification and sync workflow was originally designed for startups, where a single user managed every step of the process. As the product scaled to serve enterprise customers, the experience started to break down due to the involvement of multiple personas. The rigid, single-user workflow became cumbersome for larger teams, leading to inefficiencies.
How might we create a flexible workflow that caters to both startups and enterprise users, enabling each persona to focus on their tasks without sacrificing clarity or control?
PROBLEM BREAKDOWN
🌊 Breaks when scaled for enterprise workflows
The existing workflow struggled to accommodate multiple personas, leading to confusion and inefficiencies as teams needed to collaborate on different parts of the process.
Apart from the above problem which appeared to us quite obviously, we came across a few other secondary problems as well while doing our research. We wanted to fix all of these nagging issues in this redesign.
SECONDARY PROBLEMS
🤔 Inability to review and confirm inputs easily
Users found the accordion pattern problematic in complex, high-stakes workflows, as they couldn’t easily review their inputs before final submission.
💡 Overly simplified copy for complex scenarios
While designed to reduce cognitive load, the short and crisp copy was too simplified for the detailed, complex scenarios enterprise teams needed, leaving users feeling restricted and anxious.
🖥️ Dated user interface
The older UI served well for about a year and a half, but as new features and use cases were added, it became cluttered and visually outdated. This caused usability issues and degraded the overall user experience.
OVERVIEW OF THE OLDER EXPERIENCE
Older design - Single page and single flow layout
Cluttered interface - not designed for longer and
more explanatory copies
Once the user was done with all the steps, there was
no easy way to review everything at once, because
everything was collapsed
WHO WERE THE USERS OF THIS WORKFLOW?
Strategy Persona
Sales/Marketing Leads or sometimes even RevOps Leads. Responsible for defining business rules, setting up lead filters, and establishing the overall sales and marketing strategy. They use the tool to segment leads based on company attributes and business logic.
Operations Persona
Sales or Marketing Ops. Focuses on the execution of the strategy, syncing the prioritized leads to CRM or GTM tools for outreach, managing daily tasks, and ensuring data flows into the right systems for engagement.
As mentioned above, sometimes it was not uncommon for the same user to don both these roles in startups
KEY TAKEAWAYS
We took a strategic decision to do an end-to-end revamp of the flow. This was our chance to fix all the nagging usability and visual issues too in one go.
As we brainstormed splitting the existing flow into two parts, data analysis provided valuable insights. We discovered that users rarely modified their audience definitions after initial setup. Once the strategy lead defined the logic, the GTM experiments largely focused on using that same audience.
This pattern reassured us that separating the flow made sense: the strategy persona could define the audience and save it, while the operations persona would handle the rest, experimenting more frequently with the saved audience definitions.
DESIGN GOALS
Modular
Our design should allow different personas - strategy and operations - to interact with the workflow independently, enabling modular usage based on their specific responsibilities.
Contextual
The design must adapt to the specific needs of each use case, ensuring that the right decisions are made for the particular context. The workflow should provide just the right level of detail and control based on the task at hand.
Transparency
The design should ensure that users can easily review and verify their inputs when needed, offering clarity in tasks that require confirmation. Key details should be accessible when relevant.
THE FINAL SOLUTION
DESIGN GOAL: MODULAR
Separate flow for building an Audience
The strategy persona can come in, build their audiences and save them. Their need to keep coming back to the product has now reduced, which in turn has improved their experience.
DESIGN GOAL: MODULAR
Separate flow for setting up a Sync
The ops persona can then select one of the saved Audiences, and then set it up as per their GTM experiment
DESIGN GOAL: CONTEXTUAL
Proper explanations where they're needed
The copy should provide detailed explanations where necessary, moving away from the B2C mindset of minimal text.
Complex concepts should be communicated clearly, even if it means using longer copy.
DESIGN GOAL: CONTEXTUAL
Limiting controls and improving efficiency
In our older design, the time selector component was highly flexible, allowing users to select any specific time they wanted. However, this added unnecessary complexity. We found that users didn’t need such precise control - most were comfortable setting a time like 12:30 PM, without needing granular options like 12:33 PM.
Based on this insight, we simplified the time selection component to a dropdown offering times in 30-minute intervals, reducing complexity while still meeting user needs.
DESIGN GOAL: TRANSPARENCY
Color coded field mapping
Users rely on this feature to map essential details from Toplyne to their chosen fields in a GTM app. They can sync contact-level, workspace-level, or company-level details. Before submitting, users want a clear overview of which details correspond to each entity, and the color-coded feature makes this easier.
In the older design, users had to rely on attribute names (e.g., "company_name") to identify the entity, which became confusing with ambiguous names like "Location" - it was unclear whether it referred to a company or a contact attribute. The color-coding resolves this ambiguity.
OTHER DESIGNS
The sync detail page
Once a sync was operationalized, users can access the sync details page to view the details or make changes.
OTHER DESIGNS
The audience detail page
Similarly, the Audience detail page looked like this
— That's it, folks! —
