Microsoft ExpressionCustomer Solution Case Study

buuteeq

OverviewCountry or Region: USIndustry: Hospitality

Customer Profilebuuteeq is a Seattle Washington based startup that makes a SaaS/Cloud Digital Marketing System (DMS) for independent hotels.

Business Situationbuuteeq initially used Microsoft PowerPoint and Adobe® Photoshop® to create rough layouts to indicate their design intentions which were not easily recognizable and time consuming to construct.

Solutionbuuteeq’s developers used Expression Blend's built-in controls to create more realistic-looking mockups: buttons that looked like buttons, pop-ups, drop-downs, scroll bars, etc.

Benefits Faster System Development More Efficient Review Process Better v1 System

Tech Startup Employs Expression Studio 4 Ultimate to Speed Development, Enable Efficient Application UI Review

buuteeq’s initial product, a Digital Marketing System (DMS) for hotels, was designed to drive direct engagement with prospective guests, encourage higher hotel occupancy and removing aggregator commission fees by putting the hotels’ brands directly in front of potential guests via the marketing channels where over 90% of hotel discovery and buying decisions are made: on the Web, on mobile phones, and in social networks such as Facebook. By using Microsoft® Expression Studio 4 Ultimate™ with Blend and SketchFlow to build the first version of its DMS, buuteeq was able to create realistic prototypes more rapidly and gather internal and client feedback more effectively. As a result, buuteeq realized significant time and cost savings and had the necessary tools to bring a better, more advanced product to market.

SituationTo build its Digital Marketing System, buuteeq initially used Microsoft PowerPoint slides with rough layouts constructed of simple geometric shapes. In addition, buuteeq developers used Adobe® Photoshop® to grab screen elements from other software products and mix them together to indicate their design intentions. However, both techniques were less than ideal working with images and screenshots required time-consuming editing and the rough visuals generated by PowerPoint weren’t easily recognizable as a software interface. The company realized these shortcuts were costing valuable time and resources and wouldn’t deliver the best end product.

SolutionBy adopting Microsoft Expression Blend® and SketchFlow, buuteeq’s developers were able to use the products’ built-in controls to create more realistic-looking mockups: buttons that looked like buttons, pop-ups, drop-downs, scroll bars, etc.

“Using Blend and SketchFlow was great because they allowed me to wire together different states/screens of the application much more quickly. They also provided easy click-through navigation in a non-linear path through the app, something PowerPoint doesn’t easily allow,” says Forest Key, founder, CEO, and chief designer of buuteeq.

“Eventually I realized that in many cases it was easier to actually draw UI elements directly in Blend—the design surface has very good tools and features that are nicer than Photoshop or Illustrator. This sped things up significantly, and kept me

focused on the conceptual design and out of the weeds of noodling with pixels.”

Key notes that as a designer it’s fun to make things pretty. However, he quickly realized that working with inadequate

software tools and trying to finesse designs was slowing the development process significantly.

“In the early stages of laying out the interaction design, the forms for the app, and the information architecture for our content management system,” Key says, “it was more efficient to stay high-level and conceptual, and both Blend and SketchFlow encourage that approach as a best practice. I now do 100% of my wireframing/mockups within Blend itself, with a few screen shots taken from the Web to drop in as background layers.”

BenefitsAfter adopting Expression Studio Ultimate, buuteeq experienced a significant increase in development speed, including greater efficiency in the review process by internal team members and clients. And, on top of saving time and money due to these efficiencies, the company was able to create a better product to bring to market.

Faster System Development

24

Over a period of six weeks, company founder and CEO Forest Key produced more than 50 different interactive wireframe demos of different system elements.

“If I had not used Expression, these designs would have required perhaps four or five months to produce at the same level of detail and nuance,” Key states. Given the tradeoff of time versus quality, he says he likely would have opted to produce much less detailed mockups and then paid the price in the development phase, because his team of developers would have had to build multiple iterations of the user interface as opposed to getting it right the first time.

“I estimate that using Blend to build detailed interactive designs for our entire team to review saved us 30% in development time across a team of 10 working for six months.”

More Efficient Review ProcessDuring the development phase, Key was based in Santiago, Chile, while his development team was in Beijing, China. Creating detailed visual/interactive designs therefore was a necessity. It proved a highly valuable tool for conveying the intention of the design and gathering feedback across the team.

“I don’t know how else we could have gotten it done—simple text-based documents would not have sufficed,” he says. “It eliminated the need for in-person meetings, thus saving travel costs, and in fact made our widely distributed development team viable.” As Key built the interactive designs, he and his team came to depend on “these shared visual, interactive prototypes as the rallying point for our common understanding of what we were setting out to build.”

Another advantage of SketchFlow, Key points out, is the ability to add on-screen annotations with descriptions or instructions. “They served as a mini guided tour, if you will. This was really helpful, as our reviewers could see both the design and my notes about the design as they clicked through and interacted with the user interface.”

Better V1 SystemOver and above time and cost savings, buuteeq attributes the advanced functionality and rich user interface of its first product to abandoning an inefficient development method that combined several software programs and switching to Expression Ultimate.

“Our product is a much better V1 system than it would have been if we had not taken the time to do the design iterations with Blend,” Key asserts. “We’re totally sold on the idea that you don’t build anything that a user touches until you’ve first done a combination of wireframes and interactive mockups of the system. It’s just too easy to do, and the cost of not doing it can be significant in lost time building something that doesn’t work.”

34

Microsoft ExpressionFor more information about Microsoft Expression please visit: www.microsoft.com/expression

44

For More InformationFor 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 in the United States and Canada who are deaf or hard-of-hearing can reach Microsoft text telephone (TTY/TDD) services at (800) 892-5234. 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 products and services, call or visit the website at:

For more information about buuteeq products and services, call or visit the website at: www.buuteeq.com

This case study is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS SUMMARY.

Document published May 2011

Software and Services Other Products

− Microsoft Expression Blend