Last things first: A redesign strategy that actually works by Sam Goertler & Vanessa Koch

Published in

Front Utah

24 min readFeb 23, 2017

This is a transcript of Sam and Vanessa’s talk to 600 designers and product managers at the Front Conference in Salt Lake City, Utah in May of 2016. Sam and Vanessa’s comments have been lightly edited for readability and clarity.

Vanessa: The word redesign. It can conjure up a lot of different feelings. If you’re anything like me, as a designer, it’s super exciting, and the world seems full of possibility. You just can’t wait to get started and do all the things. Does this sound familiar? This is how I felt when I heard we were going to do a redesign.

Sam: As a product manager, I had a pretty different reaction. I actually looked a lot more like this guy.

To me, redesigning can be a total nightmare. There are impossibly high stakes, massive amounts of uncertainty, not to mention a constant fear of user backlash. On top of all that, these projects tend to be really hard to execute. Why is it so challenging? Pretty much everything is harder when you’re working on a redesign.

Getting Buy In

We’ll start with getting buy in. If you’ve ever worked on a redesign or even visited a company that is in the middle of a redesign, you’re likely to find a team of designers who are locked away in a room.

There are sticky notes all over the walls, and a billion pictures pasted everywhere. Meanwhile, the rest of the company is wondering what the hell is going on. It’s totally like a beautiful mind in there.

It can be really hard for other people across the company to trust your process when they have very little visibility into it, and they’re not seeing signs of progress along the way. Stakeholders and executive teams, they tend to be reluctant to give the green light, but let’s say that you’ve got a good reputation, and everyone trusts you, and you manage to get buy in. You’re next challenge will be making decisions.

“The work involved in redesigns is inherently subjective.”
— Sam Goertler

You are relying on intuition and personal preferences where not only the design team can express their opinions, but stakeholders and people from across the company on sales and marketing, they can give input on things like choosing the exact right shade of blue.

Making Decisions

You end up going round and round on these kinds of calls, and the more people you have working on the project or at the company, the more opinions you end up having to manage. That can make it really tough to make forward progress, but again, let’s say that you are a creative director, and you’re used to calling all the shots, so you’re able to move fast and actually ship that redesign. You’re not in the clear just yet. Your next challenge will be measuring success.

“You’ve likely made a ton of changes to your product, but you’ve launched them all in one go, which means you’ll never really know which parts of the redesign worked well and which didn’t.”
— Sam Goertler

Measuring Success

In the worse case scenario, if your metrics totally tank, it’s really anyone’s guess how to fix it. As you can see, this is why I was reluctant to get on board with a redesign at ASANA.

Vanessa: Avoiding a redesign for too long can make a product feel outdated and on its way to being obsolete. These days, a new redesign pops up every few years. These headlines announce major redesign from the past year along. Why are there so many?

“Nearly everything that we experience these days is a digital interface, whether it’s banking or shopping or booking your doctor’s appointment.”
— Vanessa Koch

All of you know this because you’re the ones working on some of these products. There’s more designers entering the field than ever before.

We’re all working on creating new visual languages for these digital interfaces. It’s a really exciting time. We’re collectively advancing this visual language. What that means is design trends are moving faster than ever. Something that looked totally current a few months ago quickly becomes outdated.

“When a change happened from skew morphic to flat, suddenly anything from the past year looked like it was nearly from another planet. If you don’t refresh, you’re no longer fitting into the landscape of someone’s modern life.”
— Vanessa Koch

1. Outdated UI

That brings us to ASANA. This is our product, and when it launched, it was a tool for teams to track their work. This is what it looked like. It was a great start when that happened, but the visual style stayed this way for five plus years. Eventually, it felt like a style from another era and not in a cool vintage-y way.

That was our first reason to redesign was to stay relevant and to be a product that people wanted to have on their shelf. To explain the second reason, I’d like you to meet my friend, Fred. ASANA was a lot like Fred before our redesign. He’s a really sweet, dependable guy. He’s there when you need him. He’s lovable. He’s passionate, but the thing is that Fred doesn’t make friends very easily. He has this kind soul, but it doesn’t really show upon meeting him at first. He tends to give off this awkward first impression. If I introduce Fred to people at a party, I say,

“Okay, look. He’s going to be a little awkward, but once you get to know him, you’re going to love him. I promise. Just get past the weirdness.”
— Vanessa Koch

2. Brand Misalignment

This is how a lot of us felt about our product and our brand. All that character just wasn’t coming through. As you can see, we had this dray blue gray color scheme. Also, a logo with three dots that, if you asked anyone across the company, no one could really explain what they meant. It was really anyone’s best guess. In addition to that, we had people full of passion writing our product, but it still felt robotic.

