• Redesigned look. More so than ever, Jumpchart feels like a place.

• Faster. Jumpchart is now 20-30% faster. Which means you are, too.

• Add multiple pages. Now you can “quick-add” multiple pages to the hierarchy of your site. Get more done by doing less.

• Redesigned navigation area. The navigation panel is faster and, well, better.

• New content insert bar. Formatting content has never been easier- or more convenient.

• Personal e-mail messages. Now you can add a personal touch to your project invitations.

• Keyboard shortcuts. A robust new set of shortcuts to make you more efficient.

• Better print style sheets. Sometimes it helps to feel the paper in your hands.

See it here!

1. Opens lines of communication right away. 

First things first- the content of the site. Great design begins with the words on each page. You have to make sure they’re functional, relevant, and in the voice of the client. Most of the time this requires the client’s involvement- or at least approval! 

The back and forth chatter between you and the client about content will start the basic conversation. You get to know your client, and they become more comfortable with you. Then comes trust, casual conversation, effective meetings, and honest communication. All of this leads to a better end product. Plus, if you don’t already know how your client prefers to communicate, this will tell you. They might be control freaks… or very laid back and need some pushing. Getting these details hashed out over the content is a great way to kickoff. Opening the lines of communication does more than literally get you flapping your jaws. It lets your client know where they stand with you. 

You’re collaborating on step one; the client knows you’re keeping their interests at the top of your priority list. Reaching out to ask for their advice right off the bat lets them know you’re all in this together. You’re asking them to help build a solid foundation for the project so you can do what you do best. 

2. Lets clients feel like they’re truly a part of the process… and learn a little, too. 

Developing the content of a site isn’t something you can sit back and watch. Like finger painting, you get in, you get dirty, you make revisions and you don’t stop until the content’s perfect. You’re asking your client to paint right next to you. With a content wireframe like Jumpchart, they can make changes, suggestions, and even ask questions. 

The wonderful thing about having clients involved in organizing content for the site is that it gives you a chance to teach them a little about the process. If they don’t already know about site navigation, or keyword relevance, this is your opportunity to spread your knowledge. After all, everyone’s goal is to work with informed parties. 

More than being a part of the process, clients tend to feel responsible for the quality. Paul Boag and his team use something called the “design methodology approach.“ 

“We use ‘design methodology’ with our clients that includes them in every step of the process. This approach provides a number of benefits: • The client is educated about the principles of good design. • The design benefits from the expertise that the client brings to the table about their business and audience. • The client is unable to reject the design outright—he or she has contributed to the design’s creation, so will be unsurprised by the final result.” – The Battlefield of Design: Designers vs Clients.

When clients have to produce content in the very beginning of the project, it helps them feel a part of it all, yes, but it also helps them feel like they’re in charge of getting the site off on the right foot. And according to Boag, having clients involved with this first step will also help things along further down the road.

“A client who has seen a wireframe and has been given the opportunity to provide feedback, is more likely to sign off the final design.” – 7 Wonders of Wireframing

3. Gives clients visibility to your progress in a format they can understand. 

You could tell them everything you’re doing on the phone, or show them bits and pieces of what you’re working on via e-mail. But then they have to visualize for themselves- and that leaves room for lots of miscommunication. Instead, present them with something they can digest. We use Jumpchart to keep things really simple. We start out with basic concepts for each page: “This page will contain information about this subject.” and then we get more complex as we progress with detailed content. Andy Howard with Freelance Switch agrees visual collaboration is the best way to show progress. 

“Familiar with receiving feedback and changes via countless instant messages, email trails and project tasks? Not only is the feedback difficult to manage, it’s not visual, meaning it’s often ambiguous and can lead to subsequent changes. The solution is simply not to allow it. Instead, find a visual tool that works for you and your client, and mandate its use for all feedback and design communication.” – How to Manage Your Website Design Projects

4. Supports decisions you have made. 

You might think you don’t have to defend your decisions, but reality is that clients like to see you practice what you preach. So you can tell them till you’re blue in the face that you’d like to do such and such on this page or that page- but until you show them visually it probably won’t mean a whole lot. There won’t be any backflips. Letting your client see a content wireframe is a great opportunity to show and tell. 

