SketchFlow from a developer point of view - Part I - Basics

This article is Part 1 of the series Sketchflow from a developer point of view.

Introduction

Sketchflow is a great tool for prototyping, that’s great for designers, but… for developers? of course !!!

In this article we are going to step through Sketchflow functionality from the point of view of a developer.

To check how Sketchflow works we will:

• Simulate the startup of simple project: a  local community web site, that will hold news / events / members plus and admin area.
• Insert video snippets in between the article to show how to perform certain operations using Sketchflow.

Why should I care?

I’m a developer… and I have near zero capacity of being a designer (well I can be a copy ideas from some cool websites), when I watch any webcast about Expression Sketchflow I just see “black T-Shirt guys” drawing and playing around layers, animations, nice bitmaps… what all this has to do with me? Well the answer is… more than you have ever thought.

All starts in the requirements gathering stage, somebody just meets with you or with a “vendor” / “commercial guy” / “functional expert whatever”, then the client give you some vague requirements and all the fun begins… you as a developer understand one thing, the client another, and of course client’s mind will change in time, something like:

• The client asked for a good cheap car.
• You started building a family car.
• The client ends up saying that he wanted an sports cars, is not that a good cheap car?

  Something that we developers have to keep in mind from day zero:

• We need a way to clearly show a customer what we have understood, and validate with him the requirements.
• We need a way to detect a serious change in the app before is too late.
• This validation / prototyping has to involve us in a fast process (days, weeks), but let the developer and client have a concise idea of the project they are talking.
• The client becomes a member of the team and has to constantly review new versions of the prototype and provide feedback.

Summarizing we need a tool that will let a client differentiate between an ISSUE and a CHANGE REQUEST:

• ISSUE: something you, developer, have misunderstood, you will implement it for free and the client will kick your…  :-(.
• CHANGE REQUEST: something that the clients realizes that was not in the original development scope but he wants it, you will add it to the scope and impact it… this means is a new feature, you can ask for some additional budget and timeline to develop it :-).

Sketchflow is the tool that will help you to cope with that areas at early project states.

Sketchflow what does it offer?

Sketchflow provides you a very quick & dirty way to build prototypes, it let’s you validate with the client in days something that could take you weeks or months using a traditional static prototyping stage + development.

Main highlights:

• Drag & Drop interface.
• You can directly work with hand drawn sketches, or start dragging and dropping sketch controls.
• Sketchflow controls are low fidelity, this means users won’t think the project is almost done (nice, can you deliver by next week?) and they will focus on the important things not details like: I want this button red and two pixels up.
• You can define navigation, animations, behaviors.
• Add realistic sample data.
• Under the hood is a Silverlight project with it’s XAML and code behind, this means is highly customizable, for instnace.: Let’s say you want to let the user choose a complex third party control from several vendors, you can just add it to your prototype ! same if you want to code some specific functionality.
• You can package and send your prototype to your client, he only will need to have the Silverlight plugin to be installed to run it, and what’s best this tool includes a feedback mechanism that allows users the option of directly adding comments / draw some feedback figures and send it to you (even is possible to share it in a SharePoint site).
• Documentation generation: it can generate a formal document for the sign off of the prototype.

Step 0: Dear Client

Dear client, from our last project we have learned that:

• We didn’t understand well the sitemap you envisioned, the initial comment you make “errr… ummm… no prob, figure out we can refine it later” turn into I want this page to be split into two, hey that’s not clear we need a new window… and we are one week before going live, of course changes had to be done because it was critical for the business.
• That simple let the user drag a product from the list and drop it into his check out list, turned to be a 3D animation including surround effects, I know it’s our fault, for sure you clearly define that at project startup when we were drinking beers in that noisy pub.
• Per your request we spend the first month of the project placing buttons in the exact right place, with the right color plus gradients, a pity that the product search page finally had a poor usability and we had to change completely the layout.
• (…)

We understand your frustration and apologize for the bad work, we are quite happy that you give us a second opportunity by starting a new project with us, this time we will try a new approach, we will add the following short prototyping stage:

