Guest Post from Canadian User Experience Blog: Sharing Designer-Developer Workflow Story from eMedia

  1. Qixing Zheng, one of Microsoft's User Experience Evangelists and a co-blogger from the Canadian User Experience Blog has conducted a great interview on the challenges and value of Designer/Developer workflow in making software into great user experiences. Below is the article:

  2. Last month Tudor Whiteley (in black, Designer) and Chris Asselin (in white, Developer) from eMedia participated in the Artists in Residency training for Silverlight and Expression Studio at our headquarter - Redmond. It's an intense 10-day training program with first 2 days in a lecture style learning the basics and the rest of 8 days in a lab environment building their first ever Silverlight application as a team. I had the opportunity to go down with them and shared their experience (sweet and bitter) first hand. The picture on the left was taken just outside of the training center. Check out the gorgeous maple trees behind us! I asked them to share their experiences from both a designer and developer perspectives especially focusing on how they worked together using the new technology and tools. I hope you designers and developers out there will find this helpful.

  3.  

  4.  

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

  6. Tudor: I’m the Design Lead at eMedia. We are an ASP.net shop but my group specifically works with the usual bag of tricks for designers which would include: Photoshop, Illustrator & Dreamweaver. 

  7. Chris: I am currently a software developer at eMedia Interactive. We use the .NET and ASP.NET platforms, as well as SQL Server 2005 databases, and in the near future we have plans to start building some Silverlight applications.

  8. 2. What is the designer and developer workflow you are experiencing at work now? Any challenges?

  9. Tudor: The workflow for us can be strained at times. We currently have a lot of difficulty because one group ends up being a bottle neck for the other. That is generally my group because Dev wants to see what they are developing before they start. This becomes problematic quickly because goals for the site change, which means the design changes, which means the base wireframes my teams gives to the dev team changes… it can be a vicious circle resulting in a lot of rework.

  10. Chris: We practise a scrum development methodology which usually is advantageous to both dev and design teams. The design team are always working (a sprint) ahead of the dev teams, so that when the time comes for a developer to integrate a new design or build a new control, the design assets have already been created. At times when the dev team needs to implement functionality without any design, it feels like we are just guessing and knowing that we might have to do parts of the work over again. 

  1. 3. What application did you build during the Artists in Residency training? What are some future work for the application?

  2. Chris and I built an interactive hockey score board application we called “The Front Row”.  Our goal was to use Silverlight to create a rich visual experience of looking at a hockey scoreboard inside a stadium.  We pulled data in from a number of feeds and displayed them in a non-traditional way.   The application interface contained a photo slideshow, a hockey scores slideshow, a news article viewer, and a news headline scroller with pseudo-3D live text scrolling across.  The entire interface as well as the data feeds were completed localized in 4 different languages including Simplified Chinese.

  3. Some future work planned for the application are adding in streaming video with video controls to the central panel and providing the user with the ability to filter news based on their preferences from Blogs all the way down to anything about Crosby. Also, we'd like to make this more of a generic solution by configuring the application to use a user defined data feeds.

  4. The video on the left shows "The Front Row" application that was created by Chris and Tudor in just a week.

  5.   4. You learnt about building Silverlight applications with Expression Studio in the training. What’s the experience of learning the new set of designer tools and working with the new Silverlight technology?

  6. Tudor: At the beginning of the training I actually found it going a little too slow but by the end of the second day I felt like I was sucking on a fire hose there was so much information coming in. Learning the new tools at was excellent at times and trying at others. Things I was use to within my normal tool set like shortcuts and the like were the same which made the transition almost effortless but then sometimes there would be tools missing or more often then naught tools that worked differently then what I expected and I would have to try and figure out how to use it to achieve my goal. 

  7. One aspect of Silverlight which we experienced as a first was the need to slow things down. Our application has an initial sequence of images that fly by during the initial load. This sequence ran so quickly that we didn’t even see it. Chris actually had to slow things down to an acceptable level. That was a very nice problem to have. :)

  8. Chris: The training taught us the key concepts of Silverlight and the tools within Expression Studio. After the sessions that we were set free to develop our own Silveright application. As someone who has never worked with flash or any other RIA platform, the tools were relatively easy to learn once one understood the concepts. Although I also have to say that each tool has their own little quirks that one must pick up on. As a developer I had no use for Expression Design, although I found Blend very useful especially for prototyping. 

  9. 5. What is the designer-developer workflow with Expression studio and Visual Studio? How does it compare with your current workflow?

  10. Tudor: The workflow between Chris and I from my point of view was excellent. An example would be that I didn’t have to worry about communicating to Chris exactly how I wanted an animation to work because it was all set by me within Blend and passed to him as XAML. This allowed us to complete work in parallel on the application which essentially meant we cut our production time in half. To be honest I don’t think I fully appreciated the benefit of working with XAML until we were in the thick of designing our first application.

  11. Chris: The workflow from a developer point view was very seamless. I was able to create the functionality that was required for our application in parallel to the development of the design assets. I created all functionality by prototyping various the pieces of functionality in Blend and created the necessary JavaScript code for manipulating the XAML elements and binding the XAML elements with the data feeds in Visual Studio. I created prototypes for the score display and photo slide shows, the text scroller, and for the localization functionality. When the design assets were complete I put them together with the prototypes. And eventually this mash up of prototypes and XAML elements created by design created our final product. The JavaScript debugging feature in Visual Studio 2008 proved to be very helpful when troubleshooting a troublesome section of code. We did encounter some issues with the positioning of certain element but that problem was caused by us using the tools incorrectly.

  12. 6. Do you have some best practice suggestions for designers and developers working with Expression Studio?

  13. Tudor: Designing within Blend can be limiting so I would suggest working with Expression Design directly or importing resources into Expression Design and importing them from their over into Blend. The only obvious exception to this would be when bringing in external bitmap resources. I did all of this within Blend. The best practice that saved Chris and I enormous amounts of time was agreeing to a naming convention. Grouping the various parts of buttons in a logical manner and naming only those groups that I required Chris to manipulate programmatically saved us large amounts of time and reduced code bloat. I think more of these would become apparent as we continue to work within Silverlight but for now those are the only ones that truly stands out.

  14. Chris: Agreeing upon a naming convention was key to being production and not encountering any road blocks. For example we needed to create various buttons for controlling behaviour inside the application, and these buttons had mouse over, mouse down and mouse up states. The button XAML element contained elements that represent these states, and were named according to our convention. This simplified the programming of the buttons that appeared on the user interface.

  15. 7. What are the things we can improve to the tools to further support the workflow?

  16. Tudor: I think the major thing that needs to improved upon to further support Silverlight’s workflow efforts is support for dynamic content. Once our application became dynamic we started having a lot of problems passing various parts back and forth. Once Silverlight has the ability to provide even dummy data it will make things so much better.

  17. Chris: Source control integration for Expression Blend would be great.

  18. Technorati Tags: Silverlight Application, Hockey, Design Developer Workflow