• This last point can help you not only in the content wireframing part of the process, but really during any step. When you can be visual rather than just verbal, do it. 

“If a client is a little weary or questioning one of your decisions back it up with proven examples, case studies, or performance metrics. Clients will question you from time to time and it’s only to ensure they are really getting the best possible website. Be ready and willing to provide support behind your decisions.” – 10 Tips for Communicating with a Difficult Client.

5. Gets (and keeps!) you organized. 

You have all your ducks in a row. How does this help your clients, you might ask? There is a place for everything, and everything is in its place. When your client sees how incredibly organized you are, their confidence in you skyrockets. They feel less weight on their shoulders to make sure everything’s running smoothly because they know you’re already taking care of it. 

Like I said earlier, we use Jumpchart to content wireframe our projects. Part of the reason we like it so much is because we can upload our files and images to the exact page they go on (really easy for the client to see), we can make comments on specific pages (really easy for the clients to collaborate with us on), and it lets the client really focus on the content instead of getting distracted by layout and design right off the bat. 

For the most part it works really well doing just that. There are cases though where Jumpchart can turn into a total cluster of client edits, and never knowing what is approved. This has been a sticking point for us for a very long time.

Non-Destructive Editing.

We thought about lots of ideas to help with this:

• A revisions page.
• A better, more robust RSS feed of edits.
• More complex permissions.
• Sending more robust, and more often email notifications.

Thankfully we pushed past all of our initial ideas. About a month ago we started working on a full-on versioning system. We think this will help ensure that:

• You know exactly who changed what, when.
• You never lose old content.
• You can quickly and visually see what has changed on a page.

Code
This change has been an incredibly disruptive one to the underlying code for Jumpchart. In effect, the “page” which used to have supreme importance in our structure has been replaced by the “version”. It’s not just semantics though. It actually changes tons of the functions that drive Jumpchart, and even more of its database. Everything from the permissions system to the account system to the editing system was edited or rewritten. Big stress, but worth it.

Design

For a while now we’ve been doing something we don’t like to do. We’ve been “carving” little spots for new features. When we relaunched Jumpchart with a wider content area, and and improved nav bar we thought we had allowed lots of space for new stuff. We were really wrong. We ran out of space after about 2 revs, and unfortunately just started looking for the least evil place to stick things.

Today that’s all changing, as we’ve totally redesigned the footer. Now we have tabs to house each of the main page-level functions in Jumpchart. We think it cuts down on clutter, and helps reorganize the whole experience. Not to mention we have an ideal vertical space to store versions in now.

Moving On.

We’ve always charged for pages in Jumpchart. The page being a common benchmark for how big of a project you’re working on, and therefore how much our tool is worth to you. It also maps fairly logically to our cost in providing it to you -the more pages, the more use, the more space in the database, bandwidth, etc.

Now the page is replaced by the version… Which might make you worry that versions count against your page total. We’re very happy to say that all of our Super and Deluxe accounts will now have versioning built in at no extra cost, and that versions do not count against your page total. In effect, we’re storing every instance of your data at a page level, indefinitely across all your projects starting today at no extra cost for our top 2 accounts.

We busted our butts on this one, but we think you’re going to really dig it. Go check it out now: https://www.jumpchart.com/examples/

“...so many people want social media enabled blogs and content management and WordPress+WooThemes gets us a few steps up the ladder towards great sites without the pain.
1. Install WordPress
2. Install an appropriate WooTheme
3. Apply our own styling
4. Select the appropriate plugins
5. Import content from Jumpchart
6. Polish it up and integrate with anything else
7. Launch for a happy client
Explaining to people the benefits of WordPress and WooThemes gets us most of the work we pitch for. It won’t be long and we’ll need another WP developer to cope!”

It’s in the comments over at WooThemes. Sounds pretty slick.

“Designer Luke Wroblewski argues that “using dummy content or fake information in the Web design process can result in products with unrealistic assumptions and potentially serious design flaws.” He also explains how these designs usually fail when real content is added.”

“‘Content precedes design. Design in the absence of content is not design, it’s decoration.’ – says web designer and author Jeffrey Zeldman.”

Lots more here

In Dee Teal’s case, she didn’t always know she wanted to build websites for a living.

