Asana project settings

Make project settings consistent across pages,
Make permissions settings easily discoverable.

Asana project settings — case study hero

Project Context

FY25 Roadmap

Sharing & Permission team

My Role

Product Designer

(UX + PM)

Methodologies

Data science reports

Product specification

Wireframes

Prototype

Usability Research

Overview

Project settings on different pages in Asana are currently scattered, making it hard for non-expert users to find them. This results in users being frustrated and confused, which can lead to less work being put in Asana.

We believe that simplifying settings on project, portfolio, goals, and dashboard pages into an intuitive framework will make our users happier and increase usage of Asana.

Before and after: scattered project settings consolidated into one intuitive framework

Problem statement

Problem exploration — project settings context 1
Problem exploration — project settings context 2
Problem exploration — project settings context 3

Design Goals

The new settings framework should be:

Scalable For New Settings

Able to accommodate new settings as features expand

Clarity & Consistency

Consistent framework of control settings across work graph objects

Predictability

Place relevant settings to be proximate to each other

Final design

Preserve the familiar entry points for each setting. Ensure that each modal serves a distinct function.

Final design: before and after comparison of consolidated project settings and share modals in Asana

Project action menu

Based on data science reports, I consolidated multiple settings into “Edit project settings”, placed frequently used actions higher and grouped similar actions together.

The proposed menu is less cluttered and easier for users to access desired actions.

Before and after comparison of the consolidated project action menu in Asana

Project settings

A modal with side nav offers scalability for settings, accommodating the expanding needs of enterprise users. Top search bar enables quick access to desired settings.

Before and after: unified project settings modal with sidebar navigation and search

Share settings

Move the permission settings under a clear tab rather than an ambiguous icon.

Before and after: Share dialog with Share, Permissions, and Notifications tabs replacing gear icon and scattered controls

Who are our users?

How do they interact with Asana project today?

Marketing Operator persona: how users interact with Asana project templates and settings

Competitor Overview

I analyzed the user experience of four competitors to understand their settings' frameworks, identifying the strengths, weaknesses, and potential opportunities in their approaches.

Slack: competitor settings UX — screenshots and analysis vs Asana

Define the solutions

To re-organize the currently scattered settings in Asana project, I started with information architecture, re-organized relevant settings to be on the same surface. Then I started very broad concept explorations, from proposing incremental changes to radical innovation.

Solution spectrum: from incremental hubs to radical AI-assisted settings concepts
Tab entry points for project settings, share, and customize in Asana
3 hubs / 3 entry points: Settings sidebar, Share modal, and Customize sidebar focused on main entry points

🟢 Pro: Distinct entry points for distinct modals

Entry points for duo hubs / two entry points concept in Asana
Duo hubs solution: two entry points with focused modals and flows

⭕ Con: Downplay the hierarchy of Share modal

Entry points for single modal / consolidated settings concept in Asana
Single modal solution: all-in-one settings with shared entry points

⭕ Con: Downplay the hierarchy of Share modal and Customize flyout

Information Architecture

At the end of my solution explorations, the Project icon, Project action menu, Share button, and Customize button continue to serve as the 4 entry points for all settings on the project page. Especially Share and Customize have established a mental model for Asana users and are essential value propositions and upsell features that must remain prominent.

Information architecture: four entry points and settings hierarchy diagrams with pros and cons

2 Directions For Settings Modal

These 2 treatments then went through usability test.

Two directions for project settings: flyout versus modal concepts with pros and cons

Usability Test

Usability tests for 15 users conducted on 8/14/24

I conducted an unmoderated usability test of the high-fidelity prototype with the assistance of the UXR team, involving a randomly selected group of 15 project managers.

Usability test results: participant heatmap for prototype A, B, and C across Customize, Share, and project settings observations

Usability Test Insight #1

Usability insight 1: supplementary figure for project title and project details entry

Users click the project title to change project details because they are less likely to navigate through multiple menu layers to find them.

⭕ Behaviors:
• 8 out of 15 users clicked project title for changing project details.
• 7 out of 15 users clicked action menu for editing project detail but 2 of them didn't think that project detail is under project stetings, so they missed it
🌟 Implications:
• User would prefer to have a entry point to project settings in project title.
• User are less likely to navigate through multiple menu layers to find what they need.

Usability insight: behaviors around project title versus action menu, and proposed project settings entry from Edit project settings to Project details

Usability Test Insight #2

Usability insight 3: supplementary figure for custom fields and Customize permissions

Don't know where to change permission inside share modal

⭕ Behaviors:
• 9 out of 15 users have clicked into share modal but have missed permission setting.
• They often will click on access setting to check, and some of them will convince themselves that this is where permission goes.
🌟 Implications:
• Permission setting needs to have obvious CTA (ex. text), instead of a grey unambiguous icon.
• If users cannot locate the permission settings, they might mistakenly believe they have configured it within the access settings, which can lead to mistakes.

Usability insight 2: sticky-note feedback, behaviors and implications, and Today versus Proposed Share modal with Share, Permissions, and Notifications tabs

Usability Test Insight #3

Usability insight 3: supplementary figure for custom fields and Customize permissions

Don't know editing custom fields is under 'Customize' button, and can't find where the permission setting for it is at

⭕ Behaviors:
• 12 out of 15 users clicked the fields on project surface as their first reaction, and expect to edit/delete the field in the dropdown menu.
• Eventually, they are likely to find the customization flyout through the 'custom fields' hint.
• 5 out of 15 people missed the permission setting for custom field. Users see the setting subtitle 'workflow & appearance,' they tend to overlook it and the text below mentioning 'custom fields.'
🌟 Implications:
• The script 'Customize' doesn't say much about what it is for. It's Asana-specific term rather than universal.
• A centralized button for fields, rules and templates might not be ideal. When users want to edit a field, they usually look for options near the field itself rather than a distant 'Customize' button.
• We need to revise the script ,'workflow & appearance' in permissions, to make it related to 'customize.'

Usability insight 3: sticky notes, behaviors, implications, and proposed Project settings with Customize and Fields

Takeaways

Navigate my way through constraints

I initially believed I could complete this project within my internship by following the playbook. However, I encountered several unexpected delays and back-and-forths. The playbook is designed to align projects with broader company goals and strategies while incorporating multiple perspectives for a thorough review. Despite this, everyone has their own priorities, and understanding and navigating these has become crucial. Developing the ability to align with my work partners' priorities while motivating them to focus on mine is a skill I want to further refine.

Resources are finite, prioritize and strategize

Resources like engineering hours, time and budget are limited. Even if we're passionate about a feature, the team must prioritize the most critical ones or break it into multiple releases. My project is an improvement to a larger project, but the team lacks the capacity to implement it soon due to other important user stories in the pipeline. Therefore, we always need to prioritize and strategize what and when to implement.

Design is a part of my job, but not all of it

I realized that design is fundamentally a leadership role. It involves working with cross-functional teams to gather interests and push towards the company's goals. While design is a significant part of my job, it is not all of it—collaborating with others is equally important.