Introducing the Redesigned Bitbucket
By Justen Stepka, Product Manager on October 9, 2012
It’s a big day here at Bitbucket HQ. The Bitbucket team is unveiling a brand new, redesigned Bitbucket. Our goal for this huge release was to rethink and rebuild the Bitbucket web experience from the ground up. Today, we’re are excited to introduce the new Bitbucket – faster, easier and more beautiful than ever.
Meet the New UI
Every page has been optimized for speed, clarity and discoverability. We’ve rethought the way repositories are presented, helping you find the most important information. We’ve streamlined the way you navigate the site, and we’ve brought the actions that you most often take front and center. Simply put, we’ve aimed to give you the ultimate experience with Git and Mercurial. Meet the new Bitbucket.
Restructured Repository Header
The new repository header makes it lightning fast to navigate source, commits and pull requests.
We removed clutter and grouped key commands like cloning and forking together. Moreover, we made actionable information such as the number of open pull requests available at a glance.
Repository Overview
The newly designed repository landing page features the Activity Stream, keeping teams up-to-date on recent commits, pull requests and more.
The new meta-data panel to the right of the activity stream allows users to quickly filter and search through branches, tags, forks, and followers. Additional details such as the clone URL, repo type, and access level are easy to find.
Cloning
From any repository page, the clone URL is instantly accessible for copy and paste. Whether you’re browsing source or commenting on a pull request, just click on the ‘Clone’ button and you’re set.
Mac users have the added bonus of configuring their repository locally on our free Git and Mercurial client, SourceTree, with just one click.
Source Browser
The source browser has been completely recreated. Filter your view by branches or tags to learn more about the features your developers are working on.
A new feature to the source browser is the ability to diff between any two commits. Simply select any two commits, and Bitbucket will render a unified diff with the option to expand context and explore even more source code.
You can even open up a side-by-side diff and view file changes IDE-style.
Light-weight Code Review
The re-imagined UI was just the beginning. A huge part of developing on Bitbucket is to make it easier for teams to collaborate around code with pull requests. Not only are pull requests redesigned, we have added some more horsepower to your code collaboration with in-line comments and merge approval. This gives you a light-weight code review process built right into your development workflow.
In-line Comments
A huge request from our users was the need to comment inline (and in context) on code. There are now two options to provide feedback, ask questions, and have discussions around your code – comment on any line of code in a pull request or comment on individual commits.
When someone leaves a comment on a changeset or pull requests you’re participating in, you’ll receive an email notification with the code comment and a link to respond.
Participants and Approvers
Anyone who has commented on a pull request will show up as a participant. As you conduct your review and submit changes, you can “approve” the pull request to signal to your team that you’re happy with what you see. Bitbucket will then display a check next to your avatar letting everyone know that you like what you see.
Pull Requests
Compare View and Pull Requests have been designed to complement each other. Quickly compare two branches or a fork and submit a pull request.
“And one more thing…”
There are dozens of other small improvements all over Bitbucket that make it even better to use. These include:
- Markdown support for any place that you can leave comments, such as pull requests or issues
- Default repository avatars for repositories that have programming languages set
- Quick filters throughout the site
- Faster site performance – the user dashboard is now up-to five times faster
- Simpler administration and account pages
Lastly, thank you for being a Bitbucket user
We’ve agonized over every detail of the new Bitbucket, and we know that you’re going to love it. Please let us know what you think, and help us spread the word. Our never ending goal is to make Bitbucket even better. Thanks to everyone who uses Bitbucket and to those who provide feedback.
If you haven’t checked us out lately or are new to our service, Bitbucket has had a year of record growth. In the last year, we’ve added Git support, introduced Bitbucket Teams, and tightly integrated with JIRA. Sign up and check it out! As always, we offer free unlimited private repositories for up to 5 collaborators.
Cheers, The Bitbucketeers
180 Comments
Nice update there!
Much better! This is a great step forward.
Looks good 🙂
Awesome!! Thanks.
Looks awesome, congratulations!
Nicely done!
OMG O_O I just love every little detail of it!
Great news! I like the new design. Bravo.
Love new design and features. Thank you!
Nice Work! Congrats!
Bravo!
Love the new layout! Just two minor issues – the repo icon uploader should say that it only accepts jpeg files, and I’d like to see the repo icons show up in the newsfeed – say, in a third column of icons!
awesome!
Or maybe the repo icons could appear in place of the grayscale icons in the left column, since the grayscale icons are rather redundant given the fact that the colorful mini-icons beneath convey the same information!
Good Work!
The missing inline comments were the only thing that kept us from really using bitbucket.
Thanksalot!
Congratulations! Looks amazing!
Really like the new design 🙂 I have one big problem with it, though: My Laptop sticker and T-shirt are now hopelessly obsolete … Could you please fix that? ^_^
We’ll be launching a new t-shirt store in three weeks. A few new Bitbucket t-shirts and stickers will be forthcoming.
Cheers, Justen
Bitbucket product manager
Nice! But the Chinese words look not so good. Maybe you can try using “Microsoft Yahei” font for Chinese language repositories: font-family: [english fonts here], ‘Microsoft Yahei’, sans-serif;
The new UI is too good! Thanks BitBucket! Love it!
Congratulations and thank you! Code review features are amazing 🙂
Looks amazing! Congratulations guys!
Amazing! good job!!
Wow – beautiful looking. Way to go!
I’m not seeing anything regarding spooning or Pair Programming… 🙂
you should have included an online editor!
Open wide Github
BOOM! There is no icon to distinguish private repo from a public repo! I have like 15 repos, u expect me to click each one, one-by-one ? BAD !
There’s a lock in the bottom-left with a lock for private projects I think.
No, there isn’t.
The lock is there on the bottom left of the repository avatar. At least there is one for the java avatar.
Maybe Atlassian fixed it that quickly?
He means the repository overview on the main site.
“BOOM!”?
Seriously?
Thanks for the feedback. We went back and forth on that during implementation and it’s something we’re going to fix now that we have some user feedback. We’re iterating on a design now and will roll out a fix soon as we’re happy with some user testing.
To those in the thread, the lock icon is missing on the repo filter listing on user’s dashboard and profile page.
Thanks for your patience!
Justen, Bitbucket product manager
It’s looks great! Congratulations!
Congratulations! A very well done work!
looks great!
Don’t forget to minify your CSS! – Also happy to see you’ve started upgrading to a usable markdown 😛 – Looking forward to the addition of an Edit button to the source-view screens also.
Really? No one is going to say it?
I like the little changes, the
usability improvements… but right now, if I were to recommend Bitbucket
to a friend, the /very/ first thing they would say to me is “why is it
trying to be Facebook”. The first impression smacks of desperation.
It’s not trying to be Facebook, it’s bringing the UI inline with the latest versions JIRA and Confluence, presumably to create a more seamless user experience when using all the products together.
Wonderful changes so far. I’m so used to having some kind of markup in comments now that I’m constantly missing it on other sites.
The code review features are exactly what I’ve been waiting for. Cheers for the update.
Cool.. love the new UI! thanks 🙂
Looks great. It’s a rare treat to read about a redesign and then being pleasantly surprised. Congrats Bitbucket.
Great work guys!
Re-designed with bootstrap?
Actually, we made our own guidelines: https://developer.atlassian.com/design/
Thanks!
no bootstrap… design is not responsive to screen-size.
Great work!
you guys rocks !!
Nice, there’s some really good stuff in there.
I love the new design. I love free private repos. I love you, Bitbucket<3
Great work! So sexy 🙂 I like it!
Something that I’d like to see in the next redesign though is removal of unnecessary visual elements. For example the icon to the left of each log item in recent activity- people aren’t usually going to be visually scanning for a different type of activity when viewing the activity log. Similarly, the summary of the repo off to the right in the recent activity page is unnecessary.
Where did the “View source at revision” feature go? It was incredibly useful to be able to see the entire source code of a project as it existed at a particular revision number. This is particularly important if a file has since been deleted, as otherwise it’s very difficult to track that missing file down.
It isn’t terribly discoverable, but you can add the revision hash to the view source url, like so: https://bitbucket.org/pypy/pypy/src/9fb4be9
You can still view source at a particular branch or tag via the branch dropdown in the top left hand corner.
You can also view a file at a particular revision using the the commit button on the file view. Just click on the button and a dropdown will appear with a list of commits that changed the file.
Good point about being able to see a entire directory view at a revision though, we’ll take a look into that.
Yep! You did it. Bitbucket is becoming a wonderful tool. Thanks!
good experience !!
+1 for the In-line comments
Really love this new design. 🙂
Kudos on the repo filter; that restores some sanity. Now please let us put repos into folders or tag them somehow.
Amazing great work
So bad, now with the inline comments, I have no more arguments against bitbucket :p
Good job !
I like the new interface, but can you bring back the lock next to the repository name in the dashboard that signified it is private? (or at least allow it to be toggled on/off) It seems useless, but it was actually quite helpful.
Short version, yes. You can check out my previous reply in a different thread.
Justen, Bitbucket product manager
Thanks, a great new look, awesome feel and I really love some of these new feature…well done team awesome @bitbucket 😉
Sweet!
Woah good stuff! Loving the new UI. This makes me want to use Bitbucket even more, as a repo for a MUD project I’m going to resurrect. Cheers!
The repo list/filter of a user’s profile doesn’t show the lock icon for private repos, but once you click on a specific repo you will see the lock icon. Not sure if this is anything different that before as I just created my account last week and didn’t noticed the lock icon before the changes.
yeah, this looks awesome 🙂
I will have to use Bitbucket more often, these are beneficial changes for all users of the service.
Now I have to upload a new image to 15+ projects, because old image wasn’t made for circle layout and image size was apparently smaller in previous version. Imagine if someone had 100 or more projects and all of them had images…
+1 Please don’t crop images to circles that weren’t designed to be cropped to circles. All my project icons look crappy now!
Nice work.
Loving the project’s icon
Amazing work! This will be a great step forward.
I <3 You Bitbucket
Not my cup of tea. The new features are great, but the Atlasian-style design is too plain, monotonous, impersonal. Loved the silver theme, had personality, I can’t say that this cross-breed of we’re-trying-to-be-both-modern-and-main-stream strikes with me. Sort of HTML5-ish Facethub.
The round icons aren’t that clever. The details are lost and upscaled.
Sorry. Humans don’t like changes. It will take me a while.
PS: WikiCreole wasn’t that bad. Once you get to it.
Good work!
Congratulations on the new design! It’s a lot better than the previous ! Keep up the great work you are doing !
I love it!
Atlassian, I love you!
I like)))
I like the new design and I like the speed improvements. Thanks for the great work.
The only thing I can’t seem to find is how to browse all the public repose that are on bitbucket. Any ideas?
Thanks for the feedback.
We’re iterating on a new explore page and will post something in the near term.
Cheers, Justen
Bitbucket product manager
Good work!
The repository overview shows the readme first before the latest commits. If the readme is long it hides the latest commits, which sucks for an overview! I mean, as a contributor I want the commits to show up first. Luckily I can set the landing page to the commits but it would be better to improve the overview. For instance you could only display the first 10 lines of the readme and make it expandable.
Congrats to you guys! Looks awesome!
I use github mainly, but I must say that this change is amazing! In particular I already love these two features:
* The ability to automatically close a branch after the pull request is merged
* The ability to “approve” a PR, as a participant and then one can see all people who approved
Which github does not have. And I like the new look and feel. I hope you will introduce more innovation of this type. I am constantly deleting the merged branch by hand at github, but I didn’t realize until I saw this feature at bitbucket, that this is what I want.
Very nice! Much better.
I have a wish: make it easier to discover other people’s repositories and customize a news feed based on them. Why? Because hackers’ fix is writing code and getting news on other people writing code!
Wonderful, I like it! This site more faster than before,and of course I love to we can add comments in each line of code. Its awesome! Congratulations!
Regarding the free academic licensing, is it also free for non-academic University staff? For example a University’s IT Department?
Yes.
Really good work!
Wonderful! Congratulations, guys! Mercurial deserves such a great service. Keep up the good work, so that we who prefer Mercurial over Git can stay with Bitbucket because it rocks!
You all rock! I switched from Github and I must say, I am very happy!
Awesome! Great work, congratulations! Loved the new UI.
Awesome. Great job!
I’m sorry My Icon was not designed to be round, (most icons aren’t) how do I fix?
Congrats! Great work
New design is great! 🙂 But I’ll miss heart icons, new starts are ok, but hearts were the one little thing why i falled in love with bitbucket.
AWESOME!
Awesome! Thanks guys for your work.
Guys this is amazing. I love it. The design is great and you’ve created a far more distinct look than previously. Congratulations,
Very well done guys! Nice focus, feels very lightweight. Great Job!
I don’t think it’s so fast. Try a repository such as
https://bitbucket.org/pypy/pypy
There’s not much on screen but the pre-renderng of branches, followers etc makes the page load very slowly.
Where’s the ajax?
Well done! used twitter bootstrap? always loved bitbucket for their free private repo 🙂 keep up the good work!
Looks great! but I can’t see on the dashboard any of the repositories that are shared with me anymore. Where can I find them?
Is visualization of repository statistics something that’s on your roadmap? Similar to Github’s?
Love the new design but I’ve noticed that it has become harder to browse/discover other public repos/projects. From what I can tell, the old _explore/browse_ page is now _search-with-no-parameters-then-filter_.
Is this how it’s going to be from now on or am I just not using it right?
I only take one issue with this otherwise excellent redesign.
No more explore. Why can I no longer easily explore public repo’s?
I agree. I came here looking for instructions how to find the explore section again. How are you supposed to find unknown projects if you can’t browse the list of projects?
good job, i like new ui
Looks good – but is it possible to add filters to the News Feed? Specifically mine’s clogged up with ‘began following’/’stopped following’ which I don’t care about (alternatively some way to roll multiple entries into one?)
(also is there a more appropriate place to suggest features?)
awesome indeed, quite fast! 🙂 thanks, guys!
Nice work. Thank you.
Love it!
Wow that’s so fucking ugly! It’s all about more gimmicks and LESS information! Not even the repo URL is shown in the header – you always have to navigate to the overview tab.
BIG FAIL!!!
It’s bad that you can’t view last commit info for directories at source view.
Just a few days ago I recommended to our team that we use Bitbucket because it was possible to put a message and a link on the issue tracker main page. That way, we could direct users (not developers) to the issue tracker from our main website, and have a link there directly back to the main website so they would be less likely to get lost in the repository. This is an important feature for users who are not developers – they don’t care about anything else in the repository but how to submit an issue.
Today I look at the new UI and what do I see? No message on the issue tracker main page. Boy I’m glad I have time to withdraw my recommendation of Bitbucket before we went to deployment.
cool improvements! nothing beats the free private repos.
Sweet! Lookin’ good. I’ve just recently started using bitbucket and my only real complaint was “github has a cooler look” 😉 well, I guess I can’t complain anymore.
keep up the awesome work guys!
cheers,
john
Okay did anybody actually TEST this abortion before it went live? Clicks on several comboboxes like profile, repositories, protocol type etc. are always handled twice – on mouse down and mouse up – immediately closing the combobox when the mouse button is released. At least on Firefox 16…
The readme on my project’s page no longer word wraps. You have to highlight the text to read what’s beyond the right margin.
Haven’t much explore it but the interface is much better!.
Great new design!
it’d be really cool if bitbucket allowed me to import “all” of my github repo’s. This would probably encourage my migration. Doing it one at a time will be a pain, plus I think I’d have to write a Dist::Zilla::Plugin::BitBucket
Finally markup support everywhere! Does this include support in commit messages?
While viewing file source, would it be possible to add navigation to the last commit for a particular line?
I was looking through source to comment on code, but I then had to manually look up the history of the particular file to find out where the line was affected.
I like this. But I don’t see where’s the old “explore” page where I could find trending or popular repos. For a newcomer (i invited some people) it seems that there’s nothing here on Bitbucket :/
Same here. Since the redesign I find it very hard to ‘discover’ other repos.
This is so awesome! Some minor tweaks here and there and you’re done. As mention before i’m missing the private repo indicator in the repo list. Also i would suggest to make commits in the newsfeed look a bit more extra then the other entries – http://s3.imgimg.de/uploads/Bildschirmfoto20121012um11246a6c9522246a6c9509246a6c95png.png – you know, it’s all about the code 🙂
and if we have idea how can contact with bitbucket ?
Love it!
with the new design, how do i delete a repository?
i have found it. :/
Holy crap, please don’t require JavaScript on everything. 🙁
(Good work on the visuals of the UI, but please, don’t require JavaScript / CSS for the site to work. Prime example: The pull request reviewing page does not function with JavaScript off.)
nice work!
what about tags for issues? that would be great to categorize them not only by priority but also by related topic!
Don’t really like it… Too mainstream for me…
We can’t all be edgy like you. *eyes rolling so hard they almost fell out of my head*
The new UI looks very clean and comfortable!
Love your work.
Congrats. There is something that seems to be broken, though: The description and comment formatting seem to be broken. For example an asterisk/star/* at the beginning of a line is no longer a bullet point. What happened?
getting better
I know I’m a bity late to the party, but the new design is incredibly good. Bitbucket was alright before, but this is great!
Awesome! By the way, how did you make the GIF? (What tool?) It’s nice.
Photoshop.
Oh and for lastpass users with autologin; you shouldn’t visit the “Delete Repository” tab under Admin.
Given the vast amount of messages I’m not sure if anyone will ever read this message. 🙂 Actually I like the old design quite much as I found it clean and simple. With the new design I never see the full name of my repos because together with my username they don’t fit the space. Even a short urls like http://www.psrregshuffle.de dont’t fit the box at the right side. I have two repos which have a version number at the end of their names. Unfortunately they are indistinguishable on first sight.
Best, Dennis
perfect
I have no clue if you can see git tag messages now. I believe you used to be able to, but now nothing pops up with you click on a tag.
It took me a while to find the small “admin” gear on the very right of the top bar, to adjust my repo settings. But great work.
cheers
-tswaehn
Very nice work. Good job.
Authentication via HTTPS is broken since this update.
That’s funny, I just signed up for BitBucket coming from GitHub, and I was thinking how it’s an unprettier clone of GitHub and was looking to see if there were any plans for a redesign but it appears infact this is the redesign and was just done this month. Having now seen the old version I can certainly see why existing users will find it a major improvement, but for new users coming from GitHub or the even prettier Beanstalk, the design is far less attractive. That being said, looks aside, I’m a single member developer and just need git for cap deployments and dont want to use my own server since more reliable to have another that is backed up and has dedicated server admins. So I’m able to use the free plan forever for unlimited repos which is fantastic compared to GitHub which is 7 / month for only a few repos. Overall at the moment GitHubs looks and massive community isn’t worth 7 bucks a month for private single member repos. Hopefully GitHub offers a similiar plan or BitBucket improves their design further.
I totally agree with you. Same story here… I came to BB from Github and found this entire interface scattered all over the place. But then the features that got the preference over looks and perhaps more preference as it was saving me some considerable money too. 🙂
Settings gear is easy to miss. I spent a few minutes trying to figure out how to admin my repo. Make it stand out more.
Congratulations! I wasn’t too unhappy with the old design, but the new looks really awesome!
I like the new features and the new design. But it is bad to require users to rewrite old issues in Markdown while editing. I wish you would provide some form of converter soon.
We’re looking at putting into place an upgrade to Bitbucket that converts everything to Markdown.
Better. Much much x 65536 better than previous version.
It’s great! thanks for your work!
Excellent changes. I especially liked the in-line comment feature. Now I don’t need to cite the line number to draw my fellow programmers’ attention to the code-block that I’m talking about. this will surely help us keep our collaborative programming more organized than before. congratulations folks behind these changes. 🙂
“Branch level access restriction” and “downloads restricted to only the File I upload (disable download by tags and branch) for selected Repo” may make your service even more feature-rich.
Fantastic upgrade, Congratulations The Bitbucketeers…….
Hi !
I took a look at the changes and indeed the user interface is more engaging , even if some aspects could be improved . I thought that was it , but no .
I chose Bitbucket once upon a time because of the incredibly awesome experience working with mercurial queues . I use that mercurial extension quite often in order to build patches for many open source projects . Few days ago I qclone’d XmlRpcPlugin MQ repository (i.e. https://bitbucket.org/osimons/trac-rpc-mq ) and noticed that this was not working like before (i.e. http://ches.nausicaamedia.com/articles/technogeekery/using-mercurial-queues-and-bitbucket-org ) . This used to work OOTB , now it’s difficult .
Now I’m trying to setup patch queue repositories once again.
Questions :
– Is there any chance to have MQ repositories working like before in the short term ?
Looks very Twitter Bootstrap–like. Was this intentional?
Wow, talk about fresh. Very nice! 😉
Thank you for your excellent work. I am grateful to you for this help.
Great!
I will Trade Coding time for Coding Time, I am working on a Gameing “Engine” and Title and Payment API Anyone want to be a Developer for my “Team” Kings Market? I will give a SteamBox Piston to the best “Help” http://www.bettertalisman.com/2013/01/open-source-gaming-and-nvida-future-is.html
How do you actually make an inline comment? I can’t figure out what action to take in the UI to initiate a comment. Is it available on commits already merged to your repo or only to pull requests?
Ah, finally found it after about 30 minutes of looking. There’s a little speech bubble to the left of the code if you hover over a line. It’s nice now that I know it’s there, but it’s extremely subtle. Not quite as intuitive as just being able to click on the line.
Impressed! 🙂
Really cool improvements, please allow to add comments in the side-by-side view as well. Thanks!
This is nice but what happens if the story has more than a few commits. The reviewer would only spend a lot of time clicking through the commits. Would have been nicer had you could have incorporated something similar to crucible (create review for all the commits).
Very good. It just needs common wiki language across all Atlassian products.
I guess it is hard to make …
Thanks for creating great product!
What’s the meaning of the icons (recycle symbol, orange background with an ‘S’, etc.)
And now all our icons our gone 🙁