UX, SketchFlow, & Prototyping

Traditionally our strengths at Sogeti have been in the “making it work” arena rather than the “making it look good” arena.   That is changing as it is important that consultants to be skilled not only in developing the back end but also the front end.  UX is short for User Experience. While it may be new to some of us, it is important for all of us.   The user experience in the end is what dictates the success of an engagement where any end user is involved.  Being able to illustrate that user experience early in the sales and delivery process brings success faster.

When pitching or developing a solution it is very important to be able to quickly create compelling prototypes that can make people excited about an idea and advertise what we can do in an effective manner.  Prototypes need to be cost effective and give that immediate business value-add.

Many of us when we create design do it at a time when we really are not paid for the initial stages of that design; we have to answer to an RFP or in a corporate setting we have a proposal that hasn’t been approved yet. 

In the past, getting the design right meant a fairly labor intensive process that involved a lot of administrative overhead on the part of the designer / developer.    So much overhead in fact that we often leave RFPs with a very simple high level design represented in a single Visio diagram, or textual explanation. Prudence dictates that spending the time may not be worth the effort or there isn’t enough time on top of billing for other projects to get the level of design that we need.   Often times we require the client to trust us to get the more detailed design correct after they’ve hired us based on a simple high level design or references where we’ve completed that work in the past.

Even when we get into the detailed design of a project we have struggled with quick prototypes.  On a past project we used Visual Studio and actual asp.net pages and controls to model the design.  It was thought that we could then more quickly transition the design into the actual application. The pages were static representations of how the page would look in the application with no actual wiring, no interactivity, no state transitions, and minimal style queues.  We would then take a screenshot of each mocked up page, group it with a set of functionally related pages, and present them via projector at a joint application design session with the end users.  During the sessions we would cycle through each page getting feedback on each page while we marked up the screenshot with what was essentially Paint-like tool.   We then would iterate through the process again.   When we all agreed on the functionality of the page we then cut and paste the final iteration of the screen into the Business and Technical requirements documents for additional review.  

Overall this process worked, but it was very labor intensive and not quite agile enough.  More importantly however it presented challenges when it came to the overall flow of the application and getting things consistent in terms of styling and control use which in turn produced many downstream discussions.

Fortunately today we need not go through much of the same troubles and headaches involved in that process.  With the introduction of SketchFlow in Expression Blend 3 we could save time by orders of magnitude and produce better design.  SketchFlow is a prototyping tool that encapsulates everything we were doing in our old process and makes it much easier, more intuitive, and leads to better design.   

Christian Schormann, the Group Program Manager for Expression Blend, gave a one hour overview at the MIX09 conference of how SketchFlow in Expression Blend 3 works.  I recommend watching it.

 He shows that a great design process can help to:

• Communicate design ideas fast and efficiently
• Communicate the value of Sketching and Prototyping
• Explore a multitude of ideas rapidly, timely, inexpensively 

He also shows how SketchFlow supports the idea of an evolution of design.

• Quickly experiment with dynamic UX
• Fast, plentiful, disposable, inexpensive – Significantly lower cost for design exploration
• Communicate design intent
• Present, Collect and evaluate feedback
• Provide immediate business value
• Deliver compelling proposals to clients quickly and cost effectively – Make prototypes real with navigation, data, behaviors
• Fast and easy prototyping – Evolve from storyboards to rich prototypes

One of the great design elements of SketchFlow is that it comes with sketch fonts and sketch like controls that can be used to represent the design concept.  

It’s important not to mock up models that are too technical from the start.  That is, placing your navigation, buttons, and other controls as they would be actually rendered on the initial design.  Doing so makes the stakeholder focus on the actual rendering of those controls and not the overall feel and flow of the application. 

Another feature (and one of the most important ones) of SketchFlow is the feedback collection tool.   Enabling integrated feedback speeds up the iteration process while ensuring adequate stakeholder buy in.  There are two key parts to feedback in SketchFlow.  The first being that the design can be sent o stakeholders which they can preview in a preview window or on a website and note their feedback directly on the page or SketchFlow player.  This cuts down on administrative and meeting time.  The second key component is that that once stakeholders send the feedback back to the designer the designer can overlay the feedback on top of the design to assist in making the changes.

The SketchFlow player is not part of Expression Blend; it is part of the “prototype” project, a new project type. The project itself is redistributable including the player. The stakeholders have access to it via a browser for Silverlight types of projects and can be included in an archive or zip file for WPF applications.

 Another great feature is the ability to automatically generate design documentation.  At any point in time during the making of a prototype SketchFlow allows the generation of design documentation via export to Microsoft Word.  It generates the design document where every screen in the application has an entry in the table of contents, each state of those screens get created as a sub section. The automatic generation includes the overall application flow diagram and screenshots for each page and state.  This can be used to very quickly get documentation for stakeholders to red line or for creating initial detailed specs.

Utilizing SketchFlow and Expression Blend also solves the problems of:

• modeling states and transitions – this is very difficult to achieve with static screenshots.
• generating sample data -  it allows the mock up of a meaningful and interactive sample data without the need to create an actual data source
• modeling interactive behaviors – packaged extensible building blocks of user activities – like drag and drop
• leveraging existing design elements – via Adobe Photoshop Imports

SketchFlow has brought the ability to do quick prototyping and design to a broader audience that fits with today’s development methodologies of quick, iterative, and collaborative.  Everything in a SketchFlow project is a standard object in a Visual Studio project. Everything that gets created is a reusable asset.  

In the not too distant future I can envision a Sogeti gallery of reusable UI objects and components that will not only help us design applications at a higher level when delivering, but will help us leverage our experiences in a tangible way when designing a prototype for a demonstration or RFP. 

Check out Expression Blend 3 Preview