The images that we were taking of people on our teams and putting on our website, somehow managed to feel like stock photography. This clearly felt wrong. We knew there was a world that existed that was not this world, but at the same time, there was no single vision that we were all aligned on. There was definitely a brand misalignment. Then, in addition to that, feature development is moving faster than ever these days, again, as you all know.

3. UX Confusion

You’re using rapid release cycles, and teams use agile methods, so a product goes from MVP to chalk full of functionality very quickly. This was the situation for us. We had tackled our road map, we launched our MVP, and then we added a bunch of new features. Pretty soon, these features were crammed into every different corner. I was a designer working on some of these, and it just became really difficult to find a good home for them in the product.

“Either they were too hidden, and the value of them wasn’t being unlocked because they weren’t discoverable and they didn’t have good entry points, or they were front and center and very loud and then added, one by one, to the complexity of our product.”
— Vanessa Koch

You might say this is fine. We have people who use ASANA and love ASANA. They’re our champions, and if they can use it, it’s good for them. It’s the right level of complicated, but they couldn’t, as much as they loved it, get their teammates on board. For collaboration software, that’s kind of essential. That was pretty important. We had really hit this tipping point in terms of complexity. We didn’t have an extensible system. It was really time to rethink our basic structure.

That’s reason number three is a deep UX confusion, especially for new users.

Sam: She makes a good case, right? These were legitimate reasons to invest in a redesign. We recognized that it was not only best for our users, but it was also best for our business. We decide to go for it and to give you a little preview, we went from this old, drab world, to this bright, new world.

Redesign Execution Srategy

Now, we’re going to get into actually how we pulled this off. In terms of execution strategy, as a product manager, I approached this the same way I would approach any feature development project.

“My instinct was to start with an MVP, a/b test it, and iterate our way to an optimized end state. I couldn’t really imagine the alternative.”
— Sam Goertler

I didn’t want to be stuck in that beautiful mind room locked away for months only to unveil a new redesign that users may hate and then not know exactly how to fix it.

Vanessa: My instincts were a little different. I was worried that we would a/b test ourselves into oblivion and then we would forget our original vision. I was also aware that the redesign was more than the sum of its parts. If we launched peace meal one by one, users would have this Frankensteined experience, and it would be a bad experience for them.

“I was more into this big bang idea, where we would get everything perfect behind the curtain and then unveil it all at once. I just couldn’t fathom any other possibility.”
— Vanessa Koch

#1 Set a General Direction

Sam: She was right. A redesign is more than the sum of its parts, so we wondered if there was a way to get the best of both worlds. In order to find out, we took a closer look at the specific user pain points that was leading to the outdated UI and confusing UX. From there, we realized that there’s a handful of structural issues, things like broken navigation and a lack of hierarchy on the page. Separate from that, there was a handful of visual issues, which was things like old button styles and a drag color scheme. That’s what was causing the outdated UI feeling.

“Once we had made this distinction, it became clear that we could incrementally improve the structure of the app, and then, once those changes were I place, we could launch a visual refresh with a bang.”

That way, the users wouldn’t have that Frankenstein experience where they’re seeing parts of the new style alongside remnants of the old style, because all the UX changes would be made in that old style.

“When we unveiled the visual refresh, we wouldn’t be forcing users to adopt an entirely new workflow overnight. We would mitigate a lot of the risk of user backlash.”
— Sam Goertler

#2 Break It Up

Vanessa: Let’s talk about his process more. We started by setting a general direction. What that looked like was a really fun time where our whole team took an offsite to the woods for a few days. We had Designers, PMs, Researchers. We were all there, and we had an idea of what we wanted to do, but we just wanted to get all the broad ideas out that we could. We encouraged people to think crazy, come up with all the possible solutions, and we just generated as much as possible in that amount of time.

“That gave everyone on our team a chance to share.”
— Vanessa Koch

When we were starting this project, it was just a small core team working on it to begin with. Of course, it would grow over time and become much larger. It was important for everyone to get their ideas and input in there. It also generated a lot of excitement and got us really thrilled to kick it off. Then, we had this mountain of ideas. Sam’s ready to get us on a sprint schedule and get going, so how do we take that and make it actionable. We incorporated the best of those elements into these concept mocks here. This was our north star. This was the thing that, throughout the process, we were going to look back and shoot for and remember our vision.

