VSR Networks

Designer and Developer Collaborate to Deliver an Improved User Experience

VSR Networks develops software that enables companies to observe the health of line-of-business applications and associated business workflows. To deliver an optimal user experience for its new executive dashboard, the company needed to bridge the gap that has traditionally existed between graphic designers and software developers. VSR Networks met its goal by using Microsoft® Visual Studio® 2008 Professional Edition for software development with Microsoft Expression Blend™ for UI design, both of which support XML-based Extensible Application Markup Language (XAML) to enable designers and developers to share projects, code, and UI designs. The company’s new approach to building products has led to improved collaboration between designer and developer, greater focus on customer experience, a richer user experience, increased sales opportunities, faster time-to-market, and lower development costs.

 

Situation

VSR Networks develops software that enables IT organizations and business managers to observe the health of line-of-business applications and the business processes that rely on those applications. The company’s Reveille software is deployed by more than 200 corporations, who use it to better understand the underlying issues that affect their operations and to proactively eliminate potential problems that can impede business activity.

Today we’re able to employ a much more design-centric approach, where the user experience drives product development. Burt Smith  Vice President of Sales and Business Development, VSR Networks

As with most companies, VSR Networks’ success depends on its ability to respond quickly and effectively to customer needs—a capability that the company didn’t always have. In 2006, Reveille was written in Microsoft® Visual Basic® Scripting Edition, which did not support multithreading and made the code difficult to maintain and enhance. “Our product at that time was functional but not scalable or easily adaptable,” says Burt Smith, Vice President of Sales and Business Development for VSR Networks. “We spent several months rewriting Reveille to run on the Microsoft .NET Framework and, by early 2007, had a new version with a componentized architecture and a Web services API.”

With its new technology platform in place, VSR Networks was now in a position to be more responsive to customer needs. “Customers were telling us that they wanted more than just rows of status text in a browser,” says Smith. “We came out of those customer conversations with a new top priority: a rich, visually intuitive dashboard for busy executives and line-of-business managers, who needed an easier way to access and digest information.”

VSR Networks decided to develop its new executive dashboard using Windows® Presentation Foundation, which would enable the company to fully exploit the capabilities of modern graphics hardware. However, even with Windows Presentation Foundation, to deliver an optimal user experience, VSR Networks still had to bridge the gap that has traditionally existed between graphic designers or UI designers and software developers.

“We needed a way of building software that would allow us to focus on the user experience instead of the code and the data,” says Smith. “UI designers were involved at the start of the process, but a lot of their work didn’t carry through after their designs were handed off to developers; there was little ongoing collaboration. And because developers spent so much time re-creating the designers’ work, there was little time left to get customer feedback and approval on early iterations of the product.”

Adds Dave Raymond, Senior Graphic Designer at VSR Networks, “I would use a tool like Adobe Photoshop to create beautiful pixels, which I’d hand off to developers and say, ‘Here’s my design, let me know what else you need.’ Weeks later, I’d get something back, and the color would be off or the aspect ratio wrong. We would go back and forth but never get back to my original vision. In the end, we were never really done but had come up with a compromise that was ‘close enough.’ ”
 
Having to work in such a way also frustrated software developers—and wasted their time. “I would get e-mail with a picture and I’d have to use tools like Paint to extract the bits, resize the image, and do the other things necessary to make the image work in code,” says Adel Hazzah, Principal Engineer at VSR Networks. “I’d spend 30 to 40 percent of my time on the application’s look and feel, duplicating the work that Dave had already done—again, just to make it work in code. And if he sent me something new, I’d have to repeat the process all over again.”

Solution

VSR Networks remained focused on the customer experience during the development life cycle of its executive dashboard—and delivered the dashboard faster—by using the Microsoft Visual Studio® 2008 Professional Edition software development system together with Microsoft Expression Blend™ design software. Because both tools support Extensible Application Markup Language (XAML), the designer and developer could work together in a friction-free environment, sharing projects, code, and UI designs to collaborate better, accelerate product development, and deliver a solution more focused on customers’ needs.

Figure 1. The executive dashboard is based on Windows Presentation Foundation and was developed with close collaboration between designer and developer.

“New tools and technologies from Microsoft have enabled us to fundamentally change the way we develop products,” says Smith, who also oversees new product development. “Today, we’re able to employ a much more design-centric approach, where the user experience drives product development. The ability for designers and developers to better collaborate and deliver a UI without compromise has enabled us to deliver richer, more powerful solutions that help executives and business managers to quickly understand the health of their businesses.”

