Finding Clarity and Energy
Learnings from redesigning Asana
As a designer, it’s exciting to invent. But sometimes “redesign” can be a four-letter word. After all, our product, Asana, is loved by thousands of teams, so it’s daunting to consider changing what already works.
But when we launched a brand new Asana, our fears evaporated and our long journey was validated. Though a lot of it seems obvious in retrospect, throughout the process there were challenges pushing the project forward and bringing our ideas to life.
Here are 10 things I learned from the Asana redesign. Should we ever dare to do anything like this again, I’ll have these principles to reflect on.
Invest in the long-term
A redesign wasn’t necessarily urgent when we started out, but we knew it was important. We felt strongly that our future would move faster and go further if we slowed down and reworked things today. That’s why we embarked on a visual and structural overhaul of the our web and mobile apps. By deciding to prioritize a redesign, we made an investment in our future and placed a huge bet on the value of design.
We began by imagining a world where Asana felt incredibly easy to use and looked like a place where teams would want to spend their time.
Focus on one goal above all else
To better understand our challenge, we listened to our customers. Take the story of Simone: she loves the powerful functionality of Asana. And as a construction project manager, Asana is crucial to keeping her organized. But a plumber on her team was overwhelmed; all he really needed was to see his tasks and mark them as done.
Clarity became our one goal above all else, and became a mechanism for decision-making. “Maximize clarity” was our guiding light. When stuck on decisions between design options, the answer was always “whichever one maximizes clarity the most.”
While picking one clear goal sounds simple, it was no easy feat. We had to say “no” to a lot of great ideas in order to focus on this one. But in the end, having such unyielding focus allowed us to align the entire team and make difficult decisions quickly.
Go broad to find your focus
We cleared the calendars of our product team for a “Redesignathon.” Everyone shared their ideas and riffed off each other. We embraced the expansive stage like any design team would — full on dream mode. By generating a bunch of ideas, we could see where themes emerged and which ideas generated excitement.
After trying out our crazy ideas, we were ready to define our focus. It was important to nail down a single starting point to prevent being overwhelmed. Then we could begin the expansive ideation stage again, but within a narrower realm.
The goal was a new page structure and layout, and improved navigation. We captured the essence of our vision and kept it around to remind us what we were aiming for.
Define clear success metrics
We set up success criteria at the outset. We established core collaboration metrics and tracked core actions like commenting on a task. If these metrics went up, this indicated increase in collaboration and likelihood of a team successfully doing their work in Asana. As we launched each step, we were able to see how our metrics moved and which changes were effective.
It’s OK to launch incrementally
While many companies launch a redesign with one big bang, we decided to do it incrementally. It wasn’t the obvious path. With dreams of unveiling a grand vision, we initially resisted the thought of rolling out parts in isolation.
But our wise product manager suggested that we pick a general direction, and not be too rigid about nailing down an ideal end state. By shipping incrementally, we’d gather more information that would guide us to a better design outcome than we might have imagined at the start.
Because we aligned on a plan with built in user feedback loops and room for adjustments, it was less scary to jump into the unknown. We could design quick ideas for each piece, test them, and roll them out one at a time.
First, we improved navigation.
When we watched people get started in the product, they often had a hard time understanding where to go and how to get around. To bring clarity introduced a new top bar, always visible and prominent.
The create button places key actions upfront. Rather than being buried inside specific containers, it’s top level so ideas are captured quickly.
We explored different ways of grouping content in the sidebar for easier access. By testing the first version as an isolated component, we received clear feedback about was and wasn’t working. This allowed us to reconsider its design and optimize it before the big relaunch.
Next, we developed a clearer page layout.
The new full-width header creates a clearer hierarchy on the page. The tab structure creates an extensible layout for additional views.
The full header allows flexibility for the contents below it. While the calendar view fills a single large panel, the conversations view breaks content into cards. The system allows for fluid layouts on top of an underlying grid.
As a project becomes more complex, the layout seamlessly expands. Projects grow to include advanced features like status updates.
After solidifying the structure piece by piece, we felt confident about building on top of it. In contrast to the incremental release of our structural changes, we planned a big reveal for our new visual system. Making isolated changes to fonts and colors doesn’t make sense; in this case the whole is greater than the sum of its parts.
Remember your goal and return to it
As we considered the visual design of our product along an evolution of our brand, we returned to our goal. To “maximize clarity” we stripped away excess to begin with a white canvas. Exploring how color fit into the new world, we reserved it for highlighting key actions and punctuating moments. This manifests as purposeful bursts of energy upon completing tasks, collaborating, and celebrating the accomplishments of their teammates. “Clarity and Energy” became the visual representation of our goal.
Vibrant colors
We said goodbye to our washed out blue-grays and welcomed in an energizing new color palette. We looked at many different hues and combinations before landing on a set that communicated clear meaning, worked harmoniously, and provided the energy to express our brand.
Across the product, color is intentional and helps provide cues within the system. Coral for creation, Blue for action, green for completion.
Focused content
We increased white space so the experience of reading and writing is pleasantly focused, even with a lot of content on the page.
A new typography system helps call out important headlines with increased typographic contrast.
Empty states used to be, well… empty, but now they act as a moment to inform and delight.
Create rules for the system
To avoid an endless cycle of iteration, we created a structure for turning ideas into defined patterns.
We pinned up initial mockups, identified patterns, and pulled out each style that was “locked.” We documented these building blocks in a style guide while working to solve the remaining questions. We moved ideas forward by turning them into documentation.
Encourage cross pollination of teams
Since our ambition was to create a consistent experience across every Asana touch point, we moved all designers from their once separate areas in our building to a dedicated shared space. For example, our mobile designer found ways of pushing the new color palette that we rippled back through the web.
It took a ton of intentional collaboration to achieve a feeling of natural consistency.
Know when you’re done
It is tempting to keep striving toward perfection. But we committed to defining a state of completion and made sure that everyone took 100% responsibility for the outcome.
Tradeoffs on design are inevitable. And sometimes it felt like one thread would unravel the entire tapestry. It took a purposeful effort to consider the big picture and accept that a few details would not be as we imagined. And that’s OK!
Designing a product is an journey, and the launch date is really just another step along the way. Standing grounded in the process — rather than the outcome — helped us call it ‘done’ so that we could share our hard work with the world.
Looking back…
There were approximately a million decisions that needed to be made during this redesign. But I knew that the worst thing that could happen is to become paralyzed by fear and become incapable of any decisions at all. As long as you’re driving the project forward, you’ll learn and get closer to your ultimate goal.
In a way, every redesign is the story of its own making. Our story unfolded as the team embraced rare moments of intense collaboration and maintained focus on the ultimate goal.
We have so much more to do, so if this sounds like fun, join us!
Shoutout, love, and gratitude to our team who brought the new Asana to life and made it a journey worth remembering. ❤
