Tag wireframe

Entries 4 Total

WriteMinds: Goals and Wireframes

Jan 13, ’10 10:09 AM

Over the past while, I’ve been working with some friends on an exciting problem:

How can we make writing on a computer easier and… awesome-er?

A couple years ago, some friends of a friend came to me and my friends (Eric and Kevin, who do fun projects with me from time to time) and asked us if we could design and build a collaborative writing website, where people could get together to write novels. After a good long think, a bunch of meetings around a table in an office we no longer have, and a whole heck of a lot of calls, we came up with a different sort of thing, correcting a smaller problem: it sorta sucks to write on a computer. I’ve tried Scrivener, Writeroom, Ommwriter, Microsoft Word, Pages, Textedit, and others, and none of them really made sense. They all either did too much or not enough. And with Google Wave and Basecamp around, the collaboration thing is/will be nailed.

So now that Will, Ryan and Robbie have gotten the funding out of the way and the development underway, we’re ready to start talking about it.

The first thing I’d love to get your feedback on is some of the initial application screens that detail a bit of the marketing and account management functions of the product.

Homepage:

The bottom bit is the footer, and hopefully the screen grabs/video bits are compelling enough to get people to sign up.

May need some more detail here, though. Note to self. Thoughts?

Welcome Page:

Let’s say you’ve signed up, and you’re ready to write. What’s the first thing you’ll see? This page.

Individual Document Page:

Okay, you’re a pro, you’ve made a few documents. Perhaps you want to compare your work to previous versions, or just edit what you’ve got. Here’s where to do that. The stuff you see on the Version 6 bar: that’s a rollover state.

Old Version Rollover View:

For launch, we’ll only have the most recent version be editable. Too many complications with version comparison…

General Account Admin Page:

And the settings page is pretty straightforward. You can see that we’re trying to have a bit of personality with everything about the site, even for the boring bits.

Password Entry View:

So that’s that. Would love to know what you think.

And of course, stay tuned for details.

Comments (10)

Ask Focus on Energy

May 26, ’09 5:45 AM

I wanted to take a moment this morning to go back through the last project I worked on at my last place, which happened to go live on my last day in Chicago. Not only did it go up on time (Jim Vogel is the world’s best project guy), but it’s probably the piece of work that makes me smile the most in looking back. It was one of those strategy + design + development projects that just went perfectly, with everyone feeling good. Wisconsin Focus on Energy is a non-profit energy initiative that helps people figure out all manner of efficiency & comfort-related issues, and they wanted to do something on the internets that let people ask them questions.

On hearing this, we were pretty psyched; while question-asking is a pretty fertile ground, it’s been worked-over a bit. There are plenty of great sites where you can ask a question and get a pretty good answer. Heck, there are even tools out there that serve to eliminate any bit of digital conversation that might arise (Let Me Google That For You being my favorite example). But we felt there was some space for a more personal type of digital interaction, where people could ask Focus’ experts a question and get a personal, public reply. Thus: AskFocusOnEnergy.com.

I had it in my head that this site had to be simpler, better looking, and more personal than every other Q + A site out there, and with some key features in mind, I whiteboarded something that didn’t change much through to implementation, apart from getting a lot better looking. That’s the benefit of the user-experience/strategy person being in with the design/development folk.

ask focus wireframe sketch

And here’s the final version of that page:

final question + answer page

I was lost on what to do with the homepage, design-wise, other than it had to have a bunch of questions (to make it look “full” when people got there), needed to have a high degree of visual cool without using any Flash, but also needed to be simple.

homepage by ashley potter

Thankfully, Ashley killed it.

answer suggestion

Happily, the system suggests answers for you when you submit something.

And you can get all the content on Facebook, Vimeo, and subscribe in a reader of your choice.

picture-21

focus vimeo

focus reader

And they’re sharing their best tips on Twitter as a second kind of helpful content.

focus twitter

I’m pretty stoked about this, not just because the is cool, but also that they’re updating content frequently, and they’re moving toward making the web a genuinely conversational service medium rather than a messaging channel. And while I don’t know the metrics on this initiative, I’d be willing to guess it’s growing over time, rather than dropping to nothing when the promotional radio/print/outdoor stops.

Nice work, everyone.

Comments (7)

How to Wireframe

Sep 29, ’08 3:24 PM


How to Wireframe from Clay Parker Jones on Vimeo.

I kinda love wireframing* things. Mostly because I longed to be an architect while I was younger, and like George Costanza, never became one. This video quickly runs through my process for wireframing the new obamabaton.com site in Microsoft Visio. You’ll hear a LOT more about this project in the days to come, courtesy of El Gaffney and my boys at Hustlewood.

Some tips for a good wireframe:

  1. Use the grid to line things up. I find that the more you fuss over the details, the easier it is to sell to both clients and design teams. Why? It shows that you care. It also shows that you’ve thought about it for more than a few minutes.
  2. Add all the user interface elements you think you’ll need, and then enlist a team of people to help you hack away at them until you’re left with a clean interface. More elements is usually NOT better, while more detail usually is.
  3. Have reasons for why you do things, other than that it is “innovative” or “looks cool”. However, “expected” is also not a reason. Metrics, for one, count as good reasons. As do particular experiences that you may have had elsewhere.
  4. Sketch on a whiteboard first. Then move to paper. Then go play basketball or go for a walk. Poke around on the web for a bit. Then translate to a design/wireframe program of your choice.

Lastly, have fun. I know I did.

* “Crap, what’s a wireframe?” It’s kinda like a blueprint for the design of a website. Have questions? Ask them in the comment area.

Comments (15)