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.