Review: LucidChart

You know that saying about waiting for ages for a bus to arrive and then three turn up at the same time? Well, something similar seems to be happening in the world of online wireframing.

Recently we were very impressed with App Sketcher, a truly powerful yet surprisingly approachable tool whose feature set should worry the big boys such as Axure RP Pro. So, you can imagine my excitement when I chanced across yet another impressive-looking tool called LucidChart.

LucidChart is an html5-based web application which isn’t just suitable for wireframing; you can use it to do pretty much anything you might previously have turned to Microsoft Visio to do.  This makes it quite unusual in its scope, and a very intriguing tool indeed.

As a true cloud-based app, there’s nothing to install and in fact there’s a free trial of all account types so there’s little risk. Of course, being an html5 web application, it won’t run on archaic or downscale browsers (such as Internet Explorer 7 or earlier) although it did seem to run fine on Internet Explorer 8, and of course on decent modern browsers it behaved just as it ought to.

The Workspace

When you first start using LucidChart, you are presented with a clean workspace somewhat reminiscent of Visio, with palettes to the left hand side and a grid-based canvas on which you can place shapes. I’d reckon most any seasoned computer user would be able to figure out what was what easily.

In use, it’s easy to forget that this isn’t a desktop application, given its comprehensive toolbars and desktop-app like features…

As I want to concentrate on how LucidChart works for the prototyping professional, it’s important to note that to use it for wireframing you’ll need to choose which shape sets you want to use – and the obvious ones are the UI Mockups and perhaps iPhone sets.

This is achieved by clicking on a ‘Manage Library’ button located in the bottom left-hand corner.  Really straightforward although it would be nice to have it selected by default (but then, I am biased ;-).

This library contains a pretty impressive selection of widgets, although I must admit that I did wonder about whether it was possible to add my own (or a third party) set; this would be handy especially if the web community started to create and share new shapes/widgets much as I’ve seen for Balsamiq.

How it works

As you’d expect, it’s very similar to the competition in as much as it’s a drag-and-drop interface for selecting and placing an element followed by configuration and customisation.

When I review prototyping and wireframing tools I always like to have some sort of objective in mind, so today I want to create a Twitter-like mockup.

The first task is usually dragging a main container widget across – in LucidChart’s case there are a selection of different containers including a browser window, conventional form container, popup dialog and so forth. This is quite useful, and I was quite pleased to see that each general type of UI element was categorised appropriately. This makes it easier to find what you’re looking for.

Here’s something I knocked together in around five minutes or so:

I had some difficulties at first in finding where I had to go to add an extra tab. It seems that the way to do this is by selecting the tab outline and then using the + and – buttons on the context-sensitive formatting toolbar:

Going deeper

Of course, none of what I’ve just done is particularly ground-breaking; in fact, compared to an installable tool like Balsamiq, it did take me a little while longer to create this particular basic mockup. Admittedly, this might be due to the fact that I’ve been using Balsamiq for almost two years now and am very familiar with how it all works, but I have to say that true web applications do represent something of a compromise, no matter how slick the UI. Partly this is just the nature of running in a browser, but equally it could be the fact that unlike desktop applications, there is often variation in the feedback that one gets from the actual operation of the UI elements.

During the course of my LucidChart review, I did find myself on occasion scrolling all over the place by accident, as with my machine it appears that the scrolling is a bit too sensitive. On the other hand, that could be just the fact I was using a slightly temperamental trackpad.  I also found occasional difficulty in selecting the element in the right way so that I could (say) edit its text – but these are minor things and I am sure that, given some more time, I’d quickly become accustomed to the this.

Collaboration is the key

The thing that excites me most about LucidChart is the fact that multiple team-mates can edit the same wireframe at the same time. This is a complete revelation. Now, due to time constraints I wasn’t able to get a second person to work on my sample, so I started up a different browser and tried the link.

At the top of the page there is a sharing link that can be sent to co-workers who can then simply muck-in with the wireframing.  As easy as that!

In the past I’ve seen a few different types of application do something similar – and it can be a strange experience to be honest, though with some restraint between team members it can be incredibly liberating. We’re not talking about rudimentary ‘locking’ and ‘refresh’ style collaboration – no, far from it. If your colleague is working on your wireframe and moves a button, you see that button move more or less immediately.

It’s as if there’s a ghost in the machine ;-)

The implications and uses of real-time multi-user collaboration

This style of collaboration can really break down conventional workflow barriers if you’re working as part of a distributed team.  As your work is saved in the cloud, it’s possible to access it from any location (provided you have an internet connection and an html5 compatible browser):

For example, I’m currently doing some design and development work for a large financial client. The team I’m a part of consists of myself and a manager in one office, a business analyst in another and a developer in yet another office. We’re working through requirements specification and technical design (which includes wireframes) and the physically separate locations thing is creating its own set of problems.

A tool like this, deployed team-wide, would mean that we could be bouncing design ideas and concepts off each other in real-time, supported perhaps by Skype calls. Of course, in that particular example corporate bureaucracy and inflexibility in terms of ‘third party software’ (which deviates from a very limited and draconian standard build) means that there’s next to no chance to introduce such a tool. Which is a big shame really.

On that subject, it’s worth mentioning one pitfall for using this in larger companies: the cloud-based file storage. I know from experience that storing anything work-related off-site is met with the most extreme resistance in most large companies, but perhaps over time such companies will begin to realise that working in the cloud doesn’t just imply a new buzzword to wheel out in PowerPoint presentations.

Companies need to walk the walk as well as talk the talk when it comes to adopting the opportunities that cloud computing offers. Anyway, minor rant over…

Getting back to LucidChart’s collaborative nature, it’s worth acknowledging that many UX practitioners around the world are working on distributed project teams and LucidChart could be the perfect solution for many, at a really attractive price (from around $25/month for a team package, or $9.95/month for a Professional package).

Is it for you?

With so much choice out there, it’s always going to be difficult to definitively choose one tool. However, if you are working in collaboration with others, the real-time multi-user operation of LucidChart, combined with its capability and polish, make it a very compelling choice indeed.

About John Clark

My name is John Clark and I previously ran a software house called Reynard Thomson, from which this blog originally grew. In the meantime, we launched a video-based user testing service (Kupima) which didn't really take off, and I have since moved into a new field specialising on software-based research & development consultancy. I'm active on LinkedIn, and would love to connect to anyone who has an interest in software prototyping or R&D:
This entry was posted in Software Review and tagged , , , , . Bookmark the permalink.

2 Responses to Review: LucidChart

  1. RealSpace says:

    Very informative and the images are really helpful. I also wonder if there is a way to get a preferred shape set on default.

  2. Jamika Reynolds says:

    You really make it seem so easy with your presentation but I find this
    topic to be really something that I think I would never understand.

    It seems too complex and extremely broad for me. I’m looking forward for your next post, I’ll try to get the hang of it!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>