This post was written by Jessica Orellanes and Leon Barnard of Balsamiq. Balsamiq is a rapid wireframing tool that combines the simplicity of paper sketching with the power of a digital tool so that teams can focus on what's important.
Many entrepreneurs and product managers (PMs) work with freelance developers at some point in their career. It could be because their company has chosen to use them for flexibility or cost reasons, or it could be that you've got a great idea for an app or website, and don't know anyone who can build it for you.
Freelance software development has benefits for both sides — developers can pick and choose projects based on their interest and availability, and hiring teams can easily scale up or down projects based on their needs.
But working with freelance developers also has its challenges, as anyone who has worked with one, or as one, can attest.
Challenges when working with freelance developers
Location, location, location
Since freelance developers usually work remotely, communication typically happens over digital tools such as email and chat, often across multiple timezones. When you and a developer are in different parts of the world, communication may happen asynchronously, which can slow a project down and amplify the impact of miscommunication.
This can be difficult not only for a PM or entrepreneur who is trying to describe what they want to build, but for the developer who is trying to understand.
Different skillsets; different mindsets
But some challenges are inherent to the software development process, regardless of whether the developers are freelancers. Developers are specialists. They are hired for their intimate knowledge of technology and application design. Similarly, those with app ideas are specialists in particular markets or customer needs.
Very few people have the in-depth understanding of both required to build a great product. It takes a bit of a paradigm shift to jump from the developer mindset to the business or customer mindset and vice-versa. Tools can help to bridge that gap, but it can be very helpful to first acknowledge that it exists.
The more you know...
Finally, ideas often arrive missing important details. You may know exactly what the application should do, or who the target users are, but you may not know how to distribute or support it, what to charge for it, or what it should look or feel like. And the more you don't know, the more difficult it will be to convey your vision to the developer building it. This is one of the main reasons that software projects fail.
Tools, again, can help greatly to clarify what you don't know and what you need to figure out. But it's also okay not to know every single detail, since every project evolves and you should be open to changes. You should also be open to input from your developer and others, since they are certainly more knowledgeable about some critical parts of it.
Wireframing Gets Everyone on the Same Page
An essential challenge of working with freelance developers is a lack of clarity about what they're building. It can be stated as a failure to get both sides "on the same page," even when communication is frequent. In addition to defining the goal for your product, sketching it out will provide you with more clarity about your vision. One of the most common ways of doing this is by creating a wireframe.
A wireframe sketch
What is Wireframing?
Wireframing is the process of creating a wireframe, which is a low fidelity visual representation of a user interface intended to convey the basic concept, layout, and flow of the envisioned end product.
According to this web design tutorial on "Getting Started with Wireframes", "they are not interactive, and do not show much detail, but create a simple design that guides the project."
The author later summarizes the reason they are used across a software team:
Wireframes are invaluable in keeping everyone on the same page. Developers use wireframes to get a clear picture of the elements that they will need to code,...business analysts use wireframes to visually support the business rules and interaction requirements, business stakeholders review wireframes to ensure that requirements and objectives are met through the design.
Wireframes are an artifact that everyone can understand and easily digest. They are visual, but not so detailed as to be overwhelming. They are generally free of details that are unimportant in the early phases of the project, such as fonts and colors or preferences for technologies.
Wireframes can be created by sketching on paper, as shown above, or by using diagramming or presentation tools that many PMs and entrepreneurs regularly use, like Omnigraffle, Visio, or even Powerpoint or Keynote. There are also dedicated tools for the specific purpose of creating user interface wireframes. Designing with a wireframing tool makes it easier to edit and iterate on ideas than sketching on paper. One of the first and most popular wireframing tools is Balsamiq Mockups. A good wireframing tool should be easy to learn and quick to create wireframes with, such as through drag-and-drop UI controls.
Here are few examples of wireframes created with Balsamiq Mockups:
Wireframing Allows the Best Design to Come Out
Unlike prototypes, which can be used to validate specific features and flows with real users before shipping, wireframes shine in the early and intermediate phases as the layout and workflow are being fleshed out. The reason for wireframing is not to test one specific design, but to explore many concepts in order to allow the best ones to rise to the surface. In "How to Adopt an Iterative Approach to UI Design", Paul Boag writes:
There is no right way to create a user interface... but there is a shift away from a more linear approach to something more iterative, where collaboration is key and ideas are continually validated.
The reason to iterate early, rather than waiting until coding has started is clear: code is expensive. The hourly rate for an iOS developer can be up to $150 per hour, which can add a huge cost if UX or design issues are identified after code is already written. Wireframes are much cheaper to create, and major changes can take hours instead of weeks.
A full set of wireframes can be created in an afternoon.
A great way to ensure that last-minute changes don't “hijack” the project is to involve developers early in the process. Design and development should overlap. In "Development is Design", Brad Frost writes that development is not completely detached from the design process. He writes that you can't assume "that you can design everything in isolation then just throw things over the fence to get built."
Another reason to involve developers during the design phase is because of their expertise about the technology. Experienced freelance developers can often provide guidance on best practices — when and where certain things can be included, as well as things to avoid.
Additionally, if you have the time and resources, you can reach out to others on your team or even potential/current customers to get feedback and input along the design process. Paul Boag encourages collaborative wireframing sessions with several stakeholders, saying "each has a unique contribution to make, but more importantly, by bringing them into the process, they feel listened to and engaged."
Revision, iteration, and collaboration are they keys to getting the design right. Don't limit yourself to your first idea!
Wireframing Tips and Tricks
While wireframing is something that anyone can do, becoming a wireframe wizard takes time and practice. Here are a few tips to get you started on the right foot:
-
Know what to include and what to leave out. In her web design tutorial, Nicole Saidy lists the elements of a wireframe, including: content, structure, and hierarchy. She advises leaving out graphical elements and final design details.
-
Iterate towards a Minimum Viable Product (MVP). Your first wireframe might include every feature that you eventually want in the product, but removing "nice to have" and other features that aren't central to the purpose will result in a product that is easier to use, build, and sell.
Here’s a tip from the "8 Steps to Building an App from Scratch": "If you can’t help yourself, then sketch 2 versions: a basic version and the final version in your dreams." For more on this, see this post called "The First Wireframes are 'Version 3'".
-
Push yourself to generate more ideas. Before refining towards your MVP, you should have a selection of ideas to choose from, to make it easier to pick and choose the more important and best ones. "5 Exercises to Engage Clients and Stop You Wireframing Alone" suggests the "six up" exercise, where you try to create six different variations of a single screen. The result is that you often generate alternatives that weren't immediately obvious.
-
Learn the basics of User Interface (UI) design. Even if you aren't a designer, you can learn some fundamentals of good UI design fairly quickly. A little knowledge here will go a long way for the user experience of your project. There are many helpful guidelines and examples of UI best practices. You can find a starter kit for the most basic elements here.
Wireframing is a technique that is used across all types of software products and teams to create successful projects. And its collaborative and visual nature are perfectly suited to help you communicate your idea with a freelance developer.
I hope this article has been helpful. Happy wireframing!