Adds Hazzah, “Windows Presentation Foundation is the new paradigm for how to build software, and XAML really brings together the design and programming sides of software development. A designer can create the UI that he or she wants and hand it off to a developer to finish implementing, without all the translation or guesswork that we had to deal with in the past.”

New Approach to Product Development
VSR Networks began developing the executive dashboard in May 2007. Although the effort was completed in only two months, it took some time for the company to adjust to a new way of building products. “We started by thinking in the old way, planning to port what we had to Windows Presentation Foundation,” says Smith. “But that didn’t work; we didn’t get the user experience we were looking for. So we got a designer involved and told him to come up with a new vision.”

Raymond, the designer pulled into the project, first looked at the requirements for the new product screen by screen, collecting initial ideas. “Windows Vista® UI elements were a big influence,” he says. “I tried to emulate the big buttons, transparency, and other things that executives would be comfortable with. I came up with my initial concepts before downloading Expression Blend, but after I did, it only took a day to get familiar with the Expression Blend UI and a week or so to implement my design. Expression Blend gave me a rich, real-time design environment with everything that I needed and more, including vector and pixel art, video, audio, text, 3-D content, and animation.”

After using vector-based graphics to implement his UI design, Raymond saved the XAML that defined that UI and handed it over to Hazzah. “I frequently found myself side by side with the developer, looking at the same screen and knowing that, whatever I created, it would look the same on his screen and mine,” says Raymond. “Altogether, designing and implementing the UI took a few days of intense work with good communication—and then we were done.”

Rich, Interactive User Interface
The dashboard’s UI (see Figure 1) is based on Windows Presentation Foundation, the graphical subsystem in the .NET Framework version 3.5 for taking advantage of the capabilities of today’s modern graphics hardware. “Windows Presentation Foundation is great because it supports vector-based graphics versus rasterized bitmaps,” says Hazzah. “That way, we can implement a UI that will scale automatically for different screen sizes without loss of fidelity. If people expand it to fill larger-resolution monitors, they’ll see greater detail instead of a blurry image.”

VSR Networks is also using Windows Presentation Foundation and XAML to make the dashboard more user friendly—and user configurable. “XAML allows us to articulate both the look and behavior of Windows Presentation Foundation controls, yet keep those two attributes completely decoupled,” says Hazzah. “For example, we can declutter the screen by using XAML to configure a control to fade in and out of view slowly. And the new controls can handle a wide range of image formats with the same programming model. For example, we can enable the user to put a photo in their user profile and know that it will look good regardless of the image’s format.”

Complete Customer Experience
The new executive dashboard is part of VSR Networks’ broader effort to deliver an improved customer experience across all its products. The company also developed versions of its standard Reveille UI and of its executive dashboard for Windows Mobile®, using visual elements taken from the desktop version of the dashboard. VSR Networks also developed two gadgets for Windows Sidebar that present information to users running the Windows Vista desktop operating system.
 
In addition, the company hired a vendor to migrate its Web site from Adobe Flash technology to the Microsoft Silverlight™ browser plug-in. “Moving our Web site to Microsoft Silverlight is part of our plan to ‘wow’ the customer at every turn,” says Smith. “Silverlight is very powerful, works well under multiple browsers, and delivers a very rich and interactive user experience. It helps us to be seen as a thought leader and thus gives us an edge over the competition.”

VSR Networks is about to start development on the next version of its executive dashboard. It also is planning to deploy Visual Studio Team System 2008 Team Foundation Server, which will further improve collaboration during product development by providing a central repository for project data and deep visibility into all aspects of the application lifecycle. “Our development partner in India uses Team Foundation Server, which we access over the Web,” says Smith. “Not only does it enable technical resources to work together more efficiently, but it also helps stakeholders not involved in development, such as myself, to easily stay informed of project status and issues.”

Benefits

Through its use of the latest Microsoft tools and technologies, VSR Networks delivered a unique user experience that enables busy executives and line-of-business managers to easily monitor the health of their businesses. The company’s new approach to building software has led to vastly improved collaboration between designer and developer, resulting in a greater focus on the customer experience during product development, a richer and more productive user experience, increased sales opportunities, faster time-to-market, and lower product development costs.

Improved Collaboration Between Designer and Developer
By using tools that are designed to work together, designers and developers at VSR Networks are able to collaborate more closely. “Now that our tools ‘speak the same language,’ designers and developers can do the same—and work more closely as a team,” says Raymond. “It’s great to know that my designs will make it into final products as they were originally envisioned, that they’ll look the same on a developer’s screen as they do on mine, and that we can make changes to the design or code without breaking the other. On this dashboard project, I worked more closely with developers than I have in all my 15 years of design.”
 
