UI change - Project tabs/buttons in tasks pushed down


My task design is super strange today. Is that an A/B testing?

I can’t see my Tags button anymore, and Task title is over the assignment and date selection. Every time I try to edit the title I click wrong on assign or due date. This is super counter intuitive because they are different fields and the input field is the middle of a lot of buttons.

Besides that, task title and description should be closer because they are both typing inputs. And in the end I had to add project, which should be a priority. Sorry but this is pretty bad.



I had to search also, found the tasks under the “…” menu. Powerusers type the t-key while holding TAB, this will open the tag field.


Hi John, I know they are there but the new UI position is not helping and turning the create task process more difficult.



Yeah, I use the “Tag” button regularly, we don’t use the “Like” button in our org ever.

Asana needs to allow us to re-order those hot-buttons if they’re going to move them on us. (Maybe there is a way but I can’t figure it out.)


The new layout also increases the distance between clicking a task done and the name of the task. This requires more eye movement or mouse work.

Also, in project management the WHO assigned to the task is more important so it should be up top. Especially since in the two panel view you can see the name of the task at a glance.

The old layout was more optimized by keeping task completion status, assignee, and date details all tight up at the top of the panel. It doesn’t take much to assign, click complete, or set a due date.




This is definitely an undesirable change. There is a lengthy and passionate thread about it here: Unhelpful UI change - Project tabs/buttons in tasks pushed down


The “Tab + P” hotkey remains buggy for me, and only works (when it does) if a task is not already in another project. For adding a task to a second or third project, the hotkey function only highlights the existing project, and then you still have to select the + to get out of there and add an additional project.


Thanks Tom_Bamford and Chris_Sylvester ! I ended up using the code you posted, Chris, and used StyleBot (since Stylish didn’t seem to work well for it), and it works like a charm! I love how the Projects are now sticky at the top, no matter where I scroll. Thanks so much for saving my work flow!! :smiley:


Hello everyone!

I have noticed that the list of projects the task belongs to – was moved below the task description. It was on the top, under the task name, until recently…

I see this as an unfortunate UI step because:

  • we have tasks that belong to more than two projects
  • the task’s list item (in the list of tasks of a project) shows only two project (on the right side)

Now we need to scroll down EVERY TIME we want to see in which projects the task is. And as most of the tasks have description, we need to scroll a lot :frowning:

Dear Asana team… would you please reconsider? This is really a inconvenient UI flow. And I would think that the “project” is superior to “task description” as an information about a task.



@Susanna wow thank you for mentioning Stylebot! I’m a novice and couldn’t get Stylish working either, but Stylebot is working perfectly. Thanks @Chris_Sylvester for the code.


You’re welcome @Susanna
Glad it’s working for you :slight_smile:


I just have a slight addition to the CSS fixes. I didn’t really like how big the Mark Complete and Completed part was, so I modified that as well. This seems to work pretty well for me. Additionally, there’s a bit of overlap with some of the icons and the due date, but it’s tolerable for me since I never use those icons. I haven’t yet tested how this all looks when a task is added to multiple projects, but for one project at a time it seems to work really well. Here’s what it looks like:

.TaskPaneAssigneeDueDateRowStructure { position: absolute; top:9px; left:90px; border-bottom: none; z-index:200; }
.SingleTaskPaneToolbarEasyCompletion { position: sticky; top: 0px; z-index: 100; background-color: #ffffff; padding-left: 15px; }
.MessageBanner { display: none; }
.SingleTaskPaneBanners.SingleTaskPane-banners { height:40px; }
.SingleTaskPane-projects--belowDescription.SingleTaskPane-projects.TaskProjects { position:absolute; top:50px; background-color: #ffffff; margin-top:0px; padding-top:10px; }
.TaskProjectToken { float:left; }
div.Button.Button--small.Button--secondary.CompletionButton, .CompletionButton.CompletionButton--isCompleted:not(.Button--disabled) { width: 50px; font-size: 0px; padding: 0; }
svg.Icon.CheckIcon.CompletionButton-checkIcon { margin-right: 0px; }
div.TaskPaneAssigneeDueDateRowStructure-dueDate { min-width: 150px; }

Also, to add to the primary part of this discussion. My team is completely against these changes. Which project a task belongs to is exceptionally important for our team, especially as we use sections of a project as workflow stages. Attachments, task link, and the task like button are completely useless. A giant mark complete button isn’t useful beyond the initial onboarding stage. There are many things that could be done to improve Asana. These latest interface changes are not among them.

Task: Project and Section Setting [UX}

Following up on ceturley’s comment about “how many more are quietly disliking it in the background,” I want to add that this is my very first time coming to the Asana Community and making a comment. I’m one of those people who makes (possibly excessive) use of emailing x@… (every email I send for work is BCC:ed to Asana, and then I delete when they aren’t actual tasks), which means that the task description can be VERY long. Scrolling down to add the project is really a hassle, the longer the email. Thanks for taking all of our comments into consideration!


Mine doesn’t look like that… must be beta testing this? Seems like they would notify users of this or maybe have a signup for people to test this, instead of force pushing it on others.

Here’s mine as of 04/10/2018 (regardless of which way they go… Please get rid of the annoyingly huge “make public bar”)


Hello Chris,

Thank you so much for posting this code!

I have a couple issues with how it shows in my screen and I wanted to ask for your help as I am a complete layman with respect to coding;

  1. Stylish shows image and image

  2. In Asana image when no due date is set, and

  3. image when a due date is set.

As your screen capture shows no such problem, I am wondering if its something specific to my Chrome. Can you help me out?

Even like this, it’s a HUGE improvement, I also noticed the yellow banner is gone… :slight_smile:

Thanks again for posting this and for any help you can provide me.



@Alexis, could you please give us an update about this problem. It’s been almost een month ago and nothing has been changed so far. As you can see, people are writing their own code now to return to the former lay-out (sort of…). I find that a bad signal. So, please let us know what Asana is doing about the problems we encounter.


@alexis If your researchers are convinced that the Projects should stay where they are now why not add an option (hack) for the few “crazy ones” around here :wink: to put it back up top? (in my world that would not be a big thing to realize) thanks for considering


This is crazy to see all the feedback above. Wow 100+ comments, 50+ votes, and wild workarounds. Interesting. Also, pretty cool to see the community engagement on it and socialize with other users deeply concerned by not just the UI change, but the way in which it was handled. It’s especially wild considering the way that Asana used to release new features or layout (either by Hack opt-in or major roadmap Announcement).

We just held our monthly staff meeting at our headquarters. One question asked of management was: “Why is Asana removing projects and tags?” We tried to explain the reasons we learned from above, but our team seems rather skeptical to say the least. Lots of folks keep bugging our internal IT to find what task is in what project. They don’t get it.

Seems pretty clear to our side that this should have been a Hack to hide projects & tags below the description vs. a massive redesign roll-out and un-announced.

We hope that Asana leadership and engineering is reflecting on the passionate feedback above and considering restoring projects and tags above the description field.


I would like to echo the comments from Michael above. It is interesting to see how many others clearly find this change frustrating. All of us in my organisation are still struggling with the change and would be so keen to revert back.

Thanks to people like Chris (earlier) who have provided CSS code to hack the display (although it didn’t quite work for me). To me the fact that people have gone to the lengths of writing their own code to revert the changes really indicates how much of an issue it is, and it would be so much better if Asana themselves could provide a more permanent and ‘official’ solution.