Full Transcript

Jared Spool: This is the UIE podcast. I’m Jared Spool

In a corner of the UIE offices, we’ve got this old cabinet. And it’s filled with stuff that we’ve acquired from being in business for more than 28 years.

Digging through this closet is like discovering a pile of lost treasures. There’s stuff in here we didn’t even know we had.

Useful stuff, buried deep in the closet, where nobody can see it and nobody knows it’s there.

Enterprise applications can be like that cabinet. Companies keep shoving their functionality into it, until it’s cramped and so full, it’s hard to do anything useful.

And when a company focuses only on the features in their application, they’re are not focused on how their application looks. We’re not talking about whether their application is pretty or not. We’re talking about whether their user can see the features that they need.

Recently, I talked with Hagan Rivers about this. Hagan helps teams make their hard-to-use enterprise applications easier to use. I asked her about whether she sees companies prioritizing getting stuff into the product more than making the functionality easy to find.

Hagan Rivers: There’s no doubt in my mind that companies, start from a list of features that they have to have in enterprise apps. They start from list of features they’ve got to have, and they get those in come hell or high water, and honestly, when visual design becomes a priority for them, is when some small upstart web based company comes along with a tenth of the features, or even a hundredth of the features, but it looks fantastic. Then suddenly visual design matters to them.

Jared: When there’s no competition, there’s no pressure on the company to ensure users have an easy time of it. But when a competitor arrives on the scene, that’s when they need to clean up their act. That’s when surfacing all that hidden functionality becomes important.

If there’s a competitor, then customers get choices. There’s a chance they’ll pick the application where it’s obvious how to use the functionality. The application with the stuffed cabinet approach to design? That application will falter in the face of competition.

But, let’s say it’s an internal enterprise application — something that’s only used by employees who just don’t get a choice. They have to use it.

Those employees still need that functionality and if they can’t easily get to it — if it’s hard to find because the interface is too cluttered — well, they pay a cost. More accurately, the organization pays a cost. A productivity cost. All that clutter makes it hard for the employee to get their job done.

Whether it’s the cost of lost sales to a competitor or the cost of lost productivity, the company is paying for that clutter. A clutter tax, as it were.

Asana was paying that clutter tax and it was expensive.

Amanda Linden: We had a lot of user feedback telling us that the design of our product was their largest reason for detracting or not wanting to adopt.

My name is Amanda Linden, and I’m the head of design at Asana.

Jared: Amanda came to Asana to help them eliminate their clutter tax. Before Amanda joined the team, the company had gone down the road just like Hagan said, focusing just on the features. And they had all the features users wanted. But because of the clutter, those users weren’t seeing them.

New customers couldn’t see what the project management product would do and they were not choosing to sign up for a paid plan. And existing users were only accessing a small subset of the functionality, not taking advantage of the product’s full capabilities. Asana was paying the clutter tax through low customer acquisition costs, high support costs, and poor retention rates.

To solve this, Amanda and her team started by giving the product a close look. First, they studied their application’s visual design.

Amanda: It was blue and every enterprise software product is blue. It was visually very complex. A lot of information on the page, tons of text everywhere, kind of thing.

The product looked very generically enterprisey. It wasn’t differentiated from our competitors at all because so many of them are using imagery of teams and office buildings and skyscrapers. They’ve got the teal logo. It’s all the same in enterprise land. [laughs]

Jared: And then they looked for where the important functionality was buried.

Amanda:There was all navigation in one area, but that had to do so much work.

Jared: Fortunately, the team had just shipped a mobile version of the Asana application. In that process, they learned about which functionality was essential. They used what they learned as inspiration for the redesign.

Amanda: I think that, a lot of times, right after you do a mobile version and launch that for the first time you uncover so many insights about how you can simplify the desktop or web app.

In the mobile version, you don’t have the luxury of as much space. You cannot show as much on the page. A lot of times with the mobile app you start by figuring out, “What do people need to do on the go? What are the things that are going to be the most important use cases in the mobile context?”

Jared: Armed with all this design research, they decided to dive in, head first and take on the clutter tax.

Since the bulk of the problem was the hidden functionality, the Asana team started by unpacking the existing navigation. Before the redesign, everything in Asana’s application was packed tightly into a single left-hand navigation menu.

Amanda: For the redesign we ended up creating a top bar header that had some navigation so you could see, at a high level, if I need to search for anything in Asana or if I want to create anything in Asana I can do that at the top.

