Devign Intervention: Explaining the Power of the Integrator
- 1. By Rochelle Benavides rochelle.benavides@microsoft.com Rochelle Benavides leads the Experience Development team for the Microsoft Entertainment Experience Group. Her user-interface design contributions span the multiscreen product offer- ing of the Entertainment and Devices division. She is also influencing next-generation user- interface development platforms and tools in support of cross-division design initiatives. Explaining the Power of the Integrator Devign inteRvention 34 www.INNOVATIONjOurNAl.Org
- 2. P rofessionals in the user-experience design community have come to rely on roles and labels to define our expertise within the range of design disciplines we employ. Organizationally, I proudly identify as a misfit. Nobody knows what to call my kind, especially those who refer to us as “devi- gners.” Really good designer/developer hybrids are hard to find, but if you’re lucky, you work with one. In the Entertainment Experience Group at Microsoft, I lead a team of these “integrators” and spend a great amount of my time focusing on two goals. First, I help cross-discipline teams understand and make use of our function. It’s harder than it sounds in a world of reorganizations and release cycles. Second, I create unifying processes around the overlapping functions of design, research and engineering. There is a third goal: enable greatness by leveraging this specialized expertise to deliver magic moments and uncompromising design vision. Our job is to make people believe. Although Microsoft’s Entertainment and Devices division streaming and downloads from the Zune Marketplace is has moved on to design and craft a range of other multi- available through a Zune Pass subscription. screen entertainment experiences (Project Natal for Xbox 360, Windows Phone 7, KIN, Zune HD), the story behind Mixview: Concept and execution the creation of Zune Software’s Mixview feature remains a Mixview is an overlay accessible contextually throughout strong example of why the touch of the integrator is critical the Zune Software user interface that visualizes the web of in the design process. Zune is an entertainment platform relations between albums, artists and friends to facilitate and media ecosystem consisting of the Zune HD device, the discovery of music. In feature planning for Zune 3.0 Zune Software client, Zune.net and Zune on Xbox LIVE. software, we set out to design an engaging and delightful The Zune Social is an online community where users can experience that would differentiate Zune and reinforce its discover and share media throughout the Zune ecosystem. brand pillars of sharing, discovery and community. In scop- The Zune Marketplace, which can be accessed on the ing this signature experience, we decided to take advan- device, PC and Xbox, allows you to download or stream tage of unused relational information already available from music, rent or buy movies and TV shows, and access video our music catalog and tie these relational details to friends and audio podcasts, games and apps. Unlimited music and listeners in the Zune Social. Using the power of com- INNOVATION SuMMEr 2010 35
- 3. D E S I G N I NT E R ACT I O N munity, context and connection, we that this approach failed to offer con- could make it easy to discover, enjoy sistently useful mixes because the and share digital entertainment. randomness was not controlled. One What we envisioned would click would present a nice distribution enhance and personalize the dis- of types of content, and other times covery experience by creating more we would get seven friends, two meaningful connections to music and albums and one artist. Not only was friends. And from a design perspec- the ratio of content types unbalanced, tive, it was an opportunity to conceive visually compelling but because each content type had its own size and shape, interactions that would create emotion around the Mixview the mosaic wasn’t as visually appealing as we had hoped. journey. We had to let the algorithmic approach go and move on to The team agreed the feature simply wouldn’t be the template idea. Cycling through an array of templates that as satisfying without captivating motion and convincing called specific content types into assigned positions wasn’t visuals. This meant close collaboration between design, true randomness, but it afforded us the opportunity to cho- research and engineering from the start. We worked reograph the randomness in a convincing way that was just against this set of design language principles: as true to the idea but looked a lot better. n Celebrate the Zune music catalog with high- Through prototyping, we proved what foundational resolution album and artist art components were and weren’t achievable. We also identi- n Communicate structure and hierarchy through fied which effects (blur, blending, lighting, etc.) we needed typography the user-interface platform team to develop and deploy for n Communicate relationships and relatedness through us by the time we reached the production phase. Engaging layout a partner team introduced a dependency on our deliverables n Portray an expressive and dimensional motion that had to be carefully managed. There were no guarantees personality that what we were asking for would be usable in the end. We Many of the layout concepts we started with had had no way of predicting the effects’ impact on performance never been done before, and we faced the additional chal- or if the payoff would be worth a performance hit. It was a lenges of engineering against rendering features that were huge risk, which meant we had to design plan B to account still being coded. Additionally, our user-interface platform for the worst case scenario. You’d be surprised how many had no developer tools, so we were coding animations by design teams I’ve talked to who don’t do this before entering hand in markup, often with unpredictable results. production. Subtracting from a best-case design will never It didn’t take us long to narrow our layout options. We be as good as designing an alternate. could create the layouts algorithmically or by using a set Production brought its share of surprises, most expos- of templates, which we would cycle. We had to prototype ing weaknesses in our user-interface platform. Our first both to see which one worked. The desired outcome was round of designs called for rotating the Mixview mosaic a layout that created a mosaic of related content (artist, on the Z-axis, creating a cool dimensional tilt effect when album, friend or Zune Social member) around a selected hovering over a peripheral tile. In building the scene, we “seed” of content. When clicking on any of the related discovered a bug in rotation animations on the Z-axis. We items, the selected item would take the seed position in tried to push the issue through to the user-interface plat- the center of the mosaic, and content related to the new form team, but the work was identified too late to make seed would appear. our release date. Easy enough, right? We position the content seed on As an integrator, I was intimately and equally familiar the screen, ping the service for a random list of related con- with the design language principles and with the product’s tent and arrange it around the seed by offsetting from the architecture. While exploring alternatives, the support center by predefined coordinates. What we discovered was of engineering helped keep me unblocked by technical 36 www.INNOVATIONjOurNAl.Org
- 4. issues. Production-line prototyping is a useful way of Production informing decisions about whether we’re able to recover n Design plan B from a setback or not. After spending some time working n Examine every known path and scenario to learn out the kinks, we were able to create the dimensionality what breaks our visual designs we wanted with the tools we had. When bringing up the n Offer informed alternatives when unexpected Mixview overlay, we could apply a blur effect while scaling technical constraints require design compromises down the entire underlying user interface. This would sepa- n Preserve design fidelity, own fit and finish, and rate the background from the foreground, and the mosaic ensure the spirit of the concept is captured in the would appear to lift out of the screen. It was very different final product from what we first imagined, but it worked because it made the Mixview entry point moment special. As a team, we Most teams mock-up all known variations and visual later realized this was a much more elegant treatment than states of each design, but we don’t know what we don’t in-your-face tilting every time you interact with the mosaic. know. We often learn what we need to design during pro- A happy accident for us, and perhaps a reminder, that duction. Having an integrator who is capable of making integrators are usually also imaginative designers. sound choices and prodding into the right areas while Integrators translate design concepts into working on the ground can have a significant impact on users’ code, remove dependencies on the engineering team for perceptions of how much we care about them and how design iteration and find ways out of design problems. dedicated we are to perfecting the little details. This is Because they channel insights across disciplines, each why we rely on testers and researchers to help us uncover becomes better informed and empowered in making bet- important paths and scenarios. What happens on the ter, more enlightened choices. Mixview might have failed to screen if I lose my Internet connection while browsing the evolve into a state of high polish without this specific atten- Zune Marketplace? What is the right solution when service- tion and focus. Integrators are uniquely equipped to forecast driven content blasts your layout and forces scrollbars into production pitfalls and to propose course corrections and areas you didn’t expect would need to scroll? What does other solutions to potentially show-stopping dilemmas. the experience look like for a first-time user who doesn’t yet have a Zune Pass, has no local collection media and the 3 Ps: Platform, Prototyping, Production no Zune Social friends? Sometimes, the forgotten screens When engaging with new product teams unfamiliar with the are the ones that leave lasting impressions of quality or role of the integrator, I pitch it using the 3 Ps methodology mediocrity with users. to describe processes around the overlapping functions The value of the 3 Ps is that they are repeatable pro- of design, research and engineering. Technical smarts, cesses that can be scaled to meet the needs of product design sensibilities and attention to detail guide integra- teams large and small, on any screen or technology platform. tors in their effort to enhance cross-discipline transparency The Zune team matured this system, and it has become the throughout the round-trip design process. Establishing a benchmark playbook by which the integration discipline has cultural identity as an extended member of all contributing gained momentum. The 3 Ps have provided a success model disciplines is an element essential to the success of this for the genesis of new design-integration teams across the model, and can be the most difficult idea to evangelize. Entertainment and Devices division at Microsoft. It’s a ritual for teams to spend a release day following Platform media coverage, reading blogs and absorbing commentary n Know the strengths and weaknesses of your from the public. For us, one of the most surprising and technology platform and contribute to its maturity. satisfying Zune 3.0 release day comments came from a n Map design needs to technology needs Gizmodo reader named J.T.: “What’s amazing is that this n Front-load platform work to enable your designs to piece of software looks and feels like a team of ‘actual come to life during production user interface designers’ dreamed it up and massaged it n Translate design terminology into developer into greatness. It’s one of those experiences that can’t be terminology and vice versa captured in screen shots, because the interface changes dynamically based upon how you’re sorting songs, or what Prototyping you’re listening to, or what you want to do in general. There n Explore. Make. Learn. Plan are still a few minor quibbles...but on the whole this is...well, n Test your tools it’s badass. Simply put.” n Prove that what you think will happen and what A team of actual user-interface designers? The Mixview actually happens are the same (or not) feature team alone had 15 contributors, and seven of us n Define constraints so you can spend more time were designers. Design culture is changing at Microsoft, 3 iterating within the realm of what is possible Ps at a time. n INNOVATION SuMMEr 2010 37