Case Study: Microsoft

Leveraging the Z-Axis.

Part of my role involves working with the design team at Rich Interactive and recently I was involved in the design and construction of a non-linear presentation/sales tool to aid Microsoft sales teams with promotion of their latest model, the Surface Book.

Using Rich Interactive's Bubl app, I was responsible for creating a simple, stylish and on-brand user interface that maximised user views of official photography, personalised video, promotional video clips, downloadable spec sheets and links to product reviews.

Going one step further
This brief was great to work on - it got very positive feedback from the team at Microsoft. In this article I'd like to explain what can be learnt from this project, and then I'll go even further to explore additional techniques to provide maximum engagement and utility.

With the recent unveiling of Microsoft’s Fluent design language I started thinking about how to incorporate some of its principles and ideas. I also considered the merits of some newer UI ideas I've seen, and whether they could help to create a better overall product.

One of the interesting new aesthetic choices for Fluent is utilising the Z-axis to create tangible, almost 3D depth between elements. Much like Google’s Material Design it references real-world materials to create a tactile experience that translates across devices.

However, while MD used ‘paper’ as a cornerstone of its design Fluent uses ‘acrylic’, which is a semi-transparent, occasionally tinted, blurred material that feels like frosted glass. Elements in the Fluent space often appear to be floating in mid-air, a quality which will likely become more prevalent as VR (and specifically Microsoft’s HoloLens) gains more feasibility and popularity.

The use of Fluent sets the tone for a light, interactive and stylish presentation. Elements throughout the piece float, offset and provide a feeling of depth - here foregrounding the image of the laptop with focus on its profile and one of its most distinctive features - the Dynamic Fulcrum hinge.

One of the issues with the existing presentation is that it is fairly superficial - the information provided is generic and doesn’t engage particularly strongly. In this version, by simply asking a question - ‘Which of these best describes you?’ - we can start directing the conversation in a specific way, focusing on content most likely to engage the user at that time. More on that later.

Meet the Surface (aka 'When Should You Use a Chatbot?')
Conversational UIs (CUIs) are nothing new, and in fact have been touted as the next big thing in design for well over a year at this point. I, for one, am still a little on the fence about how effective they are. In terms of delivering a curated, light-touch content experience I think they are fantastic and can be much more engaging than other avenues.

Where they will be unlikely to push through for some time, in my eyes, is areas where you might need to perform a series of specific, important tasks (finance admin in a banking app, for example) or taking in large amounts of information at a time (browsing items in a clothing store). The interaction with a CUI is more fun and natural, but you can only deal with one thing at a time, which would sometimes make a task slower and more tedious than just doing it on a screen.

In this example though, we get to provide a more human, natural and compelling sales narrative than just a list of technical specs. Computing is such that spec sheets for similar-tier devices are all closing in on each other, making their numbers pretty much meaningless. By focusing on real-world application and the benefits that using this device can bring, we make a more compelling sales argument.

This argument is strengthened further by the choice made on the home screen - remember, where you pick your job? By doing this, we can target the conversation even tighter, highlighting how this device can help the individual with reference to particular work processes, while also making the CUI’s features more discoverable. We could include spec sheets at this stage as well; tangible data will reinforce the benefits we’ve suggested.

Consumer Reviews
One design element that has been retained from previous Microsoft designs is flat-colour tiles. While these have been around since their introduction in Windows 8 they are a very versatile and useful system for providing singular pieces of information. For that reason they are ideal here - each housing a quote from a magazine review about the laptop and linking through to the full review.

Some e-commerce websites like StockX and JD Sports are utilising great image functionality that can be rotated 360° for a comprehensive product snapshot. I wanted to combine this feature with floating icons that can be clicked/tapped, revealing a modal panel that provides more information about a particular component, e.g. the screen, trackpad or CPU.

Like the chatbot section, the features highlighted here can be prioritised depending on the user’s needs. A designer might like to know more about the graphics and drawing capability, an IT professional might like to know more about raw computing power and available ports, a salesperson might like to know about OneNote/Surface Pen integration and the flexible presentation options. This would be determined and refined through use of personas and gathering/refining of user data.

The icons are anchored to their position and follow round as the laptop rotates, reinforcing the idea of existence in 3D space. Similarly the modal panel is made of white acrylic and all content features as separate entities in front.

The panel features a large space for video - I think that it would be important to create videos based on real-world situations and use cases, rather than a generic ident. When Adobe launched their Experience Design app they produced a video with agency Design Inc to demonstrate how designers could use the software in their workflows - I feel this is a very important path to take to aid engagement with potential users.