The New Sourcetree Design Is Horrendous (and broken)

When it comes to GIT clients, you can’t really fault Sourcetree by Atlassian. It handles the basics of Git, allows you to visually merge/rebase your repositories, handle conflicts like a boss and more.

But we need to talk about the redesign they just launched across both Windows and Mac OS platforms in version 1.8.1.

Given the previous design of Sourcetree was not exactly the prettiest application out there or modern looking, usability wise it definitely ticked all of the boxes for me personally. What happened?

Falling into the trap of everything must be flat, WHY CAN’T WE MAKE IT FLATTER trend of removing shape and definition from interfaces, Sourcetree finds itself entering a bad neighbourhood with new shoes on.

I realise I have a choice and I could use the command line (which I do) I work on multiple repositories and the convenience of being able to switch between them is reason enough to use Sourcetree, especially when it comes to merge conflicts.

Also worth noting that the design for OS X actually does not look bad. If you’re fortunate enough to be a Mac user, you get a nice polished looking app with a few UI quirks, still a dumpster fire on wheels, but better than the Windows version.

The Windows version is like the ugly step sister from a fairytale who wants to go to the prom, but nobody wants to take her.

Iconography

The latest version of Sourcetree sees the icons adopt this pseudo pencil drawn look where every icon looks thin and transparent. This in itself would not be so bad if it weren’t for the fact the background is grey, so you get these light grey outlines on a grey background. You can see them fine, but they get lost. The text is a dark grey at least.

Current version

Previous version

Yes, the old version looks like an early 2000’s software application, but at least it was usable. It is the simple things. The biggest for me is the push/pull notification icons.

Because the new icons lack any colour, it isn’t immediately apparent what is what. It is a minor nitpick, but the first thing that I noticed when I opened up the new version.

In the older version the colour and definition of the icons was an important part for me moving around the application, not things are just confusing. Not impossible, just confusing.

Typography

While typography has only been tweaked a little bit, to add to the confusion there is now a lack of true visual separation and hierarchy. Take for example the left hand branch pane which shows you your branches, etc.

Take a look what what one of my repositories looks like with one branch. Pay close attention to the active branch styling which is just bold text. Now look at the heading above it “Branches”

This just messes with my head so much. When I look at the following, my eyes don’t know where to focus. Even though the branch name text is smaller, because it lacks any kind of indent which gives it visual hierarchy my eyes focus on “Branches” or “Remotes” before finding their way to the branch.

Don’t get me started on the iconography in use here. The same washed out, colourless and thin icons make an appearance. The proportions of the icons also look way too big, especially the file status icon which looks like a giant monitor on a little stand.

Tabs

Yet another misstep in the design bastardisation of Sourcetree. The new “flat” tabs just look horrible. Maybe I am not the majority here, but it is not uncommon to have 2 or more repository tabs.

The previous design had visually distinct and separate tabs so your eyes could easily see what tab was what. With the new design they threw in their horrible dark blue branch colour, light font weight text and a pipe to separate the tabs.

Then it gets worse. The tabs have unproportionate padding on them so the pip rubs up right against the side of the button. The close “X” icon seems way too big so it throws off the vertical alignment of the button text slightly (only obvious on an active tab).

When the tab is not active, you see this stray looking orphan pipe sitting over to the right of the button. They even put a pipe separator on the last button which just looks weird (presumably to show the end of the tab bounds).

Conclusion

This is a classic case of some overzealous designers who wanted to pursue a design trend and execute it poorly.

Were the designers given only a couple of days to work on a redesign or was this something they planned for months in advance? It looks like an early stage development prototype.

I could literally keep going on, dissecting and performing an autopsy on Sourcetree, but I think I pointed out the obvious issues with the latest design. It isn’t even just the UI issues, for the first time in a very long time Sourcetree crashes for me either randomly or during certain tasks like merging.

I regret updating to 1.8.1. Until they fix the UI issues, especially in the Windows version, I guess I will explore alternatives and make do with the command line.

I can forgive the newly introduced crashing bugs if they revert that UI and then fix the bugs. You know a UI is really broken when bugs that cause the app to completely crash bother you less.

As per the official Tweet from Sourcetree themselves, you can download the older versions. The links are provided as follows for your convenience: OS X – https://t.co/kkmVfvKMxA and Windows – https://t.co/j0tSDPZEmC

It seems Atlassian acknowledge the issues themselves openly on Twitter, but this is unacceptable. Considering how widely used Sourcetree is and Atlassian’s reputation for being the foundation of modern development workflow, it just is not acceptable. Who tested this? Who designed this? Who approved this for release?