Rochelle Benavides leads the Experience Development team for the Microsoft Entertainment Experience Group. Her user-interface design contributions span the multiscreen product offering 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.

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