JumpchartDiagrams play a very important role in planning and communicating a site’s architecture. They help you visualize a project before developing and piecing things together, leading to smarter design decisions. Unfortunately, for a client, Information Architecture and diagrams can be very intimidating, not to mention appear impractical. Because of this, many web teams end up leaving a client out of the whole process and resort to other means of learning what they want on their website. The end result? A mess of emails, Word documents, links to websites, and so on. Jumpchart, currently in private beta, hopes to put an end to all of this.

Jumpchart provides an easier way to plan and visualize content with clients. Forget wireframes and flowcharts and instead allow clients to browse through an interactive sitemap with pages and sub-pages of content. Let them illustrate their needs and add all the content you need in one simple location. Meanwhile, discuss and make changes as needed until the content planning stage is complete. I don’t necessarily see Jumpchart as a way to replace your existing Information Architecture process, but I do feel it makes a nice addition by allowing you to quickly gather and perfect content with groups of people. Invite the whole team: designers, developers, copywriters and clients; and make better decisions easier and faster.

Jumpchart Site Builder

Jumpchart’s interface feels in many ways like a content management system or website builder. You create a site, add pages and sub-pages, fill in content, and attach files to pages just like you would in a website builder. Jumpchart also produces a preview website, or as they put it, an interactive sitemap, which you can browse through and send to clients. You can even down the entire website in pure XHTML and CSS. You cannot, however, change the design of the website that Jumpchart creates – not a major loss considering the client only needs something to help visualize the end result. Users can leave comments on pages, and if permitted, edit content and reorder the site’s navigation. Additionally, each site gets its own RSS feed containing information about recent content changes, page additions, and navigation reordering by other users.

Jumpchart Content Editing

Jumpchart uses Textile Markup Language for editing content, but something tells me my clients won’t want to learn a language to fill in their own content. They’d rather use a WYSIWYG editor. That’s what the average person is familiar with and that’s what will allow them to copy and paste content without losing formatting. My preference? I’m a Textile kind of guy, so I’m happy with their decision. Besides, it gives Jumpchart more flexibility. To explain, after uploading an image, Jumpchart lets you insert that image in your content by adding (image_name). Additionally, linking to other pages within Jumpchart can be done by inserting, "Page Link":[page_name]. Again, maybe a little much to expect a client to write out. You can also build basic non-functional forms with Jumpchart’s custom syntax, enabling you to easily mock-up contact forms, registration forms, login forms, or whatever you may need. You just type out the form elements as they are: [input], [checkbox], [textarea], [submit] and so on.

Just last week, Jumpchart introduced a new feature, Snippets. When you create a site snippet, you are essentially creating content that is meant to be repeatedly used throughout a site. For example, you can create a snippet for a newsletter form and include that form on any page with the syntax [[newsletter_form]]. It saves you from typing the same thing over and over again and also makes it easier for other collaborators. It also enables you to add blocks of content to pages which can be globally changed throughout the site by editing a single snippet.

Jumpchart Sample Preview SiteWhat I like most about Jumpchart is the simplicity in the product. It helps save time collecting and formatting content and gives clients something to visualize before having the real thing. However, I don’t feel Jumpchart is the best solution for large scale websites. It works well for small and medium sized sites that require a minimal amount of content planning, but if you have a site containing possibly hundreds of pages, things could get dicey. Jumpchart can improve on this by allowing me to search or filter through pages and perhaps offer a one page dashboard showing recent activity. Maybe even collapsible page navigation would help save room.

On the same topic, check out WriteMaps to create and share simple sitemaps online. Rev2.org has more on Jumpchart.