Greater Focus on the Customer Experience
Improved collaboration between designers and developers has helped VSR Networks to adopt a more customer-aware approach to building products, shifting its focus from code and data to defining—and ultimately delivering—the desired user experience. “We’re now able to align how we build software with the business objective underlying that work, which is to deliver great solutions that delight our customers,” says Smith. “We need to pay close attention to the user experience and now we can, through stronger collaboration between developers and designers.”

Because UI design and development are now streamlined, VSR Networks has more time during the product development process to present early ideas to customers and incorporate customers’ feedback. “Customers can’t always tell you what they want,” says Smith. “But if you show them something that’s close, they can help you to nail down that last 10 percent. We’re much more agile in creating an optimal user experience because a programmer and designer can work together as a team, easily experiment with ideas, and quickly implement changes based on customer feedback.”

Richer, More Productive User Experience
Combined with an increased focus on the user experience during the product development cycle, the advanced graphical and motion capabilities provided by Windows Presentation Foundation have enabled VSR Networks to deliver a richer, more productive user experience. “I’ve been developing software for 25 years, with 18 of those years on Windows,” says Hazzah. “And while I’ve always been impressed by the steady evolution of Microsoft tools and technology, Windows Presentation Foundation and Visual Studio 2008 really blow me away. The process of building software is no longer about compromise. Now it’s about what you can envision because the technology platform no longer limits what you can do.”

Adds Smith, “The look and feel of an application is important to what we deliver today. If you need to focus too much on how to code something, you don’t have time to address really important questions, such as, ‘Is this really what customers really want?’ or ‘Is there a better way to present this information?’ With Windows Presentation Foundation, we can deliver greater interactivity and richer graphics with less code, which leaves more time for making sure that the resulting application is in the best interest of our customers.”

Early deployments indicate that the company’s new executive dashboard is serving its intended audience well. “One customer, a large mobile provider, is using the executive dashboard in the chief technology officer’s office to monitor its call center operations,” says Smith. “Anyone who walks past the display can immediately discern the health of those business processes.”

Increased Sales Opportunities
The ability to deliver rich, compelling user experiences—including those that are designed for Windows Mobile—is helping VSR Networks to generate additional interest in its products. “We may be a small company, but the look and feel of our products makes us look bigger,” says Smith. “At a recent show, I was able to approach people and, in just a minute, impress them with a demo to the point that they started asking me questions. Moreover, I was able to do this seven times in a row. The value of our products is immediately evident because of the user experience they provide.”

Faster Time-to-Market and Lower Product Development Costs
VSR Networks delivered its executive dashboard in only eight weeks—a fraction of the time that such an effort would have taken in the past. And faster product development is leading to lower development costs. “What one designer and developer did in two months would have taken three times as long in the past,” says Smith. “Thanks to design and development tools that work together, we were able to greatly compress the design-and-build process while retaining the fidelity of the intended user experience. Development of the gadgets for use in Windows Vista was even faster, taking only a single week each. Thanks to our new approach to product development and the tools that enable it, we’re able to respond much more quickly to customer needs.”

 Microsoft Visual Studio 2008
Microsoft Visual Studio 2008 is the world’s most popular development environment for designing, developing, and testing next-generation Windows-based solutions and Web applications and services. By improving the development experience for Windows, the Web, mobile devices, and Microsoft Office, Visual Studio 2008 helps organizations deliver a variety of solutions more productively than ever before. Visual Studio Team System expands the product line with new software tools that enable greater communication and collaboration throughout the development lifecycle. Interaction between developers and designers is enhanced through the use of Visual Studio 2008 and Microsoft Expression® Studio. With Visual Studio 2008, businesses can deliver modern service-oriented solutions more efficiently.

For more information about Visual Studio 2008, go to:
www.msdn.microsoft.com/vstudio

 

 

For More Information

For more information about Microsoft products and services, call the Microsoft Sales Information Center at (800) 426-9400. In Canada, call the Microsoft Canada Information Centre at (877) 568-2495. Customers who are deaf or hard-of-hearing can reach Microsoft text telephone (TTY/TDD) services at (800) 892-5234 in the United States or (905) 568-9641 in Canada. Outside the 50 United States and Canada, please contact your local Microsoft subsidiary. To access information using the World Wide Web, go to:
www.microsoft.com

For more information about VSR Networks products and services, visit the Web site at:
www.vsrnetworks.com