Dee is a freelance web developer. In a previous lifetime, she worked as a personal assistant for a non-profit organization. Part of her role there included updating the website- and she took to it “like a duck to water.” However, the other aspects of her job didn’t excite her quite the same way. She took the first opportunity to head to the IT department, where she took care of all eight websites her non-profit owned, and hasn’t looked back since. Today, she freelances, and works with designers and project managers on the back end of websites. She took a few minutes to answer some of my questions.

A bit about the process.

“The first step for me is to get a map of the navigation and site structure. It helps me have a clear idea of where we’re going- I find if I can get a handle on the structure the design will lay over the top… actually design is always the last thing I look at… So when the project manager and I have the structure down then the design kicks in… (usually. It pays to be flexible…) This is where Jumpchart has been really useful to get things mapped out BEFORE we actually start the build.”

I appreciate Dee’s perspective here, because it shows having the navigation and content laid out first is not only useful for designers, but for programmers as well. Whether you’re on a one-man-team, or collaborating with others, it helps to get that part nailed down.

So what other tools does Dee use in her process?

“As far as tools are concerned I ‘m a Mac user on an MBP15in and the software I primarily use is Dreamweaver/Photoshop and Fireworks all part of the Adobe Creative Suite 4. I also use Firefox with the Web Developer Toolbar and TextWrangler/Cyberduck FTP for editing static HTML on the fly. Oh, and Jumpchart too, of course!”

Some advice.

“The biggest, best advice I ever got is to Listen. The more you listen, not just to the text but the subtext of what clients want, however crazy it may seem, the better prepared you are to be able to give them what the didn’t know they wanted… We’ve all had those clients who appear to want the world, flashing gifs included, and it’s SO tempting to shoot them down and tell them what’s best… but if you REALLY hear them, in that they really want their logo to be the thing that people remember, then you can show them how it’s done WITHOUT the flashing gif… and then everyone goes away happy…

“The other thing I think is really important is to always bear the user of the site in mind – not just the client- I do my best to educate, in the nicest possible way, the client into thinking in terms of the users rather than just in what the client wants to say with their site… Basically, if everyone’s thinking about who they’re serving (client, their public, designer/developer, their client), challenging though that can be sometimes, then, in my mind, everyone wins.”

Dee’s proof that your process needs to be flexible, but that no matter what your role in building the site or app is, it pays to get organized first.

See her work here.

“Collaboration is Cooperation on steroids.”

—Randy Nelson, Pixar University

Both cooperation and collaboration spring from the same latin origin, collaboratus, which means: to labor with. However; like many latin–based words still in use today, there are substantial differences in their historic and present-day meanings. The words collaborate and cooperate paint very different mental images. Even their choice in example sentences sheds light on the modern distance between the two words. You cooperate with the police, while you collaborate on intellectual endeavors. Cooperation signals that you are working with someone based on an obligation — the guy is a co-worker so you have to cooperate with him, no matter that you think he’s the spoon in the knife drawer. Simply working together towards a common outcome is merely cooperation, and we tend to agree with Randy Nelson on the subject. Collaboration carries with it a higher purpose. You collaborate with someone because you both understand that there is something more important at stake and you are putting your trust in each other to bring something good to the table.

This distinction is an important one to us. We built Jumpchart around the mantra that planning a website project actually constitutes the most crucial (and time consuming) portion of work towards reaching a launched site. We also believe that thorough planning, with the close collaboration of the client, can effectively side-step most project roadblocks and emergencies. Does it work? Well, we can only speak of our own experiences but the simple answer is, yes. Since we’ve started using Jumpchart (21 months ago) we have never had to restart a project from scratch. Never. We’ve also shortened the overall time it takes us to complete a project start-to-finish and vastly simplified our workflow. The reason for all of this? Collaboration.

With Jumpchart, we’ve been able to significantly reduce the number of steps in the build process based on that secret ingredient: Collaboration. Jumpchart not only allows, but encourages, the client to help with the process of planning and constructing a semi-working wireframe of their site. They can move content around, create links, add images and files, even click around in working copies of their wireframe. You’d be surprised how much of a difference this makes to the overall project- clients don’t have to wait around until someone emails them with a list of required content, they don’t have to wait until the design team shows them how their site will work with stacks of mockups, they don’t have to wait period. It’s immediate gratification, and who doesn’t like that?!