Jared: Creating a more exposed navigation opened up the workspace. Now there was a clean place for users to put their project lists and notes.

Opening up the workspace is a common approach to decluttering an enterprise application. If you think about it, the workspace is the true focus of the users. It’s why they’re using the application. The data is what they care about most.

Hagan Rivers argues that the workspace is the most important part of any enterprise app.

Hagan: I think the one thing that really is important in enterprise application design is to understand that the users came here to interact with the information and the data in the application. All the controls, the navigation, all those other pieces that the buttons they have to push, the toolbars, those all things they have to interact with, but they’re there to see the data. A lot of these applications, you sit down with them and they’re really heavy handed with the controls. The controls are taking up half the visual weight of the screen. The pixels, the colors are being taken up by paging controls. Which are just a thing there that the user has to deal with, but they’re not interested in. I think you have to be really careful about putting data and information first, and still having the controls be available.

Jared: The Asana team redesigned the cluttered text controls into an open, clean canvas design. It was like writing on a blank sheet of paper. This made it much easier for users to focus on the thing they desired most.

And with the canvas now open, they tackled the next big thing: getting rid of that enterprise-blue color that permeated Asana’s design. It’s easy for teams to get endlessly distracted by color. Hagan has an approach that shifts the emphasis away from color.

Hagan: One of my favorite things to do is to start doing some visual design work and not use any color at all, and see how much we can communicate without color, just a gray scale if you will. Really push that as hard as we can, and then start to apply color to really draw the users attention to particular things. Color’s really, really powerful, and we’re very drawn to bright, candy colors. There’s a reason candies are brightly colored. I always tell people to think of the ape in the jungle looking for fruit hanging in a tree. That’s color, you want it, you want to eat it, you want to grab it. If you can use it very carefully in your design, you can create an enormous amount of pop and attraction. The only thing more attractive to users than color is motion, we have to look at things that are moving on the screen. Color is great, I like to use it really sparingly. There are some designs we’ve worked on where we get a heavy hand with it, but generally we start with a gray scale and we add the color in for emphasis.

Jared: The Asana team followed an approach similar to Hagan’s. They adopted a sparse color scheme that matched up with the brand refactoring, which they were doing at the same time.

Having reduced the clutter through layout and color, Amanda says the team achieved their goals of making the application feel a lot better to use.

Amanda Our product experience should feel like a clean white canvas that gives you an undistracted picture of your team’s work and the clarity to make progress with ease.

Jared: And that’s what they did. It doesn’t feel like much, but by doing those simple things, they made the application feel much more inviting.

This type of redesign where you increase the space and simplify the visual elements is one that Hagan employs often with her clients.

Hagan: We’ve worked on screens where all we do is, increase the space, normalize the feel, and you clean it up. You come back a couple of days later and people look at it and they go “Oh this is completely different.” “No, we didn’t change a thing, everything is where it was, everything works the same way but it just looks different.” Well it’s a completely different application like it’s totally new. To them, changing it from this cramped, dense, enterprise app jammed pack with visual noise, into something that looks more like these great web apps that are out there now that have such a leaner, lighter, brighter look. It really transforms how people perceive the application.

Jared: I don’t want to minimize the Asana team’s efforts. They worked hard on this and it was an intense project. But, in the end, it was changing the look that got a whole new feel for the application. And that’s a really important outcome.

The Asana team eliminated the Clutter Tax on its users. Suddenly the users could do more.

Amanda We didn’t really change the functionality of the product. We just started cleanly and simply and then let the easy things be obvious and the complex things be possible.

Hagan: Applications with more white space seem easier to use, even if nothing has changed about them, and that’s just how the human brain works. We really try to work toward that a lot. We do big open white areas in the user’s workspace, lots of emphasis on the data and information.

Jared: But the Asana team wasn’t done. They still had to roll out the design.

Amanda: The other unusually difficult constraint that we had was that we were not going to launch to just new users, we were going to launch to existing users as well.

People are always very scared of a redesign. It’s very risky. You know you’re going to make people angry. That anger is more amplified on enterprise products than it is on consumer products because you’re trying to get your work done, man.

“I was just trying to run payroll,” [laughs] or, “I didn’t need everything to move around on me.” And so,It was a real challenge that we were not going to be able to launch with new users and let existing users simmer on it and come over when they were ready.

