Customizing Asana to focus and improve its already lovely design

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+

6 Likes

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:

2 Likes

@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!

1 Like

@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 collaborators 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!

3 Likes

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

4 Likes

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:

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!

2 Likes

@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.

3 Likes

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!

2 Likes

Love it! Make it your own!

2 Likes

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).

I’ve made a bunch of little updates.

  • Switched to Montserrat as primary font
  • Added a fixed-width font, Source Code Pro, for tags/fields
  • Embedded links to the Google Fonts for reliable loading
  • Styled headers for sorted task lists
  • Tags and fields are now full, fixed widths with fixed-width font to aid the tabular read (SO much better)
  • Tweaked colors for improved contrast
  • Fixed some things that Asana updates “broke”
  • The proverbial “so much more”

I’m loving the way my Asana looks at this point.
My version (see also at http://cozy.es/FKmv7h ):

vs without my tweaks (see also at http://cozy.es/XDIFPD )

Install (or update), still at:

1 Like

Hi Lee, that really looks awesome. I need the teammates at the lelf column to click on to view their workload. How can I do that within your design?

Hi Dennis — the code is pretty well commented up. You should be able to just remove this bit and get that list of avatars back:

Though I just favorite the few people I need to check in on so they show up at the top of the left sidebar. Whatever works best for you!

I have made a few changes to how Asana looks and I like it much better. One thing I need help with is changing the color of the black left sidebar. I would like it white and all text and icons black. How do I do that?

1 Like

I agree. The black is jarring to me. I’d love something more simplistic.

1 Like

I love the thought behind all of this because one of my biggest pet peeves (among many) with Asana is i’s lack of basic knowledge around design, whitespace, and user experience. So my question is, why are we, the users, responsible for creating and adding these custom stylings when Asana should be making it universal for everyone from the start?