Another added benefit of enabling direct conversation is that it gives the client a sense of ownership in the project. We’ve gone over this a hundred times before but we’ll say it again because it’s so important: clients who feel ownership are clients who will fight for your agency. They will back up your work in their internal meetings and they will push to hire you again in the future. They become your evangelists within their own organization.

From the beginning we’ve tried to make Jumpchart as open and transparent as possible. Allowing your clients to work right alongside you may seem terrifying at first but we would encourage you to give it a try, even if only on a small scale at first. True collaboration can completely transform the way you run your business, making you more efficient and in the end, just plain happier. The old adage, “Two heads are better than one”, really is true. Collaboration is just another word for how you have to put those heads together.

Our heritage is in a company that builds bespoke websites for clients. Since the beginning of our business, we’ve always adhered to the idea that regardless of the vehicle we choose to use to tell it, our job was primarily that of a storyteller.

In the case of websites, we use pages, text, and images to tell that story. While we often coordinate the text and image creation for our clients, it’s always a two-sided street. Whether supplying, helping to create, or simply approving the content for a website, our clients are involved in the process.

There are those in our industry who chose to build websites without prior knowledge of the navigation or content for a website. We think it’s a bad approach. While there’s something to be said for planning for any eventuality, we think tailored pants just fit a little better. Would you design a website the same way if you knew it had 500 words per page instead of 100? Would you design it differently if it had 15 levels of sub navigation instead of 2? We would like to think the answer is yes…

When we developed Jumpchart, it was for that very reason. We wanted to design websites around the content rather than build a website first, and shoehorn the content in later.

So if today you are starting a new website project, we would ask that you have a good plan before starting. In architecture this would mean surveying the intended uses of the building, the intended square footage, the intended population. With websites we think the architecture should be decided by the content, and the structure should be as well.

If a website is like a building then it’s content plan is its blueprint.

Recently we carved some time in our schedule to work on A/B tests for Jumpchart’s sales site. I can honestly say- and it’s me doing the design for most of this, I feel like I just got an education. Here are a few things we worked extra hard on in the original versions of our sales sites:

• CSS based promo transitions.
• Video tours with audio commentary.
• Copy and bullet points describing the nuances of how the apps work.
• A unified toolbar for all our apps to encourage cross-browsing.
• Lots of little extras like Twitter links, links to our blog, and an email newsletter signup.

Our “b” and “c” test versions had none of these…

They were simple pages, with almost no content, one screenshot, and a signup form front-and-center. As it stands right now, one of the options, “c” is beating the original by a 97% margin. That’s double the conversion rate… Double.

It’s possible the features in the original are not wrong, but the combination of them leads to, well, less signups for our apps. Crushing, and painful. Not only because of all the lost time and energy creating those extra pages and features, but because of all the lost signups over the last three years.

What we tested.
To start off with, here are the three options we tested:

The original, including all of the above “special features”:

The “b” test which was a simplified version of the first, but without any of the extras. Signup form located right on the homepage- and a minimum of outbound links.

The “c” test was much like the “b” test, but moved the signup form higher, and had a lighter background, and an even bigger headline.

Why we tested it.

We arrived at these tests through a somewhat typical series of events. Like:

• At one point someone asked “do you think our pages are too dark? Would they be more inviting if they were lighter?”
• We read this article.
• We spent a lot of time studying successful app sales sites.
• And we made some wild guesses that always seemed fun to try.

Moving forward.

We’re sold on the usefulness of A/B Testing. We’ll continue to test new theories and check our reasoning. Still, I think it’s important to say that we won’t be ruled by this. Numbers aren’t the only thing we’re after. Apple knows they could sell more iPhones if they added starbursts, unicorns, and “sale” signs all over their site. But they’re not going to any time soon. We think it’s not just about getting there, it’s about getting there our way. So don’t expect us to try 41 shades of blue any time soon.

When all is said and done, it’s about making our sales site better, so people are more inclined to reach our (we think) awesome products. That’s what we’re aiming to do, and we’ll fiddle with the ways we do that as we go. However, we do seriously recommend you try out the http://google.com/websiteoptimizer on your site though. It’s easy to use, provides lots of options, pushes out detailed reports, and, most importantly, has definitely had an effect on our upcoming site redesigns.