My Role: UX designer over pop-ups
Project Type: Product design
TLDR: The pop-ups builder was too rigid, without enough customizability to match branding. Solution, make a better builder experience with reusable components that are now able to be used in other builders across the product.
.png)
.png)
The top complaint about our products was the lack of customization and the difficult experience making pop-ups. We needed to create something that was more usable, aesthetically pleasing, and simple. The code was notoriously difficult to work with, so we needed a plan to make things better short term and long term.
I started interviewing the brands that use pop-ups, and quickly realized that most of the pop-up creation or updating was actually being done by the account executive's (AE's) who would create the original pop-up and the customer service manager (CSM's) who would make updates for holidays. I began to interview all of our CSM's and AE's in addition to the brands.
I spent a significant amount of time, with the product manager, researching our competitors products, as well as pop-up builders, and website builders.
Once we had some lo-fi and mid-fi designs, I started testing different flows on both our internal and external users. I documented all the findings from each test, and what adjustments were made between tests done on different days.
Most users did not want to create something from scratch, they wanted templates to start with.
Within a template they wanted the ability to customize text, color, corner radius, and content to better fit their brand.
A major pain point was not being able to schedule pop-ups, so they often had to log in on holidays to switch out pop-ups that highlighted different sales
We were not going to be able to make our current builder work for scheduling, or much customization. However a change of template could take care of the aesthetic issues for the majority of users.
We realized that when people asked for a custom pop-up, they primarily (about 90% of custom pop-up users) asked for it to be 2 column, an image on the left column, text on the right. They wanted it to fill up most of the screen, and they typically wanted it to be in 2 steps, collecting email on one step and phone number on the next. We decided to give the people what the majority of them want, while we waited on resources to create a better builder experience.
This one simple change tripled the click through rate on pop-ups.
This is what currently existed. It could be made to look nice for some, but overall not the best starting place.
The new template, it gives a much cleaner look.
Leadership was worried about creating our own builder, as it is a huge undertaking. We had looked at all the possible alternatives, and had ended up ruling them out due to lack of needed functionality. We made a proof of concept to validate that we could indeed do what we set out to do with the new builder. The POC included only one template and the ability to change one component, and one overall design feature, as well as 2 basic settings.
The POC went extremely well and we were given the green light to move forward with the MVP.
The pop-up builder wasn't the only builder, we also have a grow link builder, a mobile app builder, and an embedded forms builder that we were creating. What could be better than making reusable components, and making the building experience? I'd made a complete set of mid-fi mock-ups complete with clickable prototypes when testing concepts for just the pop-up builder, and plenty of research on builders in general, so we had a good starting point for our builder design.
I collaborated with the 2 other UX designers at my company, to create a new builder experience that would be aligned across the entire platform. An example of the list of components we are starting with, not shown is the list of complex components, and layouts we will be starting with.
Without being a full page takeover it got very busy, and confusing. It caused issues if they clicked out of the builder without completing their build.
We decided to move away from the current stepper, allowing people to move between design and settings as they wanted to as soon as they had chosen a template to work with. This allowed the design to work better across all the different types of builders.
For each builder we created some basic templates that could be customized to fit each brand. For pop-ups I added several new sizes and types of templates as well based on what was most commonly used.
Adding in additional functionality to the options, allowing to have pop-ups that dynamically work for both mobile and desktop, allow the brands to choose which pages to display on instead of just homepage, out of stock, or exit. Also, instead of the current frequency of a visitor seeing a pop-up only once in 72 hours, they can now customize to show based on how many times they visit and/or timeframes.
.png)
.jpg)
We are still building out the new builder components, and will be doing additional user testing and any necessary tweaking before the new pop-up builder goes live. But overall the reactions to the builder in our user tests the past month have been overwhelmingly positive. If simply changing to a better pop-up template can cause click through rate to triple, I am excited to see if having additional templates, and customization will help improve them further.