launchpad-dev team mailing list archive

[Martin Pilkington <pilky@xxxxxxxxxxxx>]

Hey all,

First a little bit of background. I'm a Mac software developer by trade and use and love Bazaar for managing my code. I'm also working on quite a few open source projects and so I'd like to use Launchpad for hosting them. Unfortunately, while it is an incredibly powerful website with lots of great tools, the user interface is rather... lacking. It has made quite a few improvements over the time I've known about Launchpad but it still leaves something to be desired.

Now I know a lot of people who are git users for one reason and that is because git has Github. Github has helped git's popularity a lot and I feel that if Launchpad was to have a UI on par with or surpassing that of Github then the extra power and the integration with bzr will help both Launchpad and bzr gain more popularity.

Obviously I'm not wanting to be someone just coming in and say "you're doing it wrong, this is how you should be doing things", you guys are the experts as you're the ones coding Launchpad. But I do want to help out with the UI side of things however I can. I don't want to come in and outline any drastic changes that change how things function, but there is a lot of relatively minor stuff that can be done to improve the UI of launchpad without affecting the functionality too much.

I've come up with 4 mockups that show modifications to the home page, project overview, answer and bug pages. I'll include links to them and a brief description of why I changed things. I'd love to hear any feedback you have on what I've come up with and whether you think it is something you'd be willing to let me explore further.

But first I want to give three key themes running through my mockups:

1. Clarity: At the moment some pages are quite cluttered, so I've employed a strict grid for the pages to improve clarity.
2. Consistency: I've chosen a few UI concepts and used them constantly. A few consistently used concepts helps improve understanding
3. Target users: This is the area I may be most wrong in but I feel that there are 3 main groups of users. The first group is those wanting to find info about, get a project and get help. This includes pretty much everyone visiting the site. A subgroup of this is people wanting to contribute to projects with code, bug reports, translations etc. And then a subgroup of that is people wanting to create and manage projects.

------------------

Homepage: http://dropbox.mcubedsw.com/launchpad/homepage.png

First, I feel that launchpad needs a bar at the top for performing site wide tasks. I've put the links to the home page, blog and user manual in there, as well as the existing account settings. I've simplified the footer to just be plain grey to help border the page.

As for the main content, I feel the current homepage puts too much emphasis on the blog. A better user of the home page would be to direct people to look for projects. This is why the most prominent item on the page is now the search field. The Featured Projects section is now moved to the left of the page to give it priority over the blog list. 

Get Started is moved to the bottom and reduced to 4 items, each with a description. I may be wrong but it doesn't make sense to me that people would choose to look for bugs, translations or answers and THEN choose a project, it makes more sense they'd choose a project and then look at these items, so I've left them off. I also feel that creating a team isn't something best suited to the home page. I've limited it to the 4 items that seem to make most sense for getting people going with Launchpad: creating a project, finding out why they should create a project, play around with a demo and reading about all the features.

------------------

Project overview: http://dropbox.mcubedsw.com/launchpad/overview.png

The current project overview page seems to typify both what is wrong with the Launchpad UI and the potential it has. It is very cluttered, with lots of different styles of displaying information and, in my opinion at least, puts the wrong emphasis on elements.

I've moved the project navigation into a series of tabs, providing a border between the branding/navigation and the content. Below this I have 3 columns running down the page. The two left most are for content (and as you can see content can span both columns) and the 3rd is for the sidebar.

The main description is given more white space around it and is separated from the info 'boxes' by the Get Involved box. I feel that this deserves a more prominent position on the page, which is why I've moved it up.

The info 'boxes' are split into 4 rows. The first is information about the project (info/announcements), the second is support (FAQs/latest questions) and the 3rd and 4th are development related (bugs, packages and series). The series graph always looks cramped in the current design so I've given it much more horizontal space by letting it span two columns. I also feel it had too much prominence at the top of the page, hence it being moved to the bottom and replaced by announcements, which I feel are more important to more people.

For the sidebar I've used the boxes already used for some parts of the site. Besides looking very nice, they provide consistency. The current downloads links are, to be frank, hideous and match nothing else on the entire site. I've made this consistent with the rest of the sidebar and used the download icons already in use around the site. I've added a new section to the sidebar (one of the few new 'features') which tells users the command to get the source in a clear position. The links have also been moved to the sidebar. In the current page they seem to blend in with the description, which benefits neither the description or the links being visible. And finally contributors has been moved to the sidebar, as I feel it doesn't really fit in with the other info 'boxes' and that it needs a bit more prominence.

------------------

Individual Answer: http://dropbox.mcubedsw.com/launchpad/answer.png

I've put the bread crumb above the header and below the tabs as this is more akin to where people expect a breadcrumb to be. The "Asked by" section has been moved below the question title as it just seemed a bit random out on the right, it has more context on the left.

The question info section has be compacted into two rows with no gaps (when it hasn't be solved there will still be 4 columns). The related bugs/FAQs sections are split to separate columns to give them more room. The replies answers are put in boxes to give more consistency.

All the options are moved to the sidebar. Rather than being scattered all over the page, it makes more sense for them to be in once place as they refer to the whole question, not just part of it.

------------------

Individual Bug: http://dropbox.mcubedsw.com/launchpad/bug.png

I've used the same template as for the answer with this page. The bug report gets much more focus than in the current design with the bug information moved down. I'm not 100% sure about the options for bug information where they are and the might be better in the regular options section. I've left related branches off this design as I haven't yet come up with a way of tidying them up, but they should appear somewhere.

-----------------

Anyway, that's all I've come up with so far. Sorry for the long winded post, but hopefully you get an idea of what I'm aiming for and agree that the mockups help clean up the page quite a bit. In my opinion the designs help make Launchpad look a lot easier to use, despite not removing any features.

Thanks

---------------------------------
Martin Pilkington
Writer of Weird Symbols
pilky@xxxxxxxxxxxx