Sam: Vanessa makes that sound very easy, but for any of you who have worked on a design team, you can imagine how tough it is to actually get a group of people to reach consensus on a grand vision for their product. As I mentioned earlier, this work is inherently subjective, but because we’re taking an incremental approach, we knew that these mocks would never ship. The details would change over time based on the information that we were gathering from the incremental releases all along the way, and because of that fact, it lowered the stakes and made it possible for the designers to get closer to consensus and also made it possible for stakeholders to buy into this vision.

“This work is inherently subjective, but because we’re taking an incremental approach, we knew that these mocks would never ship.”

For us to buy into this vision. Once we knew where we were going we then had to build the steps to get there. We started by breaking up those concept mocks into all of their different independent parts. For example, one part was a new top bar navigation piece, we also had a new home page for teams, and actually here are all the different parts that we ended up shipping incrementally.

[gif]

Next, once we had all of these mapped out we had to figure out which piece we wanted to launch first. Our goal was really to optimize for learning along the way so that we could iterate to the best end state.

#3 — Sequence the Work

In order to figure out how to do that we considered what we could learn from each piece, and if one piece happened to be a huge departure from the status quo, or if it was based on a lot of assumptions that we weren’t able to validate and advance with prototyping, or user testing, then we knew we had a lot of insights to gain from actually launching it. We put these pieces at the top of the list in order to answer those big open questions up front.

[img]

Validate Assumptions Early

Here are all the parts again, and these two were the biggest learning opportunities for us. They changed the entire navigation of our product, so we decided to test them first so that we can validate the assumptions we were making. Then we would launch the safer bets further down the road. I’ve mentioned this a couple times now but the major advantage of taking this incremental approach is to answer those big open questions up front, validate those assumptions so that you’re not making big decisions based on false assumptions and running into major catastrophe down the road.

Build Momentum

This isn’t the only advantage of the approach, you always have the opportunity to build a lot of momentum along the way. For example, that top bar navigation piece that was one of our first launches, and it turned out to be a huge win for us. Which was really exciting, and it helped build morale for the team, and get the company to rally around the project.

Here you can see a staff announcement we posted right after that launch, and we’re getting tons of hearts and love from across the company. Which really, really helped us build momentum and move forward. Had we bundled that top bar change in with all of the other changes we wanted to make, we would have gone months without seeing any signs of progress and that can be really demoralizing for the team working on it, and it can also erode trust from across the company.

Change Course When Necessary

Unfortunately not all launches went as smoothly as the top bar launch, on the other end of the spectrum was a new side bar navigation piece that we launched shortly after.

Even though we had prototyped that, we beta tested it, dog fooded it internally, we still did not anticipate what would happen when we actually launched.

It turns out that we broke a lot of user workflows in major ways. We saw tons of negative feedback from users pretty much right away.

Here you can see a lot of concerns on Twitter, and on our blog post, we also got twice as many customer support tickets on a Friday night which is never fun, and then even after running an A, B test it turned out to be a fail. That felt pretty terrible at the time, but in retrospect it was really okay and ultimately for the best.

We had launched that piece on it’s own, and that meant we were able to isolate all of this negative feedback and roll back the particular change causing it. If we had bundled this in with all the other changes, finding and fixing our mistake would have proved to be a lot harder.

Know When To Move On

Then another advantage of this approach is that you know when to move on, it basically teaches you that. You’re testing each piece individually, you’re able to measure the impact of those specific changes. When you’re testing the big open question pieces up front, you can see really high impacts in terms of A, B test results, and qualitative feedback. For example, that top bar launch was a really big win. Later on down the line as we were launched these safer bets, they had more subtle impacts. At that point we recognized we were hitting diminishing returns, and it was time to shift gears to higher impact work like improving the visual style.

A New Look

That brings us to our new brand and visual style, and how did we approach that? On the surface it might seem like we went from a logo with three dots, to another logo with three dots. That’s true, but there were also many other lessons learned along the way. We followed that same incremental process that had been working for us so far.

#1. Set a General Direction

We started this time, to set a general direction we had to do a little bit of soul searching. You remember Fred, if we weren’t Fred than who were we? We really needed to figure out how to present ourselves to the outside world. In addition to that we needed to align on who we were internally. Across the company we had someone in marketing might be thinking of Asana as a room with white walls, and then someone over in the engineering team might think of Asana as a really stark white room. There were these different ideas about what our brand was, and what we were expressing.

To get that all on the same page we started with words. What we did was crowd source from people across the company. What does Asana mean to you? How would you describe it? We had thousands of different phrases and words, and then looked through those and narrowed it down into this set of four attributes that really guided us.

It wasn’t easy to get to this list, and we had to push really hard to get down to four things because it’s easy to feel like you want to have all these different ways of expressing yourself, but having it limited down to four really helped us stay focus as we moved forward.

