How To: Integrating Product and UI Design

 
Product_UI1-01.png
 
 
andras_MEDIUM.jpg

Andras Kokai

Industrial & UI/UX Designer

peter-molnar_MEDIUM.jpg

Peter Molnar

Co-Founder & CEO

Our experience shows that designing products is becoming more and more challenging, as screens and digital features appear in ever more types of products. In this article we’d like to share our approach to designing physical products with digital interfaces.

Instead of arguing about which part is more important – the easy-to-upgrade digital interface, or the physical, tangible parts that stay with the user for years – our approach is to let go of any general rule, or »truth«, that aims to simplify and generalise how a product should look like, and what layers of design should be more important.

The impact innovative products and services make on people’s everyday life has undeniably became part of today’s society and culture. The importance of well designed user experience and product is now more relevant than ever.

This is why we love to integrate a product’s physical design with its digital interface. In this article we will show three examples, using different levels of integrating digital-physical interactions: one integrated tool, one digital gateway, and one integrated experience.

#1 Diatron Aquila - integrated tool

 
 
Operation and User Flow map

Operation and User Flow map

 
 

The Diatron Aquila is an innovative hematology analyzer as it has the potential to change clinical practice and patient care leading to reduced healthcare costs and waiting times.

Our objective was to design a solution that makes blood testing quicker and more accessible. During the research phase we used the following tools: user research, user scenario modeling, mock-ups, physical prototypes, and user tests. We have conducted a user test with practicing doctors and medical assistants in order to get feedback about user flow and drawbacks of current solutions.

In the field of hematology devices (and medical equipment in general), users are used to outdated and complex user interfaces and operating flows. These are usually dressed up in less outdated graphics. Our challenge as designers was to redefine the very basics of interaction in hematology devices. We had to fit new technology with some traditional solutions (in terms of operational parts and medical standards) and create an enclosure that communicates its innovation to users.

But we went a few steps further introduced a coherent form language throughout the digital and physical space. The result is aesthetically pleasing but, more importantly, it is also a strong helper for the user: the rounded, colored rectangles mark where the main interaction points are: the top and front lids in the physical space and the buttons that take you to a new screen in the digital space. This way we reached a high level of integration: strong visual signs that help the users while supporting brand awareness throughout the digital and physical space.

 
 
Maform designed hardware encloser and user interface

Maform designed hardware encloser and user interface

 
 
 

#2 VeloClass - digital gateway

 
 
VeloClass web-based application

VeloClass web-based application

 
 

Developing the VeloClass bicycle traffic counter system was challenging for us due to the sensor technology requirements regarding height, placements and distance between units. Safety was also an issue and it needed to be weather and vandal proof while being easy to maintain and cost effective to produce. It also had to have a unique appearance to separate it from the competition. The traffic counter system consists of four kiosks, two for sending and receiving the ultrasound beam and for reflecting.

The counters send realtime data to the VeloClass cloud servers, which includes information regarding the number of bikes, the directions they move to and the weather. All of these data can be previewed by everyone using the maform designed web-based app, real-time.

The digital UI reflects the appearence of the physical device, continuing the form language that identifies the VeloClass stations. In this case there is no phyical contact between the physical device and the users, who interact with them only by passing by. Instead, the digital UI offers possibilities for interaction, serving as a gateway to access VeloClass data: you can select different stations around the area and check the statistics.

 
 
Responsive maform designed user interface

Responsive maform designed user interface

 
 

#3 Lift Aircraft - integrated experience

 
 
 
Lift Application UI with Hexa drone in the backround, both designed by maform

Lift Application UI with Hexa drone in the backround, both designed by maform

 
 

Lift Aircraft is the world’s first ever multirotor eVTOL aircraft in association with LIFT. Designed for aspirational pilots across the globe, the eVTOL airship, otherwise known as the Hexa aircraft will enable anyone anywhere to fly, no pilot’s license required. Maform’s objective was not only to design the complete passenger drone but also to make it’s brand identity, pilot user experience and user app design.

 
 
Hexa passenger drone

Hexa passenger drone

Hexa pilot’s user interface

Hexa pilot’s user interface

 
 

The service system as a whole includes several points and means of interaction: the aircraft itself (phyiscal controls and touch screen interface), the user’s smartphone (app with booking and preflight check modes), and the simulator – these will later be followed by custom built vertiports.

The challenge was to introduce a physical form language that is unique to personal recreational eVTOLs, together with a digital graphical user interface and a brand that reflects to this, while the whole system communicates reliability with an exceptionally high coolness factor providing pilot’s experience to anyone. All this in a safe package that transforms hardcore aviation processes into a fun experience.

In this case the user interacts in all the above mentioned ways, following a pre-defined process: booking is similar to calling an Uber using an app – trainings are simulator sessions – preflight checks are done using a tablet while the user has to phisically check the aircraft – flight is controlled through the touch screen tablet or physical controls in the aircraft. A truly integrated experience where the user interacts with the aircraft physically, digitally and virtually, through a number of channels.