Product redesigns are never easy. While your developers and designers are taking your product apart and putting it back together again, they’re not building new features or fixing bugs. This can cost you new and existing customers.
A common analogy for building a startup: constructing the plane while trying to fly it. It’s hard to continue to please existing customers who have the power to leave mid-flight, so the obvious motivation is to do whatever it takes to keep them engaged.
However, redesigning and rebuilding your product can be a necessary step in getting from one stage of growth to another. And the best time to experiment with finding the global maximum is early on—it only gets harder further down the road.
Related: Rebranding a SaaS startup
We’ve done several full redesigns of our product en route to building a more design-centric product as we’ve grown from a side project to a seed-funded company. What follows is our story and the lessons we’ve learned so far.
Building the first prototype
When we first started Chameleon, it was a side project. We’d seen that startups treated onboarding basically as a “set it and forget it” aspect of the product.
A/B testing websites, releasing new features, and iterating on design were common practices, but sophisticated and dynamic user experience was hard to do. Engineers were too busy with core functionality, and those responsible for user engagement (product managers, customer success managers, designers) didn’t have the tools to make quick edits on the live product.
“With product redesigns, make broad changes early.”
After lots of research interviews, we saw the opportunity to build a product that made creating, testing, and iterating in-app prompts without code possible (and easy).
Our big goal early on was to build a prototype that:
- would be functional for customers
- could be abstracted/generalized into a system
We worked with some early customers, including Mesosphere and Amplitude, to understand their requirements and build them a customized version of the product.
We focused on the end-user experience and built a simple web app for the editing/controlling of tours. We used a simple jQuery library, bought a cheap Bootstrap theme, and built out the basic functionality we needed to let users create and edit tours:
It was basic, but it got (some of) the job done. However, building this quickly and getting real actionable feedback from our early customers was extremely valuable.
The prototype also helped us demonstrate early bootstrapped progress, which helped us raise our $1.9 million seed round.
How Squarespace inspired our product redesign
By the time we raised our seed round, we had competition in the space, which validated our approach. There was significant pressure on us to get our product out to market. We could have continued to build out our web app and add functionality, but we were worried that we’d lock into a sub-optimal framework.
Related: Inside Design at Squarespace
We hadn’t been able to dedicate enough energy into thinking about the design holistically or getting input from experts. But the prototyping had taught us a lot, and now our “intuition” was aligned with what our customers wanted.
We knew that it was important to provide a WYSIWYG experience and give customers easy access to edit and update their tours.
One big inspiration for us at the time was Squarespace. In many ways it was analogous to our goal of providing a simple editing interface for building product tours. It also marketed itself as “the site-maker that cared about design.”
We loved how you could edit and preview in the same exact window, at the same exact time. While Squarespace had full control of the experience, Chameleon worked as a thin layer of tooltips and prompts over the underlying product/site.
So, armed with all this thinking, we hired a designer (we finally had money for one!) and ran a design sprint. This included problem and solution brainstorming, rapid prototyping, and customer interviews.
This is what we came up with—a product that lived over the target app and allowed live previews.
We believed this also had a major advantage: our customers were much more likely to use Chameleon if they didn’t have to remember to navigate to our separate app each time. This provided us with the potential to create a far more engaging and valuable product.
This was a big bet. We had to pretty much start building the product over—it’d take months.
Leading up to launch
It took us 3 months before we delivered the first version of the new Chameleon to our customers, and another 3 to 4 before we were ready to launch it. That meant that almost 7 months passed between us beginning work on Chameleon v2 and finishing it.
But the second version of Chameleon brought in some crucial new features, like an admin overlay view for editing tours and viewing user details. It was designed to be powerful, yet simple enough for anyone on a team to use it to create a tour, define a user segment, or set success metrics.
Product redesigns always reset the polish of the product. This polish comes from all the incremental usability improvements that need to be made after customers begin using the new interface.
“Customer relationships are key to reducing churn.”
After launching, we began rapidly working on these and adding new features to keep pace with our customers’ demands and the market. Since our launch in March last year, we’ve added features that include event-based triggers, saved audiences, data integrations, custom CSS, and many other improvements.
Seeking product-market fit
Product redesigns require contextual knowledge of existing problems, broader vision, market trends, and customer usage. It’s hard to be quantitative in making decisions, so it’s important that (a) you spend a lot of time in qualitative research with your customers and (b) everyone on the team has a chance to contribute.
Since our redesign, we haven’t stopped iterating, and we now have an even newer version of the Chameleon editor that both solves some of the challenges of the Sidebar and provides opportunity to expand the product footprint substantially.
We’re continuing to build a product that we believe will be differentiated and achieve the true potential of giving our customers the product control they need to create effective contextual guidance to help their users succeed.
Our key takeaways for product redesigns
- Make broad changes early. It gets harder to make design pivots later, and this is your best chance for finding a truly global maximum for your product.
- Expect user churn. This is a cost of investing in product development, and you have to accept that not all of your customers will be able to accept this. Learn from them and know that they can return in future.
- Customer relationships are key to reducing churn. If they’re invested in the changes, then they’re likely to be excited and willing to test and give feedback. Communicate clearly and off-board as necessary.
- Involve your whole team in brainstorming the problems and possible solutions. You want as broad an outlook as possible to give yourself the best chance to reach that global maximum.
- Expect to take a step back in polish with each product redesign. Spend the next sprints improving usability and release these rapidly to reduce customer dissatisfaction. Small issues can cause big annoyances.
Did you miss Pulkit’s previous post? Check it out: 5 key lessons for successful user onboarding.
Pulkit Agrawal is co-founder & CEO of Chameleon. He cares deeply about UX and enjoys translating user psychology into good product design. Previously he's worked on data analytics, growth and product for startups and studied Engineering at the University of Cambridge.
