Inspiration to Migration: 7 Steps to Launch a Product Redesign

Brian Rhee
Animoto
Published in
7 min readNov 11, 2020
Illustration by Danielle Vogl

In the Fall of 2019, Animoto set out on a mission to reimagine and rebuild our web video creation product from the ground up. It was the most ambitious project we’ve ever taken on in my tenure here (which is now eight years!). We started with a design workshop to envision the future of Animoto, set in the near-term future of 2022. Then, we set an ultra-aggressive MVP ship date of Mother’s Day 2020.

And as of Fall of 2020, we’ve fully migrated 100% of our users to our new web product, Animoto 3! Although this isn’t my first time shipping a new product, the opportunity to build something from the ground up doesn’t come everyday. Most often, designers with in-house tech roles have the mission to incrementally improve experiences over time. But every few years, the moment arrives where it’s better to start fresh with a clean slate.

If you find yourself in one of these moments, here are 7 steps to follow.

Before and after our redesign. Illustration by Danielle Vogl.

Step 1: Before you start, build organizational support

Although the design process began Fall of 2019, Design leadership began advocating for the need to redesign our web product in January 2019. We had just completed a workshop to explore a new project start experience across web and mobile, and started shifting our focus to the video creation experience itself.

In this phase, it’s important to:

  • Foster relationships with Product Management and Engineering. It’s important to build support with your partners, and to learn the challenges they face as well. With these conversations, you’ll then be able to better articulate the need and identify the right time to pull the trigger.
  • Clearly articulated the need. At Animoto, we found that we had outgrown our existing product architecture from and it had become almost nightmare-ish for designers and engineers to add value and improve the product experience.
  • Choose your timing wisely. Design workshops and product redesigns are highly disruptive activities. Set yourself up for success by identifying the right time for a vision workshop, and the right time in your product lifecycle for a rebuild.

Step 2: Define a long term vision

Because this was a large product redesign, we conducted a workshop to set a vision for our future. We set a timeframe for that future to be 2 years. It was just far enough to help us let go of our current constraints, but also close enough that we felt confident in knowing that the marketplace opportunity would not dramatically change.

While conducting this workshop, your goals should be to:

  • Deep dive into context building. The goal here is to develop a more holistic understanding of the problems your customers are facing. We worked with all of our customer facing teams to pool together the learnings of the last 5 years into a single Miro board.
  • Be inclusive and transparent in your process. To successfully execute your vision, it’s critical that everybody in your company feels ownership in the vision. How might you set up ideation workshops to include key members across your organization? Are there checkpoints to incorporate feedback from your executive team along the way?
  • Plan for multiple cycles of customer feedback loops. As you generate ideas, various themes will emerge. It’s absolutely imperative that you understand which ideas resonate most with your target customers. Validate that your concepts and proposed features genuinely excite your target customer.

Step 3: Develop your execution strategy

After building organizational support and generating real excitement with your 2 year vision, we were ready to develop an execution strategy to achieve the first step: Setting a new foundation for the future by rebuilding our core video creation experience. This new foundation would set the stage for Animoto to accelerate into our 2 year vision.

At this stage, there will be a number of decisions you’ll have to make:

  • What is your MVP feature set? What existing features are must have? Which features can you deprecate? What new features can you bring in to help ensure a successful launch?
  • Will your design system set you up for success? Before we started, we reimagined our design system by developing a new visual language built with design tokens.
  • Are there any changes you need to make to your tech stack?
  • Are there any critical milestones you’ll need to hit?
  • Do you need to reorganize your Product Org to support this mission? If you’re a small to mid-sized company, consider staffing the majority of your product org towards this effort.

Step 4: Run a user test every week

While the design workshop gave us confidence in the direction we were going, we now needed to bring our ideas up into high fidelity while acknowledging the constraints of our execution strategy. This meant more design iterations, more user testing, and building broad swaths of our application, section by section.

To drive this process, we set up a cadence to test our designs with users every week. Most weeks looked like this:

  • Monday: Sprint planning and design exploration
  • Tuesday: Design exploration
  • Wednesday: Critique with product design team + prepping for user testing
  • Thursday: In-person user testing+debrief
  • Friday: Iterating based on learnings

Step 5: Ship fast, but roll out slow

As we rebuilt our application and brought the pieces together, we became very excited to get an end-to-end experience in front of users. However, we knew the first few iterations wouldn’t be ready for primetime, so we set up three phases of roll out:

  • Closed Beta — As soon as it was possible to render a video, we invited a small group of highly engaged users to a Closed Beta. We asked them to make at least one video, then interviewed each user to understand what was successful and where we needed to iterate.
  • Open Beta — In our next stage, we invited a large group of existing users to opt-in to an Open Beta program. We controlled the group size, but using the new product was completely optional. We measured the frequency of opt-outs and also conducted qualitative research.
  • Controlled Rollout Test — Finally, we reached a phase where we felt confident releasing to New Users, to measure how successful users were in making videos, as well as measuring how well we were converting these users to paying subscribers.

Step 6: Expect to monetize poorly at first

Reaching our first controlled rollout test felt like a huge achievement! We hit our target ship date of Mother’s Day and had virtual drinks with one another. But what we didn’t know at the time, was that this was only Halftime.

Our first roll-out test was a test against our existing web product, which, for all it’s faults and grievances, was a product with years of optimizations built in. While we were worried about improving the fundamental video creation experience, we under-invested into a number of areas, including:

  • New user onboarding
  • Upsells and monetization paths
  • Ongoing product education

Be prepared, your first release will monetize poorly! How you react and respond to this adversary will be critical. We took a step back to run a learn cycle and looked through a number of lens:

  • When looking at your data, are there any glaring gaps in product usage?
  • Using tools such as Full Story, where are users getting tripped up in the experience?
  • Comparing the experiences of your new product and old, what is different?
  • If you have segmentation data, can you dive into specific audience types and your most common user flows to pinpoint specific areas of pain?

Step 7: Migrate existing users with care

As we reached our success criteria with New Users and minimized our Opt-out rates in Open Beta, we moved towards migrating our entire user base to Animoto 3. For us, we did not want to carry the legacy cost of supporting 2 versions of the same product. We ran our users through 3 phases of migration:

  • Opt-in Migration — At first, we allowed our entire user base to opt-in on their own accord. They were invited to try our new product, and could jump back between Animoto 2 and Animoto 3 at will.
  • Opt-out Migration — After several weeks, we started the next phase of migration. Upon sign in, we notified users that they will now be using Animoto 3 from here on out. However, we allowed users to opt-out of Animoto 3 by contacting our Customer Success team.
  • Full Migration — After several weeks of low opt-out rates, we made the decision to end access to Animoto 2.

Congrats!

If you’ve done this successfully, you’ll now have a completely redesigned and rebuilt a product that is a better experience for your customers, and built on a foundation that will help you and your team deliver your vision at lightning speed.

Have you gone through this process? What lessons have you learned? Please let me know in the comments!

We’re hiring! Click here to check out our open roles. Want to learn more about Animoto? Sign up for a free account.

--

--