The Art of the WordPress Startup: Part 17

Wireframing

This post is part 17 of a series on how to launch your startup on WordPress. Last time I talked about the importance of having good grammar and writing skills as a founder, whether it’s for raising capital, communicating with customers/clients, or even employees. This time we’ll talk about something a lot of founders hate to do and like to skip over, proper wire-framing.

I’ll explain why it’s important, the various ways to do it, and even list/review some tools that you can try out. Yes some blogs or self-proclaimed gurus will tell you it’s a waste of time and it’s better to just start throwing stuff together. I’ll make a case for why that’s a stupid idea (unless you’re at a hackathon or something where it’s literally unfeasible). Even startups at Y-Combinator wire-frame, as partner Garry Tan has posted on Quora that he often helps member companies with it. They’re on a time crunch to present at Demo Day and still find time for it, and you should too.

Why You Should Do It

Let’s start with why it’s important to wireframe your idea/app before building it. Is it really worth all the time and hassle, and spending a few bucks a month on a SaaS product instead of just diving in head first and plowing away? The short answer is yes, without a doubt. Let me explain why.

It’s faster and cheaper to pivot and adjust as you go. If you think you’ve got your MVP in your head and nothing will change between now and when it’s ready for beta, you’ve got a wake-up call coming. The end result (even an alpha or beta) almost never ends up matching what your initial idea or mental wire-frame was. Oh, it would be so nice if it did. However, you’ll learn things or run into walls along the way and change how things should work quite often. In fact, it’s a great exercise when you’ve launched to briefly look back and see how far apart the two are!

So rather than scrapping tons of code and design assets you either created or hired someone to create (either way it cost you something, time or money), it’s much more intelligent to work through the flow using wire-frames and scrap or adjust those. So not only is it cheaper and a better strategy, it’s also much faster. When launching something for yourself or even a client, time to market is extremely important. Do you want to re-wire that one signup process or re-Photoshop and code it? That little voice inside your head just answered that for you.

So aside from being more efficient (least waste of effort), it’s also more effective, and there’s a difference. Wire-framing is more effective because it’s more adequate to accomplish the intended or expected result, a great web app and/or site. You get to display the site architecture visually and spend the proper time evaluating the flow. If you’re building the real thing on the fly you’ll be spending so much time doing so that you’ll tend to cut your review process short. Wire-framing also pushes usability to the forefront because you’re working with a simplified layout. Rather than being wowed by a beautiful design, you look at your flow and layouts more objectively. Things like ease-of-use, naming of links, conversion paths, navigation/feature placement and image locations tend to stand out more and be easier to evaluate. Think back to anatomy class, and how they introduce it to you via a skeleton. Repeat after me… the wire-frame is my skeleton to make my application flow like water.

Another side benefit we often forget is that wire-framing is more versatile and can be done by nearly anyone on the team. Certainly some people are better at it than others and in larger organizations there is someone who does only that, however if the designer is tied up working on logo concepts and the developer is doing research on hosting and long term architecture, it’s the perfect chance to help out if you’re the hustler/COO on the team. The hustler can work on figuring out which wire-frame tool to use and start making progress, and then share things with the team as they go along and revise accordingly. A good idea is to whiteboard or sketch on paper the basic layout idea/concept, and then tear someone loose on the actual process. Not every team is going to have a former UX/UI person from Google, so try to figure out who has the time and brainpower to tackle it.

All of the above is critically important if you’re a solo founder and are going to be contracting out your design/development. You will save a ton of money on revisions since you’ll tackle those during wire-framing, and not only that, the quotes you get from freelance developers and designers will be much less than they would’ve been if you pitched them an abstract idea or showed them something on a napkin. When that happens, freelancers put some padding into their quote because oftentimes they really don’t know what they’ll be building or how much work it will entail. This is probably the #1 reason contracted out projects fail. Most designers and devs tell me I wouldn’t believe what some of the project outlines they receive look like. Sometimes it’s literally just a paragraph of text!

