MVP Builds Kiosk for the New Microsoft Store

Silverlight MVP David Kelley built a kiosk for the Microsoft Store!

He has written this guest post about achieving digital zen in the retail space. David has been building Targeted
Customer eXperiences primarily on the web and offline for over 10 years. David's main focus is on in integrating technology into our environment from
using sensors to touch screens and Silverlight. He is currently the
Principal User eXperience Architect for Wirestone and publishes a blog 'Hacking Silverlight' as well as
posts related to UX for Interact Seattle. Currently his main focus is in
the retail space with touch experiences such as digital pricetags and
Silverlight based kiosks.  

Video: MVP David Kelley shows us the kiosk he built for the new Microsoft store in Bellevue, Wa.

Achieving Digital Zen in Retail

My “thing” is more or less about embracing the digital
space, integrated experience, and fluid emotional connections with a target
demographic.  I want to hear “wow that’s
cool!” That’s when I know it’s a success. That was our goal with the on-demand
software kiosk my team at Wirestone and I created for the new Bellevue
Microsoft retail store.

Microsoft’s developer centric approach (“Developer,
developer, developer!”) has put the experience with Microsoft tools at least a
decade ahead of everyone else. Now we need to look beyond the developer centric
approach and more and more focus on a user centric approach. 

This was essential in developing the software kiosk, because
it had to be about a holistic, cross-disciplined approach focused on experience
design rather than developer or business requirements. 

That’s not to say business requirements are not important, just
that the design of applications should be wrapped around the engagement of the
user as this is where you gain user adoption (and user adoption = $). 

Microsoft has come up with a set of tools that not just
enable this kind of approach but encourage it. From strictly an engineering
point of view, we built the software kiosk using XAML (eXtensible Application
Markup Language) and WPF (Windows Presentation Foundation) using a design
pattern called MVVM (ModelView – View – Model) which in itself is a highly
refined version of MVC enabled by XAML. 

The software kiosk started as sketch art, line drawings and
sketchflows (an Expression Blend feature used to mock up UI) put together by
our firm’s information architects, designers, and developers, with input from
the target demographic through an iterative process.  By putting mock ups in front of real users we
were able to look at behavior and optimize the layout and the way information
is displayed so the user can easily understand and accomplish what they need
to. We did this before we even started building anything.

Once the sketchflows were done we were able to get our creative,
integration, and development teams together. 
Our lead designer built out comps in Illustrator and went through a few
iterations with the overall team, and then another round with target
demographic representatives.  At the same
time, our developers were able to lay the foundation of the real application by
building in Visual Studio “Model”’ and ViewModel, representing the data and the
screens from the sketch flow.  The
designers and developers were able to talk about the data and what each other
needed as well.  This made it easy for
the designers, integrators, and developers to pull in design assets even from
Adobe Illustrator and code directly against them in Expression Blend due to
Blend’s outstanding import tools. 

As a design shop, it’s a plus that we can let our designers
work in the tools they are used to, smoothly pull in those assets using Blend,
and code in Visual Studio. It also helps our business save money on time to
market delivery and training costs. While we didn’t need to retrain designers
on new tools, we did need to get everyone on the team to communicate closely
and find out what they could do for each other, such as having designers use
layers and groupings with names that made since and getting developers to use
MVVM to provide design time data so the design integrators could better tweak
the design in Blend.  Our mantra became “Communication,
Communication, Communication.” 

With the designs built out as views that could loosely be
bound to the view model, we were able to do better testing, provide a better
design experience, and switch out views for different environments. But
probably an often overlooked example of being so loosely coupled is that the
code base is so clean extending the application even by designers and
developers off the street is going to be easy. 
By keeping our focus on building an experience from the perspective of
the target demographic, customers now are able to go into a Microsoft store and
purchase from an almost limitless selection of on-demand software titles in an
experience that is really worth checking out. 

The user centric design approach is the critical aspect of a
solution like the Microsoft retail software kiosk, which is enabled by the
Microsoft Toolset including Expression Blend, Visual Studio, and just XAML in
general.  We’re looking forward to many
more iterations with the target demographic in user studies as the Microsoft
Store continues to evolve.