We didn’t have the ability to have one engineering team maintaining our existing product, and a new engineering team working on the new thing. We’re a startup. We have really limited resources.

Jared: They’d successfully eliminated the clutter tax, but now they had another cost to deal with: switching costs. Hagan has run into this.

Hagan: I’ve worked with enterprise companies where they’ve made a bunch of interaction design changes. They’ve reshuffled what was on what screen, where things are located and the look. They try to roll all of that out at once. It’s just too much. It’s as if users had switched to a completely different application. They see a big drop of because at that point the price to switch to a completely new application is not any higher than learning this new thing.

Jared: An enterprise application incurs switching costs when a change is too sudden with too much changing at once. It can feel almost like a betrayal. All that change may be enough to push even a loyal user to evaluate other tools or products.

The Asana team worked hard to reduce those switching costs.

Amanda: I thought that the product design team and the PM team on the project did a great job of figuring out how to solve that problem, which is that they, again, decoupled the visual changes from the interaction changes and they launched the top bar, the project header, just the left nav, and then internal stuff all in the new look, AB testing each one, piece by piece.

And so, for an existing user, over the course of six months, each month the product looked slightly different, but no change was ever so drastic that it was highly problematic. And it allowed us to check in on each piece of the navigation changes independently and make sure that they were an AB test win before we rolled them out.

And then redesign was really a reskin at the end. things looked fresher and cleaner. We had amazing results of users being very excited to move on to the new product rather than resisting.

We didn’t change any of the visual look and feel, but we added a top navigation bar and we moved the search and all these pieces up to the top. It still looked like it was in the old style.

And then we cleaned up the left nav, and then we added the project pane, and then we changed the content area so you’re rolling out a portion at a time of the redesign all laddering up to the full effect, but still using the old style sheet.

Jared: By rolling out the new navigation a little at a time, Asana’s existing users easily adapted to the changes. In fact, they hardly noticed them. Since the color scheme stayed the same, it wasn’t a jarring change.

Once the users were completely comfortable with navigation in its new home (and now a lot easier to find), the team put the new color scheme in place. Again, this felt like a small change.

We call this embraceable change. That’s when the team makes small changes to the design over a long period of time. It helps the users adapt, and that’s important to a successful roll out. It can dramatically reduce the complaints, and more importantly, the cost of switching to a new product.

There’s an old saying that form should follow function. We need to know what the thing we’re designing needs to do before we can know what form it should take.

Yet, for enterprise applications, maybe the saying should change. Maybe it should be form dramatically lags behind function. That’s because it’s so easy to ignore form in enterprise work. After all, the users have to use what we give them, right?

But the clutter tax starts to add up. It makes it harder and harder for users to take full advantage of our products. Over time, new functionality is packed in with older functionality, making the product hard to learn and hard to use.

A successful redesign can eliminate the clutter tax, breathing new life into that functionality that had slowly disappeared and make the product feel fresh. And we can avoid heavy switching costs by bringing an embraceable change approach to the rollout, keeping those existing users who have invested in learning the application.

Suddenly, by eliminating taxes and costs, we see a return on the investment of design.

Amanda tells us that 98% of their existing users chose to move to the new design. And those upgrades to the paid subscriptions? Well, they increased by almost 10%. The team’s strategy of focusing only on Asana’s visual design worked.

They successfully decluttered their enterprise application closet. They uncovered a rich set of functionality and brought it to the surface where the users could take full advantage of its value.

This UIE podcast is brought to you by the UX Immersion: Interactions conference, which will be May 1 through 3 in beautiful Portland Oregon. That’s where our expert, Hagan Rivers, is returning to give you a full-day workshop on redesigning those complex enterprise applications.

Hagan’s workshop from last year was fantastically received. Everybody who attended loved it. They told us, after spending a day with Hagan, they were ready to tackle their toughest enterprise application redesign issues. If you are neck deep in enterprise application design, go to uxi17.com and read a complete description of Hagan’s workshop. Once you get to the end of it, you’re gonna want to sign up.

The UIE podcast is produced by myself and Sean Carmichael. We’d like to give special thanks to Hagan Rivers and Amanda Linden for appearing on this episode.

You can find more information about the UIE podcast on iTunes and at the UX Immersion: Interactions web site, uxi17.com.

This podcast is part of the UIE Podcast Network. Thanks so much for listening and thanks for encouraging our behavior.