In September 2014 the Asana product and design teams gathered to create a vision for "the new Asana".
Goals: • Make the product more approachable • Maximize clarity • Separate the company from competitors • Express the character of Asana
As a Senior Product Designer I paired with the Head of Product and Co-Founder, Justin Rosenstein. We sat together and discussed about our goals, finding ways to turn them into design patterns.
After sketching, I created these concepts and we reviewed them with the larger Design and Product teams. These concepts were the some of the first steps of the Asana Redesign that launched September 30, 2016. Many of these concepts shipped to users much earlier.
One of my first projects at Asana was the Asana Dashboards feature.
Reporting was a highly requested feature from users, and user research indicated that users would benefit from a visual representation of the status of their projects. Team Leads wanted to be able to quickly check that everything was on track.
Goals: • Be able to scan project status at a glance • Visualize progress at a glance • Choose the most relevant projects • Ease the communication between Team Leads and Project Leads
Asana Projects already had a Progress tab, which included a burn-up chart. In order to maximize consistency and ship quickly we used that chart as a starting point.
As a Senior Product Designer I worked with the PM to define what our users needed. We discovered through iteration and user research, that users wanted to see as many projects as possible on their screen, rather than more information about each project. We balanced this by surfacing a project summary: the project's Status Color, the first lines of the last Status Update, and at-a-glance data like Project Due Date and Project Owner.
Dashboards was launched as a premium feature, and quickly became one of the most successful launches and a top revenue driver for Asana.
Custom Fields on Boards
Custom Fields in Asana allow you to add custom metadata to tasks in your projects.
Boards view (also known as kanban) is a condensed view of cards. This view is really poweful for agile frameworks like SCRUM. So we needed to include the user-generated metadata on the cards.
Goals: • Display Custom Fields on boards • Keep the noise level to a minimum • Balance information-density • Don’t break user flows
As a Senior Product Designer I paired with the PM to define what the users really needed. We explored and tested to see if labels were necessary, but they turned out to add more confusion than clarity on empty fields. We also decided not to pursue editable fields on cards, because they would interfere with the existing user flows, since the user priority in this view is to scan for information and move the cards around; the edit flow happens when the user opens the details not in the general view.
In order to display more content and keep the same number of cards per view we had to redesign the cards visually. Minimal typography and margins adjusted turned into a view that included more information than the original, without losing the much-needed whitespace.