32 Comments on “Jump Start Websites With Jumpchart”

  1. heri says:

    i use rapidweaver, a small mac software, for Information Architecture. It wasn’t meant to do so, but it’s fast and gets the job done.

  2. Brian Benzinger says:

    Heri, RapidWeaver looks nice. It looks to have a similar feel to Jumpchart with the left hierarchical navigation and snippets area. I know it’s a full fledged web builder, but as you said, it still works for basic IA. I’ll have to check it out. Thanks!

  3. Joe says:

    I was unfamiliar with Rapidweaver… Pretty cool. It does remind me of Jumpchart in some ways. Still, I think the most important thing that Jumpchart adds (shameless plug) is the ability to collaborate. I only spent a minute on the Rapidweaver site, but I didn’t see any mention of collaborators.

    Of course, you can ask your client to buy a copy, and have them ftp to the same server… There are a lot of ways to do the things that Jumpchart does with varying levels of complexity. We’re hoping that we’ve made it easy enough that the old ways are obsolete. Before Jumpchart we were using Dreamweaver to build CSS mocks… It was a step in the right direction. Like Rapidweaver, at least once the mockup was done it was useful… You could actually use it to begin building your site.

    Do you have a workaround for the collaboration thing that’s working for you?


  4. Acompanhante says:

    This is a godd idea.

  5. Randy says:

    BackPackit.com from THOSE guys, does something very similar but this looks a great deal smoother. Suprising that there are so few because it’s a huge tool.

  6. Joe says:

    Good point about backpackit… You’re right, you probably could get creative and use it to do something similar. Sharing pages would work similarly, and messages could serve as the main content area. Still, I think you would miss out on being able to create subnav, export css, and create forms.

    As a long time backpack user, -I even tried to demo a site to a client using backpack, and Writebaords… The fact that it was so frustrating was one of the things that led us to build Jumpchart.

    If you have any cool Backpack website wireframes to share, I would really like to check them out for comparison…

  7. kevin says:

    brian, good find! And you pointed out at least 1 major issue.

    I agree 100% with the Textile concern – this site needs to offer both to be a “sell”. My clients would never, ever attempt to learn textile (nor would I ask them to) to markup their pages.

    So, I see two solutions:

    a) either offer both options (textile or wysiwyg (html))
    b) wrap the textile markup behind the look and feel of wysiwyg editor – getting you the best of both worlds.

    overall, this site has potential.

    Another site I use to collaborate is http://www.conceptshare.com – great tool that I use frequently.

    But the feature to edit/share collaboration on content, etc is huge (can’t do in conceptshare – not really the goal of it either). Is there a workflow feature? That would be another ++. I often have clients send over 2 or 3 editions of a MS Word doc that I need to save out and process weird chars for, etc. Having a workflow would make this huge. Oh, and this also leads back to the Textile issue – I’d need to be able to grab the html. I assume this is a no brainer.

    Thanks for the interesting post.

  8. joe says:

    Kevin, We’ve heard a few people asking for wysiwyg. We’ve been listening, but aren’t ready to move yet. So many of the editors around have problems in different browsers. I agree that a point-click system would be easier for some users though. To be honest, -we probably won’t implement it until we’re sure it’s actually adding to the ease. At this point, I’m just not sure. As far as the exporting html thing… of course. That’s the best part of Jumpchart. -Spitting out CSS/xhtml when you’re ready to start building.

  9. Sin Jin Lee says:

    Jumpchart sounds like a cookie cutter version of what 37 signals already offers. Like a couple of the added features but would take a little more to lower my switching costs from backpack.

  10. Joe says:

    Sin Jin Lee, I think you might have hit on the ability to create pages full of content as a Backpack analogy. I think there are some similarities. Backpack is great at letting you store miscellaneous types of content in an organized fashion. Jumpchart is specifically about planning websites. There are some similarities, but with use, you would see the difference. They’re targeted at totally different uses… I think you might be able to cobble together a use pattern for Backpack that achieved a lot of what Jumpchart does, -like wise you could use Jumpchart somewhat the same way you use Backpack… In both cases it would be a struggle, and you would be missing the real benefit.

  11. kid's clothing says:

    Great article, I really like the idea of the Snippets feature.

  12. Screen Snooze » Site design for dummies: WriteMaps and Jumpchart says:

    [...] Via SolutionWatch. [...]

  13. Paste Interactive » Blog Archive » Some Jumpchart Reviews… says:

    [...] Solution Watch [...]

  14. Rick Marks says:

    Another useful tool for prototyping web apps was positively reviewed, with some comparisons to Jumpchart, in WebWorkerDaily, at this link:

  15. noclegi polsce says:

    Jumpchart is good thing. Thanks for taking care of this. Much appreciated :)

  16. Ryan Ward says:

    Interesting concept for businesses, but, I’m going to say that a wysiwyg is something that you could sell a client on from a useability perspective.

  17. Phantom says:

    I agree with Ryan, useability perspective is the key in selling. My experience made it easy to sell people even stuff they can’t use, or make usefull. In my opininon, if it’s usable, you must make your customer to buy it.

  18. San Diego Bob says:

    Too bad it’s in private beta. I would like to test it on some of my smaller sites…

  19. Wreck says:

    Bob you can openly join, there’s a free account that lets you do 1 project with 10 pages, 2 users and 1MB of space so there’s nothing to loose.

    There’s 3 paid plans, Simple, Super and Deluxe if you find you need to run multiple projects.

    Definitely give the free one a go.

  20. Harley says:

    Free one is ok, but I’m still cheap :-). I need the paying (Deluxe) so if anyone wants to buy with me, will share fifty fifty.

  21. ionworx web design says:

    Try MODx (http://www.modxcms.com)- it has a frontend editor called “QuickEdit” that can be used with clients to build content directly on a staged or live site.

  22. funzig web design blackburn says:

    MODx also features snippets…

  23. ArticlesGarage says:

    Communication is the biggest problems these days and I know how difficult it is to communicate with clients…from the simple fact of what kind of business they run to the complex projects of website design and maybe marketing. I have always wondered if there is a better way to communicate with clients easier and I am so happy someone thought of that too.
    I will definitely see what can do and test if it will make my tasks easier.

  24. DUI says:

    It does look like a website builder huh Brian? Any idea when this will get out of private beta?


  25. Timmy says:

    It looks like a more complex and sophisticated tool than just a simple website builder.

  26. Logo Designers says:

    Rapidweaver sounds interesting – Ive heard of it before but im not a Mac user. I am guilty of using heavy email, word docs, etc to keep clients informed….Im gonna give it a go with Jumpchart and see what happens…

  27. Axel says:

    I just watched Jumpstarts video tours, after finding your blog. It looks so easy with all the dynamic stuff. Exspecially the export to “simple” HTML makes it an easy to use tool for everybody. Great Pick.

  28. Axel says:

    Well I just noticed…. It should be Jumpchart not Jumpstart. Even so I think Jumpstart would be the better name. ;-)

  29. bob smith says:

    this is such a good idea

    i wonder why no one else has thought of it before now

    it is very usefull

    thanks for helping our socity

    bob smith

  30. Aventura Paternity Lawyer says:

    This seems like a really good system. Kind if like WordPress, but on steroids – shh, don’t tell Congress ;-)

    Websites are getting easier and easier to build. Now I just need an tool that helps with graphic design. For me, that is the hardest part.

    Sandy Fox

  31. Columbus GA Realtor says:

    Is this still in private beta? I would be interested in trying it when it comes out. What is the status and time frame?

  32. Internet Website Design says:

    I guess I can get rid of Visio and make my charts with JumpChart