Our take on 37Signals Draft product page [Taskforce]

by maccman • 16 years ago

36 19 16 years ago

maccman3• 16 years ago

The idea is that by the time you scroll to the bottom of the page, you should have a pretty clear idea about the product and how it's useful to you.

sjs382• 16 years ago

Is it a mac application? Or cross platform? Web? Mobile?

Email replies? Email replies to what?

How does it integrate with Gmail?

It's probably better to present this as a story.

maccman3• 16 years ago

I guess it's not as explanatory as I intended.

It's three things: * A cross platform desktop app * Gmail plugin * iPhone app

If you create a task for someone not using the system, it'll send them an email instead. Any replies to that email will get turned into comments in Taskforce.

I think you're right about representing it as a story, perhaps a life cycle of a particular task.

nickgeiger• 16 years ago

Maybe it's because I came in from the HN link, but I was extremely confused by this. I had never seen the draft page before so when I saw the task for "put together draft like product page", I was trying to understand what that meant and find a reference and the page was obviously not helpful so I had to read the HN comments and go find the draft page to get it. Perhaps the same idea of screenshots would work better with a different example that doesn't require as much background knowledge.

klaut• 16 years ago

I did not get it - is this a desktop or webapp?

samdk• 16 years ago

I don't think this works nearly as well as the 37s version for a couple of reasons. The biggest one is that Taskforce isn't as inherently visual as Draft is, so you're going to have to work harder to make it visually interesting. There are a bunch of others, though: the Draft page shows Draft in context: pictured on an iPad rendering. That helps to explain what it is. The Draft images are scaled down and at a more normal aspect ratio. Yours are full size and cut off at an awkward aspect ratio to save space. They look really really wide. The Draft page includes a line at the top that says what it is and where to get it in two lines. You don't have either of those.

I think the idea has promise (and I really like the Draft page), but there are things that need to be changed for this to work. Add a tagline at the top that says what Taskforce is, what platforms it runs on, and where to get it. People should know there's a beta before they get all the way down the page. Scale the screenshots down, and move them to a more normal 16:10 or 4:3 aspect ratio. Also consider focusing in for some of the screenshots rather than putting the whole thing there: the 'drag and drop to share' screenshot, for example, doesn't focus nearly enough on the dragging and dropping and that gets lost. 37s had an easy time in this respect because their app is very very simple visually, and is a fundamentally visual application. You're going to have to do a bit more work to make your screenshots as interesting. Make sure you have an obvious link back to your site. The 'Taskforce' header at the top isn't very obviously clickable. (And there should be a link back from the bottom of the page, too.)

Also, personalize it a bit. There are two lines that really make the Draft page work, in my opinion:

    "See, there it is in Campfire. That took 3 seconds."

    "We use it every day. We hope you will too."

The Taskforce page is a lot more formal and a lot more boring. And that makes it a lot less memorable in comparison.

norswap• 16 years ago

Away with the "personalized" filler lines. I don't think people were ever affected by those.

aaronbrethorst2• 16 years ago

To the folks asking if it's a Mac app or a web app, it looks like the answer is "both." From the controls, it looks like it's built on top of Cappuccino from 280North, and being deployed on the Mac using Cappuccino's Native Host feature (http://cappuccino.org/discuss/2010/05/13/nativehost-run-your...).

maccman3• 16 years ago

You're right, the answer is both, but we're not using Cappuccino.

We're using Cappuccino's theme Aristo, which I ported to CSS3: http://github.com/maccman/aristo

For the desktop implementation, we're using Bowline - a framework I developed for producing cross platform desktop apps in Ruby/HTML. http://bowlineapp.com

aaronbrethorst2• 16 years ago

Thanks for the correction. Bowline looks super cool. I'm going to have to spend some time digging into it.

subbu• 16 years ago

Isn't draft a bare-bones sketching/wireframing tool? This seems to be a task manager.

shawndumas• 16 years ago

that's what's got me confused...

adityakothadiya• 16 years ago

37Signals are trend setters when it comes to UI design. Pretty much every iteration of their Design/UI is followed by many web-apps. Remember the very first version of Ta-da list home page, then the old Basecamp homepage, and now the new Basecamp homepage. Also the layout of all their web apps is followed by many SaaS apps now. Now this - simple landing page, will be followed by many people now. It's good stuff!

ihodes• 16 years ago

Though it may not have been as clear as intended, I "get it". And it's pretty cool—I've signed up for the beta.

Cultured Code (Things) has a competitor… good work!

n8agrin• 16 years ago

37signals provides an explanation at the top of the page and a call to action (link to the app store) at the top and bottom of the page. You should consider doing the same with your signup form. This pattern is also noted on Google's results pages where they have a search box at the top and bottom.

dot• 16 years ago

Looks like an awesome app. When are you shipping the beta?

cangrande• 16 years ago

Thank you! You should see something in the next few months.

ErrantX• 16 years ago

One reason the 37s page works really well is that it is bold, stark and clear. For example; they have a white background - which really emphasises the black images & text.

Our take on 37Signals Draft product page [Taskforce]

Related Stories