Recent UI updates to GitHub

On my first day at GitHub, I asked the crew what they wanted to me to do around here. Their response was something along the lines of “make GitHub sexy” Now that we’ve been rolling out steady UI updates for about a month, I thought I’d take some time and go over what all I’ve been working on.

I previously covered the updated dashboard repository lists and gist improvements, but I haven’t had a chance to go over the new userbox, profile pages, account pages, and dashboard headers.

The new userbox was rolled out to solve a problem we had — people with long usernames were breaking the UI, forcing links into the next line. I also took the time to reorganize the navigation and spruce up the look & feel.

The new profile pages were one of the first purely cosmetic updates to the site. You’ll notice a new style of page header being rolled out. This header does have some functional benefits — but they’re subtle. On pages that are yours, you’ll notice a slight yellow highlight. This isn’t terribly useful right now, but as we roll out new features you’ll see why I’m going this route.

I was also testing out the waters with this page. GitHub has an extremely particular and vocal audience that doesn’t represent the typical web user. I wanted to make sure that the general reaction was positive. Judging from the twitter updates and in-person feedback I’ve gotten, people seem to like the changes — so you’ll see more of this style around the site in the future.

Along with the new profile pages, we also rolled out updated account settings pages. Previously, you had to edit your profile information in-place on the profile page, but now it’s grouped with the rest of your settings.

Previously all of the billing information was crammed into a little grey box in the upper right of the account settings page. With the updated account settings page I decided to create a dedicated billing page. This page shows your plan usage in an easier to access manner and (hopefully) makes it easier to upgrade to paid accounts! 🙂

The last update we’ve rolled out are new-style dashboard headers. The reason for these aren’t entirely obvious right now — but in time they will become a lot more useful. I realize these new headers do push down the repository lists by about 60px, but it was a compromise that I decided to make to give us room for the future.

Hopefully you guys are enjoying the evolution of the GitHub interface, I’ve been having a blast watch the feedback pour in after each push.

Written by

Kyle Neath

@kneath