Popup Settings
CRM MIC is a comprehensive system that enables managers to work with client service requests and support tickets. The Documents section in CRM MIC is one of the most crucial parts, tied to the legal and compliance aspects of the process.
Team: Development team of front-end, back-end developers, data scientists and product managers as a single designer responsible for the entire UX of the product.
Users: Internal employees (Managers)
Design System: Utilized basic existing components such as buttons, inputs, colors, icons, typography, and illustrations.
01
Context and Problem
Configuring popups is a crucial but often complex process that directly impacts user engagement and communication strategies. The old Popup Settings flow failed to provide a smooth and efficient experience, due to several issues:
• Overly time-consuming: Users had to navigate through multiple complex sections, which made the setup process slow and frustrating.
• High abandonment rate: The unclear structure and redundant fields led to a low completion rate, as users often abandoned the configuration midway.
• Outdated design and inconsistent user experience: The previous design contained outdated UI elements and lacked a cohesive structure, which made both maintenance and user navigation difficult.
• Limited flexibility: The system did not support more granular options for display conditions or targeting, restricting advanced use cases.
Acknowledging these issues, compounded by the flow’s poor technical foundation and inconsistent user experience, we decided to develop an entirely new Popup Settings flow. This approach allowed us to test new ideas and ensure that the updated solution would be more effective, ultimately enabling us to retire the outdated system.
02
Measuring Success
Before making any design or product decisions, our team, which included the Product Manager, VP of Product, and myself as the Product Designer, discussed potential success metrics for the new Popup Settings flow. Given the challenges we identified, we established the following criteria to measure the effectiveness of the redesigned flow:
• Increase in popup configuration completion rate: Improve the percentage of users who successfully complete the popup setup process.
• Reduction in setup time: Decrease the time it takes to configure a popup by simplifying the flow and reducing redundant steps.
• Consistency and maintainability: Create a uniform and easily maintainable UI that allows for quicker updates and fewer errors during maintenance.
• Enhanced flexibility: Ensure the interface supports a broader range of display and targeting options without overwhelming the user.
These success metrics served as a foundation for evaluating the impact of the revamped Popup Settings flow and informed our design and testing decisions throughout the process.
03
Process
Benchmark discovery
I’ve started from discovery of existing onboarding solutions and their best practices.
Initial Low-Fidelity Drafts
I dedicated several days to developing initial prototypes, focusing on low-fidelity drafts for conducting UX research. The primary concept centered on displaying a clear sequence of steps on the left side of the screen, accompanied by a list of questions in the center.
The left-side navigation helped users understand where they were in the process and what steps remained. The central form was designed to capture key configuration details, such as:
• Popup Title
• Popup Body (content)
• Comments (optional notes)
• Recurrence Method (e.g., daily, on page load)
• Target Audience selection (all users, groups, or individuals)
First Discovery
Next, I recruited 10 relevant respondents through User Interviews and initiated the interview process. I utilized Qualitative Usability Testing with a prototype in Figma. The goal was to identify major issues users might encounter with our revamped Popup Settings flow.
After conducting the interviews, I used Dovetail to analyze the responses and identify the challenges respondents faced.
Key findings included:
• Confusion about the recurrence method terminology.
• Uncertainty regarding the “Target Audience” options and how they impact visibility.
• Requests for more pre-filled examples and templates for faster setup.
The issues were categorized and prioritized in collaboration with the Product Manager and the Vice President of Product. This analysis helped us focus on the most critical improvements that would make the flow more intuitive and reduce setup time for users.
04
Resolving Issues and Refining the User Interface
After identifying all major issues, I iterated on the user interface to address the pain points highlighted during the usability tests. The updated design aimed to improve clarity, reduce user friction, and enhance the overall experience.
Building the UI Library
Simultaneously, I began creating components and building a UI library to support the Popup Settings flow. This library included:
• Base Tokens: Colors, fonts, and spacing rules for consistency across the interface.
• Reusable Components: Inputs, dropdowns, toggle switches, and buttons.
• Complex Blocks: Recurrence settings forms, target audience selectors, and confirmation modals.
The UI library ensured a consistent look and feel across the flow and simplified future updates and scalability. This allowed for quicker iterations and seamless collaboration with the development team during the implementation phase.
05
Insights We’ve Got
Final User Testing
After adjusting the designs, we wanted to ensure that no major UX issues remained. To achieve this, we reached out to five more participants and conducted interviews with them using the same scenario as in the initial tests.
Despite identifying a few remaining UX issues, they were minor and did not significantly impact the user flow. Therefore, we decided to proceed with the existing designs for implementation.
This final round of testing validated the improvements made during the iteration phase and confirmed that the flow was intuitive and efficient for the target users.
Hand Over to Development
Before we even started testing how users felt about our designs, I was already collaborating closely with the developers. This ensured that I didn’t create anything too difficult to build. We held regular meetings where I presented my early designs, and the engineers asked challenging questions. This early feedback allowed us to identify and fix potential issues from the start. By the time I completed the second set of designs, the developers knew exactly what to expect and how to implement it.
Next, the entire team reviewed the designs and estimated the required effort for each feature. I continued to support the developers throughout the process. Whenever a design element seemed overly complex to implement, I simplified it while ensuring it still met user needs and maintained visual consistency.
Release and A/B Test
Following the release, we gradually adjusted the traffic distribution between the new and old Popup Settings flows. We started with a 90/10 ratio to ensure that there were no major issues before scaling.
Once we confirmed the stability of the new flow, we increased the distribution to a 50/50 split.The project was overall a success, but there are always lessons to be learned:
1. Incremental Changes vs. Complete Revamp:
It’s often more efficient to make changes step-by-step rather than rebuilding the entire flow at once. Rebuilding the Popup Settings flow required updating not only the user experience but also all related backend processes. For example, our system had multiple integrations with third-party tools, and the compliance team needed to see all submitted data in the admin panel. Ensuring that all these elements worked seamlessly added significant complexity and time to the project.
2. A/B Testing Strategy:
When running A/B tests, it’s best to change only one variable at a time. Changing multiple elements simultaneously makes it difficult to identify what caused an improvement or decline. A poorly performing version B might include good changes overshadowed by one poor decision, causing valuable ideas to be discarded unnecessarily.
3. Speed of Delivery in a Startup Environment:
In a startup, delivering quickly is more important than creating pixel-perfect designs. The goal is to launch a “good enough” solution that addresses the core problem and iterate on improvements based on real feedback. Spending too much time perfecting small details that don’t significantly impact the user experience can delay the overall release without providing meaningful benefits.
These insights will help guide future projects and ensure the team remains agile and efficient while maintaining a focus on user-centric improvements.
The results were promising:
• The revamped flow demonstrated a +44% higher overall completion rate compared to the old flow.
• Each individual step in the configuration process showed improved performance, with users completing the setup more quickly and confidently.
06
Results
Final User Testing
After adjusting the designs, we wanted to ensure that no major UX issues remained. To achieve this, we reached out to five more participants and conducted interviews with them using the same scenario as in the initial tests.
Despite identifying a few remaining UX issues, they were minor and did not significantly impact the user flow. Therefore, we decided to proceed with the existing designs for implementation.
This final round of testing validated the improvements made during the iteration phase and confirmed that the flow was intuitive and efficient for the target users.
