Ryobi

When South Carolina-based TTI partnered [x]cube to help bring their Ryobi™ analog devices on to the digital platform, we knew exactly what to do. Our results-driven engineering approach helped TTI recreate its popular range of home improvement tools thereby disrupting the home improvement market

Get It In Your Inbox

Download Case study

Here's how ryobi leveraged digital transformation to disrupt home improvement market.

BACKGROUND

Ryobi™ is a brand familiar to homeowners and DIY enthusiasts who use smart power tools to renovate their homes. The brand’s power tools like Laser level, Moisture meter, Laser distance measurer, and Laser pointer are a rage with DIY users as well as the pros in the construction industry. So when TTI wanted to bring their cool devices like Stud Finders and Laser Level meters into the digital fold, it helped the company not only to cater to the new-age smartphone crazy customers but also significantly brought down the cost of its home improvement kit.

Why is it a mobile app?

While designing a mobile app for a product like Ryobi™ power tools where the analog hardware devices have to be synthesized to the digital platform, the one question we ask at the strategy level is ‘Why is it a mobile app?’ Leveraging our strategic alliance with TTI, we figured out how to bring together the analog and digital platforms in the best possible way. We wouldn’t say the path was rosy! Of course, we did walk into the sunset with a satisfied smile in the end!

Home improvement mobile app development - [x]cube LABS

DIY App Development Case Study - [x]cube LABS

Let's do cool new things

This project gave us ample opportunity to do cool new things with the given frameworks – be it recording values in terms of metadata, and pencil-drawn sketches, or associating geo-location and other data with mobile app, or integration with the camera and video, etc.

KEY FEATURES

Supports eight amazing hardware devices: Laser Pointer, Laser level, Earphones, Moisture meter, IR Thermometer, Laser distance Measurer, Inspection Scope, and Stud Finder. Every device works on a protocol.

Links the device to your phone once you register with your email ID and the product’s serial number. User registration helps users to be confined to region-specific content and get alerts on deals nearby. Configure the WiFi settings to transmit data/images to your phone.

Capture images, take notes, use geo location tagging, record audio or video sessions - save now and share later with the outside world! Store and retrieve the values taken from hardware devices.

Document with the touch of your phone screen, track project details and overlay them on project photos or videos. Save project details and images for later reference, and reports.

Digital Product Design and Development - [x]cube LABS

CHALLENGES
STRATEGY

A product like this has a few good-to-have challenges: how to synthesize the analog and digital platforms, how to present the UI into a specific screen size while dealing with the limitations, and how all the hardware devices will now reside together in a single mobile app.

Showcasing brand digitally

The other important aspect to be kept in mind is the branding. When you look at the Ryobi™ hardware, it has very specific industrial design specifications including certain kind of lines, colors, and textures while the phone also has its own technical specs as part of the iOS or Android platforms. So how do we showcase the Ryobi™ brand in a digital format, especially when the brand has specific color codes and geometric designs? We had to understand how to bring an interface to a physical device if the brand has an existence outside of the mobile space, and how to represent the brand on the UI of the mobile app.

Redesigning integration

What we’re talking about here is a physical hardware device with known interactions on analog. Redesigning the integration for something like this with its two-handed hardware components, while keeping in mind the key ergonomic aspects of using the device is not an easy task. And that’s where our expertise in mobile strategy and human-centric design comes into play.

Our experts were engaged in the strategy portions in the most ideal and best-case scenario manner by visiting the client on site for a week for brainstorming and ideation sessions. We analyzed and addressed the challenges one by one after careful deliberations involving key stakeholders for each of their hardware products so we could bring all pieces of the puzzle together to understand a normal user's product.

From the parts to the whole

We also needed to know who their users are and what they wanted to move into the digital space for this product! We broke down the functionality of the product to better understand how to move it into the digital space – we did this exercise with every individual feature of the app created for each piece of hardware.

Integrating pieces of hardware into a software

Another part of our strategic engagement is how we address the concerns for our direction as we try to balance the fact that this is still a Ryobi™ product although we’re integrating a piece of hardware into a software. We followed process by assessing the brand, ideating on the guidelines and then collaborating on what those specific key UI elements should be across the entire app with the set of deliveries for our proposals and, ultimately, the final recommendation of what would ultimately turn into the UI design.

What did we do to overcome challenges?.

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.