The first thing we did was maintain cohesiveness by creating a universal language for key interactions like integrating the capture button of the camera to all the devices by emulating the regular button. Deriving inspiration from the visual language of mobile apps, we managed the universal functionality and iconography part well.
Simplify & make it familiar
Giving the end users something they are familiar with was another challenge we focused on. We had to make sure that the specific hardware button/trigger in each of these hardware devices is now converted into the Shared UI. And we tried to simplify it as much as possible because here we’re emulating the trigger/button that exists in a different format in the analog hardware device.
A nerdier approach
We wanted it to feel like it is the new modern hardware even though it was software with connected hardware. We were basically trying to celebrate the fact that it’s digital now rather than the reference that it’s analog. We had a nerdier approach to the device keeping in mind the techie persona of the user using these smart new power tools.
Of sensors & ergonomics
On the Design front, we focused on two things: how we present values on the screen; how to hold this device from the ergonomics point of view. For these, we had to understand the way sensors work and how to use them on the device, and what we had to visualize on the screen in correlation with the device. This meant some kind of visual feedback of the measurements happening and they needed to be large and legible.
Optimum utilization of high-res screen
Here, we’re replacing the small LCD screen of the analog devices with a large high-density/ high-resolution screen with camera integration provided to show the info, the color, and the iconography. With the availability of more screen space on the mobile device, we had to think about what all and where all we can show information on the screen. So we figured out how to display data and imagery side by side and sometimes on top of each other. We also figured out how to show the on-boarding tutorials as relays while the user is measuring things on this niche device.
Merging branding with usability
For the Branding part, we tried to absorb key similarities and emulating the same in some areas where they overlap like emulating the camera button for capture. And when you look at the hardware, the main body and the trigger have a bright color, while the grip has a darker shade. This is how we’re connecting the fact that the capture button is actually the trigger. We followed the simple rule of making the thing you want to touch as the brightest, largest and the most intense looking thing on the screen. The trigger is where it should be – at the bottom portion of the screen – but now it is yellow. That’s one way we merged branding with usability.