launchpad-dev team mailing list archive

[Martin Pilkington <pilky@xxxxxxxxxxxx>]

Hey All,

Some of you may remember that I posted some ideas for UI improvements to Launchpad to the list a while back. These were relatively minor improvements to the existing UI. I've recently been spending sometime working on some more dramatic changes. I've been focusing on 3 things:

1. Removing unnecessary clutter - removing things that are better suited on other pages, and re-arranging items to make a cleaner look
2. Expanding links - for some items that were previously linked to, I've pulled the content onto the main page
3. Improving terminology - Some of the terminology in Launchpad can be quite confusing

Before I go into detail discussing the mockups I just want to talk about the main aims of this post. I'm wanting to know if this is something that you would like me to continue on. I've only mocked up 3 pages, but hopefully they will give you an idea of the scope of the changes. If you are looking for changes as large as these to the UI then I am happy to work on mocking up the rest of the UI and working with others to help design and implement it. I strongly believe that Launchpad is the most powerful site out there for open source projects, and with a fresh take on the UI to make it more approachable I believe it can be the most popular.


1. Homepage - http://dropbox.mcubedsw.com/skitchpics/launchpadhome.png

The current home page doesn't really sell Launchpad. It assumes people know what launchpad is and why they should use it. The only real advertising is a tour link that is very easy to miss.

In this redesign made it try to sell Launchpad to potential users much more. The 3 key items are finding existing projects, getting the user started (more on this later) and the current featured project. Below this we have the secondary items, explaining what launchpad is and who uses it, and providing the latest posts from the launchpad blog.

And finally I have pulled the tour out of the link and put it at the bottom of the page. I'm only showing two items in this mockup, but imagine the whole tour being placed there. It shows what Launchpad does and explains why you should use it and it is right on the home page, where people will see it, not hidden away in a link (which I only found myself when I took a good look at the home page).

Now to come back with getting the user started. I was talking to someone earlier and they mentioned that one of the most common complaints they heard about Launchpad versus over services like Github, is that it takes too long to get source up there. The whole sign up process needs to be streamlined so that the user can go from clicking the get started button to having their code online in under 5 minutes. This is something I'd look into in future mockups, but for now it is probably the most important thing that needs to change that isn't on this page.



2. Teams - http://dropbox.mcubedsw.com/skitchpics/launchpadteam.png

Like a lot of Launchpad, the current teams page is a little bland and not highly structured. The biggest change in this mockup is the members section. Rather than just list the latest and pending members, I have move the member photos section onto the team page. The most important thing about any team is the actual team, so it makes sense to put give them a large amount of screen space. The team 'bio' is placed at the top of the page.

Down the left are all the relevant details. The team details are placed in a compact list. The mailing list emphasises the address as the main piece of information and the extra options are displayed as subordinates. And finally the member map has been given a place that looks like it belongs on the page, rather than being tacked on.

This page shows one of the main changes, which is the elimination of the actions in the sidebar. In my last series of mockups I moved the actions away from being inline, but on reflection and discussion with some people, it does make more sense for them to be inline. This is why the "join the team" and "subscribe" actions are both at the top of the respective sections.



3. Projects - http://dropbox.mcubedsw.com/skitchpics/launchpadproject.png

And finally we have the project overview page. I have removed a lot of stuff which is unnecessary and stripped the page to its most important elements. The series & milestones and the development focus aren't relevant unless you want to see the code. The latest questions and the FAQs aren't relevant unless you need support. And the latest bugs aren't relevant unless you're looking at bugs.

I've moved the summary field up below the project title as it seems a much better fit, and give a better sense of the difference between the summary and the description. As with the team bio, the project description is placed front and centre. Below this I have again taken a minor player and made it very important in the news and announcements. If you're coming to the project overview page you are wanting to do one of two things: find out about the project or download the binary or source. The news and announcements are important to both these needs.

All the relevant info is placed to the left of this. The basic details of the project are in a list like with teams. The downloads are listed like everything else, and use the description rather than the download name (oddly enough, descriptions are more descriptive ;) ). A new element is the Get Source section, which simply says what you need to type into your command line to download the source. And below this are the top contributors, because it is important to give recognition to those who put the most work in on the front page.




You can still see the old launchpad in the designs, and that is part of the idea. There are some really good bits of UI in launchpad, but they are often drowned out by not so good bits. A little spring cleaning of the layout and a little bit of colour and you have a much more appealing site for users.

I look forward to your feedback, thanks for putting up with my ramblings :)

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