My role: lead designer
Our team: 2 PMs, 7 designers, 1 prototyper, 12 engineers, 3 researchers
I lead the redesign of the Asana product and brand, orchestrating a collaborative design process within our team. I paired with product management and engineering partners to phase the work over the course of a year. I partnered with marketing, PR, user operations, sales, and other teams across the company for a successful rollout strategy and launch.
During this redesign, we restructured the underlying foundation of our web and mobile product, aiming to make it easier for new customers and invited teammates to get started and understand basic concepts. At the same time, we overhauled the Asana brand and introduced an entirely new visual language.
I wrote a Medium post to share process details and lessons learned along the way. I also gave a talk to provide a case study for designers and PMs in the industry.
The launch was met with critical acclaim, increased signups, and a Material Design award from Google for superior brand integration of the Asana Android app.
The first piece of the product redesign that we tackled was improved navigation and page layout. Our goal was to maximize clarity for new and invited users (mostly "Routine-ers") by highlighting key actions and improving hierarchy, without sacrificing the power that many power users (the "Planners") loved.
We set out to test the assumption that maximizing clarity for the new users and "routine-ers" will lead to increased collaboration and adoption.
We identified these user-facing problems:
• confusion around how to get started
• key actions hidden
• looked and felt overly complex
There were also some opportunities to improve internal process and extensibility of our framework:
• not an extensible grid system
• components built one-off
If you were invited into an existing project, you would have been greeted with an overwhelming array of information without clarity on how to add a task or comment.
We started with a quick sprint to prototype a new navigational concept – a top bar that would bring key actions to the forefront.
After we validated those assumptions, we kept going and explored a new page layout with a full width header and flexible card layout.
The header highlighted key project info and actions.
The new layout better accommodated current views and paved the way for future features like "kan ban" boards, image galleries, etc.