SketchFlow – Client Interaction Made Easy:

One of the most tedious steps when starting a new project is mapping workflow. It acts as the benchmark for the rest of your application, but the initial idea hardly ever sticks. Getting sidetracked during the design process is as certain as death and taxes. Trying to represent another's vision is a time-consuming process that often causes delays due to miscommunication. A client often won’t be interested in the flow of a program, but in how it looks or whether it will sell. Clients propose one thing and a developer will interpret it differently, purely because of different mindsets.

During design, we use fonts and colours that we are familiar with. When pitching the design, this is the first thing the client notices. It draws the client's attention away from the functionality of the application.

How do we avoid this problem until the basic functionality is complete? When I discovered SketchFlow, I felt like screaming, "Eureka!" This tool not only makes workflow mock-ups unfathomably easy, but it focuses on the simple things needed to help developers clarify the bigger goals.

This however, is not the only gun in SketchFlow’s arsenal. Clients can actually see the progress of a design and present feedback on it instantly. This feedback, in its purest form, is packaged and relayed to the designer with notes and ideas in place. It avoids confusion and speeds up the design process by focusing on core components. It gives clients the power they really want, namely being involved and in control.

Listing 1.1 shows screens as displayed in a ‘SketchFlow Map’ format. This gives a clear indication of which screens are connected. Developers might know a child window from a UserControl but to clients this might be a foreign concept. SketchFlow’s enables the designer to give different screens a Visual Tag. This makes it easier for the client to read what is being presented.

Listing 1.1.

Listing 1.2 shows the core of what the client sees. SketchFlow focuses on functionality of design, instead of image. Designs are based on a non-colour, non-font example. This helps the client to stay focused on what the program should do instead of what it looks like.

Listing 1.2.

Listing 1.3 displays SketchFlow as the client would see it. From here the client can view the map, navigate between screens individually, or follow the flow of the program as it would be in real-time. It’s published client side and makes the communication much easier. When something is unclear to the client, they can easily have a quick look instead of taking the long road through developers, designers etc.

Listing 1.3.

Listing 1.4 displays the proverbial honey of SketchFlow.

The client can draw and highlight areas on the screen and add text as notes. This gives maximum feedback and can visually present an idea, which is sometimes easier than verbalising it. It makes communication between designer and client much more reliable, which cuts out time delays on trying to decipher concepts.

Listing 1.4

SkethFlow holds many treasures for a designer. Clients are often blindsided by the end product, which takes focus off of what is important. We need to crawl before walking; SketchFlow aids in perfecting the core steps of applications before they can adopt their full potential.