Online the commonly cited cheesy line often goes something like… “Would you build a house without a blueprint?”

Get the full 20 part series: “Art of the WordPress Startup” as an E-book.

Get it!

How To Do It

So now that we’ve established that not skipping wireframing is both more efficient and effective, let’s figure out how to do it and then in the next section we’ll look at some of the more popular tools to make it easy on us. Rather than giving you a long spiel about how to do it as there are various approaches out there, I’ll link to some helpful articles you can read later that describe the process in great detail.

Here are some worth taking a look at:

At a high level the idea is to look for inspiration, figure out the process that works best for you, and pick your tool to begin. Some choose to do their wireframes in a very basic fashion like the picture above, and some choose to add colors and even real design elements. How detailed you want to get will depend on how much time you have to spend on it and personal preference. I kind of like to do mine somewhere in the middle between basic skeleton and full blown designed prototypes.

Useful Tools

Thankfully a lot of companies have popped up in recent years offering free or affordable SaaS tools to get the job done. In the old days it was literally PowerPoint, Keynote, or some fancy design program that ran on your machine like Adobe CS. However, you no longer need to try and re-work a presentation tool or download expensive software to create excellent wireframes. That means there is literally no excuse these days to skip it other than pure laziness.

Freebies

Everyone likes free. In general the free tools are not as sophisticated as paid tools but like anything else some free tools are better than some paid ones. I personally prefer more advanced paid tools as they save tons of time and have more flexibility in terms of sharing/collaborating which you’ll find useful unless you’re flying solo and building something pretty simple.

  • MockFlow has a free plan that limits the # of projects and users. Their focus is on making the process super easy. Their paid plans are affordable.
  • Cacoo has a free plan that has some limitations as well and some affordable paid plans. Their focus is on drawing stuff, so wireframes, flow charts, diagrams, and more.
  • UXPin has a free 30 day trial and in addition their unlimited plan is so cheap that it’s almost free at just $15/mo.
  • Gliffy has a free plan and their paid plans are also so cheap they might as well be free.

Paid Options

  • Balsamiq – this is probably the most successful and well-known paid tool that focuses exclusively on wireframing, at least in my opinion. They offer both web and downloadable versions.
  • Mockingbird – this is another popular and super affordable option. It used to be totally free but they’ve since changed that. You can link mockups together to make a clickable prototype.
  • Axure RP – they allow you to download their software for free and evaluate it for 30 days. Axure is a little more advanced in that it allows you to create clickable wireframe prototypes. I personally prefer online SaaS offerings, but some people swear by it and I’ll probably download and try it out in the near future to see if it’s worth the precious space on my SSD.
  • Omnigraffle – this is another hugely popular option and it is broader than just wireframes but many use it for just that.
  • Justinmind – this app focuses on helping you create clickable wireframes and prototypes. You can start with images, their templates, your own wires, or even from scratch.
  • Lucidchart – this app is a tool that many use for wireframes, but can also be used for flow charts and diagrams.

Personally, for mobile prototyping and wireframing I swear by Proto.io but this series is geared towards WordPress and web apps, and for that I like to pair Balsamiq (which focuses purely on wireframing and not prototyping) with a tool (Solidify) to make the wires clickable, and below is a list of other apps to do just that.

Make It Clickable

  • Solidify – this is my favorite application for this aspect. They have done an excellent job of balancing features for power users with simplicity. You can even run tests with real users and get feedback before you build something that sucks!
  • Concept.ly – this application has a very simple interface and lets you upload your wires and make them clickable.
  • InVision – this app focuses largely on team collaboration/feedback and hence is used by household names like PayPal, Yammer, ZenDesk, Adobe, Zappos, Oracle, Dell, and Yahoo. You simply upload the wireframes or even design comps and then make them interactive and collaborative. If you have a ton of stakeholders involved or a really large starting team, then this one might make the most sense.

0 Comments