Prototype to shipping product, WebSketch

30 Jul 2008 - 10:42pm
594 reads
Andrei Herasimchuk

On the vein of creating prototypes and then using them for the real
product (I didn't want to hijack the other thread, so I'm making a new
one), I guess I can point to something that went live recently that
Involution Studios helped design and build for one of our clients. A
web page editor for SplashNote Systems called WebSketch, which can be
found at:

Now, before the folks over at SplashNote get the naysayer treatment...
some qualifiers.

* It's an early beta. There's a lot of stuff that needs work (like
instructional text and more feedback on what you can do with the
editor). They'd appreciate feedback if you have any, so please feel
free to send it to them directly.

* Involution designed and built the web page editor only (
but you'll need to create a free account and such to use it), not
the rest of the site. Being a small startup, SplashNote didn't have
the money to pay for us do the entire thing soup to nuts, so we only
worked on the editor itself.

* They decided to make it live versus wait for all of the features to
be fully implemented on the backend, aiming its initial feature set
out of the gate at a consumer crowd looking to create custom page
profiles. There are a lot of features we built into the prototype to
move it beyond that initial group (like small business needs and even
enterprises for intranet website needs) that have not made it into the
live product due to time constraints. Features like data entry with
forms (with edit fields, menus, checkbox lists, radio button lists,
text areas, etc.), data tables hooked up to real databases, comment
objects, templates, linking together multiple pages into a full site,
friend and permissions management, plus more. Although the comment
object should be going live within a week or two with templates soon

They are going to be adding a variety of these features back in over
the coming months, so keep on eye on them if you find the editor

Some of the notable things the web page editor does:

* Auto layout adjustment while dragging
* Search Flickr and YouTube content, live, with hover previews
* Drag and drop Flickr and YouTube videos into page layout. Flickr
images dynamically grab the correct resolution of the image if it
exists on Flickr to make sure the image result in WebSketch is optimal
* Drag and drop Google Gadgets into page layout (starting with Digg
News, mini-Facebook, Hulu video, MapQuest, Weather, RockYou slideshows
and slideshows.) More gadgets to be added later as requested
by users.
* Multiple Undo
* Snap to columns and grid
* Auto-Save
* Full inline text editor
* Patterns, Colors and Font styles

Plus the entire thing is JavaScript and HTML. No Flash/Flex, no Java
applets, nothing extra needed except a modern web browser.

This project followed our main design process, where after initial
research and design activities with the client, we went into design
and prototype mode. We built a fully fleshed out prototype that
functioned but it was not hooked up to an engine. The prototype did
everything you see in the live product. Drag and drop, auto
adjustments while dragging, multiple undo, etc. It just wasn't hooked
up to anything. (I refer to this kind of prototype as a concept car.)

We built the prototype in about three months after a month of initial
design iteration, after which the client decided to take a portion of
the features the prototype editor had and make it real to get some
traction with it. At this point, we actually helped them convert all
of the prototype code into production code (which mostly meant
squashing bugs that are acceptable in a concept prototype but not in a
live product) and added the Flickr, YouTube, Google Gadgets and soon
to be added Comments features. That process took about five to six
months and got them to where you see the editor now.

I'd be happy to dive into details in this thread if anyone cares about
the prototyping process we use here to make all of this happen.

Andrei Herasimchuk

Principal, Involution Studios
innovating the digital world

e. andrei at
c. +1 408 306 6422

Syndicate content Get the feed