If you are interested in building bad software with bugs and lots of mistakes, then this article isnt’ for you. If you are interested in moving your development team along faster, saving money and building a better product for your user, please read on. When Bytelion wireframes, it allows us to see the an application clearly. The final wireframe summarizes all of the thoughts held in people’s minds and ensures that everyone not only understands how the application solves your problem, but more importantly, it quickly and easily helps others understand what you are thinking. Wireframing is critical to all lean departments and especially technology startups.
How does wireframing save you money? Simple, it ensures that you have the right workflows up front. In this hypothetical, imagine if you omitted a key feature on a page that was pushed to production. In order to find the bug for this feature, you have paid for:
- UI Design (8 hours)
- UI Implementation (8 hours)
- Backend Implementation (12 hours)
- Quality Assurance (4 hours)
- Total=32 hours
If you had wireframe the issue, the bug would have cost you
- Wireframe (2 hours)
- Total=2 hours
Stealing of of NASA’s slides and making some slight modifications, the blue arrow indicates where wireframing is in the bug detection value stack. Used early, it is an awesome tool.
If you are a startup, every dollar you is extremely expensive and must be spent wisely. Why focus on fixing bugs in production when you can solve most of your problem in the first 2 weeks?
To read more about NASA and bugs, check out.
Too Many Wireframe Tools… Which One Should I use?
There are many tools on the market. We have used all of them. I could write pages upon pages of why some systems are better. Here are the tools that we thought were the top and why in no particular order.
MyBalsamiq – The desktop was by far the best user experience, but its ability to not sync with an online version make this not as usable because customers and team members email different versions of the application. Because we work in a distributed environment, this didn’t work for Bytelion.
Gliffy’s integration with Atlassian’s JIRA + Confluence suite make this tool amazing. However, it is so inflexible that maintaining a working wireframe falls apart. Sorry Atlassian, I still love you.
Azure – Bytelion loved the framework and it was our primary for years, but found the product confining in terms of our on online integration needs. It slowly came out of favor and was replaced by…. our new go to.
Pidoco – Yes, this is the wireframe company that you probably didn’t hear of. We didn’t either until we scoured the internet and tested everything we could. This tool is our new standard. There are 3 simple reasons by we love it:
- Single Page App (SPA) is super fast and responsive.
- Extremely flexible Workflow System…. THIS IS THE BIG ONE…. If you want to change a workflow, you can configure a workflow in a few minutes and keep different versions of the workflow. This is great for rapidly testing different UX interactions.
- Pages can be templated. If a designer changed the header in one location, the header changed for the entire app.
Note, we have no association with the Pidoco company at all. They did however chose to engineer their product well and didn’t take shortcuts. We respect that and think that they will come out on top of they can build enough market share.
Selecting Red Routes First
Now that you know what tool you are going to use after testing them all :- ) , you have to build your wireframes. For an application, you have different use cases for what a user needs to do. For example, if you are building a recipe app, you would need a user to do the following:
- A user needs to create an online profile
- The user needs to buy other recipes from other people.
- User needs to be able to generate their own custom avatar online
- User need to be able to post recipes to their Facebook account.
Of these use cases, you only want to select the most critical to making the application work. We call these red routes. In our scenario, we would only want to use these:
- User need to be able to post to their Facebook account.
- The user needs to buy ABC product.
A user needs to create an online profile User needs to be able to generate their own custom avatar online
We keep it simple and only wireframe the stuff we need.
Don’t be Lazy – Keep Your Wireframes Current!
One you create a set of wireframes that accurately reflect what you are trying to do, it is critical to keep it. These wireframes will come up over and over. For example, if you are designing an aspect of a project that you have not touched in 6 months, having your wireframes current with the design make this is snap. Thankfully, Pidoco makes this easy to do. It takes discipline to do this… keep up the discipline. It is cheaper, better, and more fulfilling for you in the long run!