We also had to refine the list a little bit as we went. In our original list of four, one of our words was, “Human.” It sounded great at the time we came up with it, but we started trying to use it to test designs against. It was really hard to say if one thing felt more human than the other. We went back to the drawing board on that one and ended up with the word, “Quirky. “ Which was a lot more specific and really helped us measure our alignment to our goals. Conversations around the office started to sound like, “Hey that email is really empowering, I think the writings great but it could just use a little bit more quirk.” It was great to see these words become our shared language.

“How do they help us along the way? Well, one of the hardest things I think is defining a color system. It is very subjective, there’s a lot of different ways that color can be used and interpreted.”

At one point during our process we were trying this time of day concept where in the background of the app that started out like a sunrise in the morning, and then changed throughout the day. Half the people working on it were really jazzed on this idea, and then the other half was like, “Eh, I don’t know, it just doesn’t feel quite right.” We were about to start spinning our wheels on this concept and going into a kind of birds nest there, but we thought back to our attributes. We’re like, “Okay, is it purposeful?” Right off the bat, not really. The time of day doesn’t really quite have anything to do with being productive with your team. We didn’t feel like it was working.

If not that, then what? We kind of landed on this new approach that had a white canvas with pops of color. Those pops of colors felt really intentional, they felt purposeful, so we were able to use the words to help orient our visual language. That really helped the team move much quickly than if we didn’t have those words at all. I think we’d still be sitting in a room debating colors. Yeah, this really helped us move forward. Besides color there was another area that was kind of hotly debated and went into question.

That was the unicorn. This has a lot of history, about five years back at a hackathon, one of our engineers worked on incorporating this unicorn into our product. I don’t know where he got it from, maybe like the Lisa Frank Stock Image Store, but he grabbed that and some really fun phrases, and every time that you complete a task, or once in awhile when you complete a task, this unicorn flies across the screen.

It was just kind of this Easter egg that existed in our product for a long time. Throughout the company, some people loved the unicorn and others hated it and couldn’t wait for the redesign to take it out. For weeks it was like, “Are we going to kill the unicorn? Is the unicorn going to stay?” It was really tough to make any sense of this mythical creature, and what it’s place was in our product. Again, we went back to those attributes. Is it empowering? Hell’s yeah, when you complete a task and you get a unicorn flying across the screen, that’s some sense of empowerment. Is it quirky? Definitely, maybe a little too much. We were starting to hit those check boxes like, “I think there’s something here.”

In addition, we had a team running an experiment on our users with the unicorn. Took it away from some, gave it to others. First of all, some of the ones that we took it away from started a petition on Change.org. The ones that we gave it to, and actually we found significant increase in usage and collaboration. That unicorn was not going anywhere. Now it was just a matter of how to take it from prancing around this Lisa Frank world to kind of fitting into more of our new style. We managed to do that, and re-worked it a bit here.

There you see our unicorn friend flying across the screen. We really embraced it, and actually we really, to the point that we launched a whole suite of mythical creatures that you may see one day if you’re lucky, if you use Asana.

As fun as this was it really, it was surprising how much this became a key thing that customers loved, and wanted to talk about, and so it continues to be a great way to interact with our customers. They spot the unicorn in the wild and post it on Twitter, and want to have conversations about it. That’s certainly great, people feel more of a connection to our brand, we let them have fun with their work inside of our product, and of course it drives more word of mouth growth.

Here’s some of the team that was working on this project, the design team. I show these faces because you probably think, “What was the size? How did this many people come together and create something consistent?” That can be really tough to have different hands, but it’s meant to feel like one voice. How did we pull that off? As I said we started off small and our team grew over time. as we started showing people what we were up to, it became a great recruiting tool and we were able to expand our team from just a few designers to bringing on a full time prototyper, a full time animator, an illustrator. As we were getting momentum on this project it was really easy to get buy in from the company when they saw, when we all got together, the results in what we were doing definitely felt worth it. We just kept expanding our team, and having a lot of fun together.

There were designers from the marketing team, the product team, web, mobile, and we were all working on this thing together all at once. Everything started out as an open question. We all sat together in one room, and that helped a lot. When we’re moving forward on features we’ll go and designers will sit with developers in little teams, but for this phase of this project it was really important to create this sense of design unity.

