Developer – Designer Workflow Story from Infusion Development


Woodgroove Financial online demonstrator has been gaining quite a bit popularity within the financial industry to show what future rich interactive web banking applications could be like. I decided to talk to the architects behind the inspirational demo: Chris Ching (Lead Developer, Infusion Development Toronto Office) and Douglas Gregory (Lead Designer, Frozen North Productions Waterloo) about their experience of working together on the application. You can see a short demo of the app below and get the source code of the demo here.

1. What is your role at work? What are the technology and tools that you use at work currently?

Chris: I am a consultant and lead Silverlight developer in the UX practice at Infusion Development. We build solutions in WPF, Silverlight, and ASP.NET among other technologies and we work with other groups at Infusion to meet their user experience needs. We use many of the tools in the Microsoft Development platform including Visual Studio Team System and Expression Studio.

Douglas: I'm lead designer at Frozen North Productions, an Infusion Angels company (Infusion Development sister company), as well as a User Experience designer for Infusion Development. My work includes game designs, concept illustrations, and user interface graphics. I use pencil-and-paper, graphics software like Portalgraphics openCanvas and Adobe Photoshop, and word processing software like Microsoft Word and Adobe InDesign.  I also put together game and technology prototypes using tools like Adobe Flash, AMD/ATI RenderMonkey, and console-specific developer tools.

2. Give a brief description of what the Financial Demonstrator Application is about? What technology and tools did you use for developing the application?

The Woodgrove Financial application is composed of numerous financial scenarios that the customers of a bank would use. The goal for creating something like this is two-fold. First, it showcases innovative UI experiences/visualizations for existing and completely new financial scenarios and second, it demonstrates the capabilities of Silverlight.

Chris: As for technology and tools, the developers used Visual Studio 2008 and the Silverlight tools for Visual Studio.

Douglas: The designers used a combination of Adobe Illustrator and Flash, Microsoft XAMLPad, Expression Design, and Expression Blend.

3. Have you worked on Silverlight project prior to this? How did you divide work for this project (e.g. Designer vs. Developer)?

Chris: Silverlight development was very easy to pick up since we were able to use C# and work in Visual Studio. We divided the work logically between designers and developers.  The designers created the UI in Blend and the developers wrote the business logic and hooked up the interactions for the UI elements. Given the XAML from the designers, the developers broke out the common UI elements into reuseable controls and re-constructed the layout.

Douglas: The visual side of this project was handled by three designers: one graphic designer to create the base style palette, myself to translate his work into XAML and produce additional graphics, and another designer and I working together to lay-out the graphics into screens and animation timelines.  All interaction was then handled by the developer team, with only minor changes to the screen layouts needed. In my previous experience with WPF, I had been able to take on some of the low-level interaction like button states and data presentation myself, allowing the developers to focus exclusively on the more complex interactions.  Before that I had only developed in Macromedia/Adobe Flash, where I generally took ownership of almost all the graphic and interaction requirements, making it difficult for another developer to contribute.

4. During Chris’ .NET user group meeting, he mentioned that through XAML, designer and developer can now have a streamlined collaboration process. What was your designer-developer workflow like during the Woodgrove Financial development?

Chris: Our designer-developer iteration was per scenario so there was a designer to developer hand off for each scenario in the Woodgrove Financial application. The designer-developer workflow is most efficient when there is no overlap and the designers/developers do not have to spend time in each others’ environment.

From a development perspective, it is more efficient to have tighter designer/developer iterations by breaking down UI layouts into logical smaller pieces because this would have to be done later by the developer anyways. This minimizes harvesting of particular pieces of XAML from a larger XAML file. Another improvement is to have the designer and developer agree on the names of UI elements before the design as this also minimizes the need for the developer to look into the XAML.

Douglas: Our workflow started with the developers meeting with clients and doing research to develop requirements for the application, then scripting-out a set of interaction scenarios.  Afterwards we would meet and refine the scenarios into interface designs.  We could then go our separate ways, the other designer and I laying-out the screens while the developers could work on other tasks.  As the screens came together we would pass off updated XAML files for the developers to plug into.I liked that we could work asynchronously, even from different offices the most recent XAML file alone was usually enough to keep us in-synch. 

Some lessons learnt were updates to the XAML couldn't simply be copied over indiscriminately, but had to be carefully worked-in to avoid breaking changes made by the developers. Designer and developers should also agree on instance names together to make developers' job easier when hooking up the UI instances with application logic.