• We will have an initial meeting where we are going to sketch how the application will be structured.
• Based on that sketches we will build a running prototype, then we will ask you to give the ok, and / or enter feedback in our prototyping tool (this feedback will be stored for the sake of traceability).
• Once you decide which screens need a more detailed design, we will update them, and again send you the prototype so you can evaluate and provide feedback.
• If you still don’t feel confident about how one of the pages would look in a real scenario, we can feed the page with real data (again, send prototype, validate, feedback, approve).
• Special animations / gestures / drag & drop operations will be implemented in the prototype, so you will be able to check them and give approval.
• If you still have doubts in some complex controls, we can just implement / try a third party one in the prototype and let you evaluate it and provide us feedback.
• Once all this steps are done, we will sign off the final version of the prototype plus a formal prototype document.
• Of course these requirements are not stone written, if later on you change your mind, no problem, we can estimate the change request, check the impact on budget and timeline.

Below you can find a diagram showing the workflow we have defined:

Step 1: Is that the navigation / site structure you want?

After the first meeting with our client, we know that he has a tight budget and wants to implement a simple community site, that will hold News, Events, and Members of the community, plus and administration module.Let’s sit down with the client and define the  sitemap and sketch (drawing with a physical paper / white board) each of the screens he wants to build, it could be something like (watch out developer trying to be a designer wannabe!):

Usually at this moment the client feels quite happy and asks us to start now the implementation of the full application, saying something like in a month or so we will perform a quick review before going live… right now we say… NOOOOOOOOOOOOOOOOOOOOOOO, let me build up a quick prototype, you can play with, if you don’t find anything that need to be changed, that’s ok but remember once this stage has been passed any feedback from your side would mean change request (will cost you money).

Let’s get started with Sketchflow, first we will create the project and sitemap:

Video Creating Sketchflow Project (low)

Video Creating Sketchflow Project (high)

Sample Project Creating Sketchflow Project

Now we are going to add the sketched navigation menu into our application:

Video Adding Navigation (low)

Video Adding Navigation (high)

Sample Project Adding Navigation

And let’s add our sketched screens:

Video Adding sketched screens (low)

Video Adding sketched screens (high)

Sample Project Adding sketched screens

Step 2: Hold on let me show you how to create visual feedback

Ok, first version of the prototype is ready to be demoed to the client, now how can I deploy it? When you export an Expression app you get two main files:

• Main XAP file: contains the application.
• HTML sample page: host the XAP.

You can choose whether to publish that content in a web site / intranet or whether to send that by mail in a zip file (the user will only have to double click on the HTML page to launch the prototype).

Now comes the fun part, the client starts browsing the app and calls you, Hey developer that’s not what we talked I want X,YZ… is this reaction familiar to you? You build or change something and finally that was not exactly what the client was expecting for, or on the other hand one of the stakeholders says I want it red and the other dude says I want it green…. your answer? Sorry, can you use the tool to enter the feedback? Once you are done please:

• Send me the generated feedback file out by mail (you can open it using Sketchflow and check the client’s inputs).
• Send that feedback to a SharePoint site (so feedback from every stake holder is centralized in a site and can be shared), that solve issues like:. Mr. Boss said I want it green, Mr Big Big Boss says I want it red, share thoughts and fight !).

Let’s see how this works in practice:

Video Deploying and Providing Feedback (low)

Video Deploying and Providing Feedback (high)

Sample Project Deploying and Providing Feedback

Step 3: I need more fidelity

Now our client is thinking… uh, whole day lost in meetings and they can only validate a sitemap with some chunky drawings I need more detail ! if you recall on step zero the client was the one that wanted to start implementing just only with the paper sketches, our client has started to think, we are on the right way !

One of the things our client didn’t understand well was the sketchy home page, we are going to replace that bitmap content with an Sketchflow controls based layout:

Video using sketchflow styled controls (low)

Video using sketchflow styled controls (high)

Sample Project using sketchflow styled controls

Now we send the new prototype to the client, the feedback that we get is that now the home/news page is exactly what he wanted, good job!

Part (II) Coming soon

That’s all for now, in the second part of this article, we will cover the following topics:

• Animation & Behaviors.
• Sample Data Binding + Custom Contros.
• Specs Sign off.
• Reusing and Sketchflow application in a real development, a good idea?
• Comparing Sketchflow with other prototyping tools.