It is now on to my favorite phase in the process –wireframes. This is where things begin to take shape and you can start to see what, whatever it is that you are building, is going to look like. I like to use analogies, so picture this if you will: Think of a wireframe design just like walking through the new house you are having built when just the studs are up. You can begin to see room designs, layouts, sizes, etc. In your new home, you begin to see navigation –this is what I will see from the front door, this is what the view from the kitchen will be, this is how many steps from the master bed room to the nursery that it really is. Prototypes only get you so far, like new home blueprints, but wireframes really give the project some life.
Team: Typically, in my experience, the same team that worked on the initial prototype ideas should gather to work on the wireframes. Same meeting formats, multiple times per week during high creativity times. A meeting facilitator, note taker, and now someone with the skills to use a wireframe design tool. Be sure to allow for time to review the designs from the last meeting and don’t be afraid to make changes and adjustments here or there.
Step 1: Navigation – How will users get around in your new application? Menus, buttons, icons, tools, guides, directions, help are starting blocks. Then fields, labels, tables, data structures begin to emerge. Finally, you get to data grouping, refactoring, and hard decisions about what goes where, what is needed, what is useful and the hardest part, what is unnecessary and what can be eliminated.
If you think this is an easy process, then you are probably doing it wrong. It takes time and revisions to get things laid out just right. Don’t let one person wireframe everything in a vacuum, create opportunities to share designs and ideas with the rest of the team. Involve development, quality assurance, training, sales, support, business development, i.e. any department that has a stake in the product should be involved in the design and development phases. Wireframes are the easiest and earliest place to assemble your stakeholder team. Be sure to get them and keep them involved in the process.
Step 2: Layouts – Now that you have some basic navigation, it is time to begin laying out some structures. These begin with data elements, fields, labels, buttons, tables, grids, etc. Getting the right information on the screen at the right time and in the right place is the key here. Focus on what you need and not what it looks like. Spend some time thinking about how each screen will be used, when it will be used, and what can be accomplished with this information. Finally, after several iterations, you should have a good understanding of what is needed and where it is best organized.
Remember that changing the layouts and designs at the wireframe stage are the easiest they are going to be. So try not to get married to one design idea and then become resistant to change. Use this phase to try out ideas and work through scenarios with your stakeholders and your user personas. Ensure that you have looked at the designs from multiple perspectives and seek out other opinions.
Step 3: Workflows and Interaction – You have some basic navigation and you have some rudimentary layouts. Now, how do things interact with each other? This is where you start to duplicate navigation and layouts and create stories using them in various ways. What are the workflows that users will take? What are the steps necessary to complete a particular process? What does someone need to do to complete a specific set of procedures?
[Be sure to use a professional wireframe tool like Balsamic Mockups (my favorite), Omnigraffle, Axure RP, Microsoft Visio, etc. Save yourself some time and engage with J&S Tech Designs, we can help you put your wireframe designs together quickly, efficiently and professionally.]
Think of this like a comic book, you are laying out the steps necessary to move from A to B to C. Try to answer specific questions that are relevant to your custom software application. Give good illustrations using the navigation and layout elements that you have designed. Tweak them as necessary to show a process. For example, if your process starts with an empty screen and the user fills out some data, show that. Then, show the users clicking the appropriate button or action to take the next step. Be sure to show before / after wireframes to illustrate change.
Make sure that you use lots of callouts in your wireframes to explain what is happening on the screen. This is good solid built-in documentation that helps to explain the process to others. Use highlighting for emphasis. Only try to show one thing happening at one time as you move through various workflows. This helps keep things simple and more easily understood.
Review & Feedback: Now you are headed back to the customers again. This is where things begin to develop in their minds as well. You have some semblance of screens and layouts, you have workflows that can illustrate process and show usage, and you have visuals that are beginning to paint a picture in their minds of how all this is going to work for them. Don’t be surprised if the level of feedback and engagement is higher than in previous steps. Before you were talking in concepts and showing only very rough outlines. Now things are beginning to take shape and more people can start to see the applications and usage of your software. If a picture is worth a thousand words; then a wireframe is worth thousands of lines of code for sure!
Next Steps: Ok, so we are now done with wireframe designs and layouts. We have a good idea where things are headed, we have talked to customers again, and they are getting excited. It is now time to move on to some initial software designs.
Read: Previous Article
Read: Next Article
