Case studies
Michal AngelUX Expert

Application Delivery Management – Vision

ADM Vision

On May 2015 we released a short video envisioning how technology will be embedded in our lives in the near future. The first part of the movie presents how the simple scenario of air travel will become fluid and seamless, harnessing the full potential of the devices that surrounds us. ‘Big Data’ and the ‘Internet of Things’ won’t be abstract concepts but the means in which the environment will work for us behind the scenes, reducing the friction of dealing with interfaces.

However, that is only part of the story. Providing a vision is not enough, to go the extra mile we have to look behind the scenes and ask “How”? What will enable this vision? What will be the development process in this world that will ensure such experiences will be our standard?

The second part of the movie is focusing on that aspect- how the full development process will look like in the near future, from analyzing user needs, through development and testing, when we are facing endless amount of devices and interactions, all connected together.

When we started to dive into this world, we met several, sometimes even colliding challenges – we needed to get our hands on a very complex world, but eventually make an interface that will appear for few seconds in a movie.

We began by approaching the project like a UX challenge, disregarding the fact that it’s an interface for a movie, but rather trying to make something meaningful and professional. We did a research on existing products and interviewed different stakeholders in the company in order to map the end-to-end development cycle we wished to present, and focusing our effort in the different testing environments. We then created complex mockups that contained relevant data, which people could actually use.
When we got to the visual design phase we slowly but surely removed details and elements, in order to create digestible screens that will look impressive but not overwhelming for the viewers. The first step was crucial, having the fully operational system in the mockups helped us to shape and refine the end result to look reliable and functional for the technical audience, with just enough data that will make it believable.

Example: the dashboard UX vs. visual design.
In the UX phase we struggled to come up with relevant data for each one of the available testing environments, so that potential users could get the overall picture in a glance.

adm01

However, once we had all this info we quickly understood that such a screen could not be digested inside a movie, so we reduced the elements to minimum, but made the information reliable and functional, so when pausing the movie it’ll still make complete sense.

adm02

Creating interface for a movie, especially a movie which presents a vision, is a challenging task. The interactions need to be clear to the viewers in the frictions of seconds they appear on screen, and they have to step away from the current trends to look inspiring and fresh.

Choosing a touch-based experience was a straight forward decision that shaped our perspective and led to some unique and original visual elements, such as a dial-gadget that is used by 2-fingers in order to switch between the different testing environments.

adm03

Presenting the devices as floating maps was another innovative approach we took early on the UX phase. We wanted to create a sense of a complex world made simple, dealing with a lot of devices and connections on the one hand, but with a friendly interface on the other. We decided to present the devices as icons, connected to one another in a map. This is the consistent visual element. When switching between the different testing environments the map stays the same, but with different layers of information above it- floating contextual menus and dialogs. That helped the end result to feel balanced – complex but not overwhelming, rich and full with information but friendly and easy to use.

UX screen examples
UX screen examples
UX screen examples
UX screen examples
Visual screens
Visual screens
Visual screens
Visual screens

In conclusion, this was one interesting and inspiring task, involving both imagination & creativity with logic & analysis of data. It was a struggle between doing something that appears innovative, slick and appealing when viewed in a movie, but yet professional and believable if you pause and look at the details . It made us look at existing HP products in new ways, shake off traditional barriers and take them to the future.