Customizing Asana to focus and improve its already lovely design


#1

I recently re-found userstyles.org and remembered the power of being a designer who can customize the design of the sites I use. I’ve had a too much fun over the last week or so writing up a user style for Asana that hides the stuff we don’t use (Conversations, Calendars) or that I think should have been hidden anyway (avatars per team), and downplays the less important stuff (the “mini-stories” audit trail per task, nearly everything in the site headers) while amping up the more important stuff (team names, task titles, etc.)

The result is a streamlined, easier to use and look at tool that still respects the enviable design Asana ships with.

In case you’d like to try it, just go here and click “Install with Stylish”. (Stylish is a simple Chrome/Opera extension that applies custom CSS per domain.)

And here’s a quick preview: http://cozy.es/8b6F9+


#2

Hello Lee,

Awesome! I did not know this tool - but it brings up some very nice opportunities to improve Asana and bring more fun to the people using it.
Can you please post some more screenshots describing what you changed and why - I am pretty sure this will help Community members if this is helpful for them.

Do you have a design background?

Again, really great tool and initiative and thanks for sharing :unicorn:-worthy :slight_smile:


#3

@lee what a creative project! I’m delighted to know that this was such fun to create. +1 to Sebastian’s question about what you changed and why. Looking forward to learning more!


#4

@Sebastian_Paasch @Alexis Thanks!

Overall, I really like Asana but there’s a lot in it we don’t use, and I’ve found some redundancy. For instance, we don’t use Conversations in Asana almost ever (we use Slack). And besides, project-level Conversations are accessible in the project header.

Same for the Calendar.

And I’ve never understood why the team avatars need to be shown in the sidebar. It’s not a list that changes often, and it’s not that useful anyway when really it’s followers that matter for a task (where everything happens).

So the end result is the left sidebar feels really cluttered with stuff I’m never looking for. So now in my tweaked version I have way more projects visible yet it’s far less cluttered.

Similarly, lots of things should be emphasized, mostly group headers of one kind or another:

  • Task section headers
  • Task titles
  • Project titles
  • Team names

While other things should be de-emphasized (if not omitted like the stuff mentioned above). Things like:

  • Mini-stories (the stuff in a task history that isn’t comments)
  • Supporting data per task in the task list (the custom fields, due date, assignee, etc.)
  • Ancillary links in the project list (things like “Show archived projects”)
  • All sections but “LIST” in each project
  • The header above the header
  • The Asana logo (I love Asana, but c’mon, this is for my company, not yours)

There’s also opportunity to more strongly group related things. Like the custom fields area (http://cozy.es/PWfCj).

And general subtract-until-it-breaks. Like the comment box area – it’s already in a box, we don’t need another text box inside the box. http://cozy.es/1f7Mnm

Hope that helps!


Add a Live Team Chat
#5

Lee,

I agree with you in most points, especially the mini stories mentioned above are a pain for me and I often find me deleting them :slight_smile:

@Alexis We could start a little Community-Hackathon! We ask people to change the interface of Asana with such a tool. I am pretty sure there will be brillliant ideas which can be used for the Asana product managers. And many users will find customized Asana interfaces which will suit them better :unicorn:

Best,
Sebastian


#6

Hiya!!

I love what you’ve done with the stylesheet. Is there any way we could incorporate a different font style? I prefer the original font to the bolder one that’s showing up with this stylish.

Let me know if there’s a simple thing I could switch up - I’m new to code and I looked through, but I haven’t found anything that’s the obvious thing that I should change.

Thanks so much :slight_smile:


#7

Hey Vive –

Surely… look for font-weight in the CSS. Just delete or comment out those lines and you’ll be in business.

You might also want to remove any font-size declarations.

Enjoy!


Unreadable font
#8

@lee

This is amaziiiiiing! If I have time, I would love and try tweaking some parts of the UI. And yes, I do agree with most of your points with some parts being redundant.


#9

After recently trying out many project management apps I can say that I really like the graphic design of Asana.

Nonetheless, I was excited to come across this post from @lee since, after recently migrating to an “Organization” account, the busyness of the left side panel has been bugging me. Since I don’t currently have any issues with the fonts and the layouts of the headers, I made a modification of lee’s userstyles.org style that keeps just his pared-down left side panel, as well as the fading of the Task “mini-stories” until one hovers over them. I added it to the Asana collection userstyles.org, fwiw:

Thanks, lee!


#10

Love it! Make it your own!


#11

I built on this too by using Avenir Next font (beautiful!), and removing the max-width on custom fields in Kanban view so they are full width (no more truncation).