5. Financial services applications have quite plain and serious look and feel. However, Woodgrove Financial is really fun to play with non-traditional graphics design and rich interactions. How has it been received in the financial industry? Can people appreciate rich UX for online Line of Business Applications?

Chris: The reaction from the financial industry has been extremely positive. From a retail point of view, the rich UX provides a compelling and intuitive experience for customers. The end result is increased loyalty and customer satisfaction. Even for non-retail operations, the rich interactive graphs and innovative data visualizations have presented new ways of interpreting data.

Douglas: I would say that when rich UX is done in a way that makes interactions more intuitive, clear, easy, and efficient, it's hard not to appreciate them.

6. From your experience of working with Silverlight 2, how does it different from Silverlight 1? What are some improvements in Silverlight 2?

Chris: Silverlight 2 is vastly different from Silverlight 1 and brings about many enhancements. The Woodgrove Financial application was initially built in Silverlight 1. Many of the controls we needed such as buttons, datagrids, dropdowns and layout controls were not available at the time so we had to build them. When Silverlight 2 came around, it improved the development experience by introducing a new series of controls, styles and templates, databinding and increased networking support. Silverlight 2 also automatically generates references to the XAML elements allowing the developer to refer to them by name from the code. Those are just a few of the features that make Silverlight much more friendly to work with.

Douglas: Silverlight 2 has many more of the features I got used to using in WPF, like sophisticated layout controls, skinnable components, and shared resources.  It makes creating complex interfaces much easier, and means I can set things up in a way that requires less extra work on the developers' end to turn into working UI.  Iterative modifications to an interface are much easier now, as shared resources and skins can be updated and layout containers adjusted without having to tweak every instance and sub-element to keep consistency.

7. What was your experience of learning the new technology (i.e. Silverlight) and tools (Expression Studio and Visual Studio)? Can your previous knowledge easily be transferred?

Chris: We were able to leverage our existing experience in C# and Visual Studio to begin development with Silverlight. I had not worked with XAML before this project but it was also very easy to pick up from the QuickStarts on Silverlight.net.  Expression Blend was a great tool to fill in what I didn’t know how to do in XAML because it allowed me to use the designer interface to generate XAML which I could then analyze. Overall, it was a very intuitive transition to Silverlight.

Douglas: As I mentioned in the previous question, building Silverlight 1 in Blend was quite a shock after building WPF applications in Blend, but Silverlight 2 has reduced the gap between them and made knowledge transfer much easier.

8. What are the things we can improve to the designer or developer tools to further support the workflow?

Chris: I understand this feature is coming but I would still like to mention it. It would be great to make the design view in Visual Studio interactive because sometimes the developer needs to identify certain pieces of XAML from a larger file. Much like in Blend, it would be useful if the user can click something in Visual Studio design view and have the corresponding piece of XAML highlighted.

Douglas: Ideally, it would be nice to have all of Expression Design's functionality in Blend, so that I never have to leave the program to tweak a graphic, only to re-import it and have to wrestle it back into its original context - recreating data bindings and the like.

Comments (5)
  1. I first wrote about the Silverlight Woodgrove Online bank example back in March when I saw it at the

  2. Sync says:

    >>>Douglas: The designers used a combination of Adobe Illustrator and Flash, Microsoft XAMLPad, Expression Design, and Expression Blend.

    I have two questions for the sentence above.

    1) Why did they need to use "Flash" for this project?

    2) Expression Design doesn’t cover all features of Blend?

  3. qixing says:

    Hi Sync,

    Here are answers to your questions:

    1)Why did they need to use “Flash” for this project?

    From the designer: “Flash was used for prototyping during the initial phase of the project. We needed to come up with some ideas ahead of the Expression Blend learning curve. The Flash images were translated to XAML using SWF2XAML: http://www.mikeswanson.com/swf2xaml/

    2)Expression Design doesn’t cover all features of Blend?

    Expression Design is a vector drawing tool for creating graphical assets for Silverlight applications. The graphics can then be imported into Blend. Blend has a few drawing tools as well but not as powerful as Design in terms of creating complex greaphics and effects. However, Blend enables interaction desigenrs to layout UI and create animations. Therefore, the two tools are used for different purposes although they have some overlapping functionality.

    Qixing

  4. Mike Crystal says:

    Do not really see the value of this if no tutorial is available

Comments are closed.

Skip to main content