For one example of how we maintained that unity, we had landed on this logo here. We really liked it, the color felt right to us. When we thought about those attributes, it definitely lined up with being a little quirky, it wasn’t the typical blue that you see in enterprise software, it felt intentional, empowering, pretty approachable, but at the same time we hadn’t figured out anyway to use it in other parts of the product. It wasn’t in the UI, it wasn’t anywhere in marketing, but when we tried other colors it didn’t feel right.We were at this point where we had this inconsistency and we weren’t sure how to resolve that.

One of our mobile designers was working on some mocks one day and threw it into the creation moment on mobile. It created this burst of energy, and it felt totally right. From there that was kind of an aha moment, and we transferred that into the web product, and then it became really easy to spread it across our marketing materials as well. Now all of our touch points had this common color of this coral orange gradient.

“We call it, “Corange,” or, “Corange,” if we’re feeling fancy, which I usually am. “— Vanessa Koch

We had this corange as our new brand color, which was wonderful. We really got there because of this cross pollination. That was really key to the process, and that led us to a world where we had consistency across the board.

#2. Break It Up

While this exploration was super fun and I could have stayed in picking colors and fonts world forever, Sam was quick to remind me that we had to ship at some point. We moved from these broad explorations to patterns, pretty systematically.

We were in this chaotic world of Sketch, File, Art board into oblivion, and we move from there into this style guide, which was really our saving grace. When we would get together as a team and pin up all of our explorations we would decide, “Okay, I think we’re ready to lock down this pattern, or that color, or that button style.” Then once we made that decision, it got documented in this master sketch file that we all shared. This became our kind of bible and source of truth, full of all of our standards. That helped us keep our sanity and move from chaos to clarity over time.

#3. Sequence The Work

Sam: Now that we had our vision, and we had broken that vision up into all of the different elements of the visual style, mapped it out into a style guide, we then had to figure out how to implement those changes. Even though we weren’t launching each element of the visual style incrementally like we were with the structural changes, we wouldn’t do that to users and put them through that Frankenstein experience. We would do that to our internal Asana users. As we were dog fooding the changes we were seeing them come in one by one, and that allowed us to really reap some of the same benefits of that incremental process we talked about earlier.

How did we do that exactly? Well we first started by making a prioritized list, and this is a very, very simplified version of the one we actually worked on. Again, we were optimizing for learning along the way, so we put the highest impact, biggest open question changes at the top and the safer bets were further down that list. As the company’s dog fooding all of these changes along the way, we’re able to get a sense for diminishing returns. For example, when “Corange” made it’s way into our project, which was one of the earlier changes, we received a ton of fan fair. People were really excited, it felt like a new Asana, which was really high impact and great to see.

Once we got about seventy five percent of our way through this list we started updating settings, dialogues that were buried in corners of the app, and those impacts were a lot more subtle. At that point we started recognizing diminishing returns, we also had a looming deadline that we wanted to stay committed to, so we knew that done is better than perfect, and it’s time to launch.

With this launch, unlike all of the incremental launches leading up to it, we recognized an opportunity to drive word of mouth growth and reactivate old users by making a big splash with marketing and PR. Rather than just announcing the visual refresh on it’s own, we actually crafted a story that included all of the incremental changes we had been making for an entire year leading up to this point. We called this, “The new Asana.” It was if we were rearranging the furniture for months, then we painted the walls, and now it was time to show off our brand new home.

Measure What You Can

We had a big marketing campaign that was driving a ton of traffic to our website, we couldn’t exactly A, B test this launch the way we had done with others in the past. It would be pretty weird if we sent a ton of users to our product and only fifty percent of them could experience the redesign whirl, so we had to get creative with our metrics for success. We looked at things like an increase in word of mouth growth for new users, which we saw thirty five percent increase of week over week growth after a series of flat weeks. We were able to attribute that growth to our marketing campaign, and our re-brand. We also saw ninety percent increase in week over week growth of reactivated domains that were previously dormant, which just means users who had given Asana a shot awhile back and abandoned it. They were coming back and engaging with us again. That data point felt like a sign, an indication of success.

Then on top of that we gave all of our existing users the option to revert back to the old design once they got to the product on the launch day, and we saw fewer than one percent of users opt out. That was another indication that this project felt like a win. Along with all the quantitative metrics though, we also looked at qualitative feedback. Here you can see a snippet of our Twitter feed on launch day, and we actually ran sentiment analysis on our Twitter feed, on our blog post, et cetera, and saw an overwhelming amount of positive feedback to reinforce the success of this project. We also ran ongoing user surveys, and up until the redesign we would ask users whether or not they would recommend our product, and why or why not. The number one reason that people would not recommend the product was because of design. After this launch, that dropped from the top of the list. It was another victory for us.

I would say that my biggest win of all was that we received fan art that was hand painted, so that was pretty awesome.