Robotic Mower App

Client

TTI // Home Depot

When

June 2022 - November 2022

Location

Anderson, SC

Role

Interaction, Visual Design, Prototyping, Testing, and Development hand off

Context

TTI is global company that owns many power tool brands, including RYOBI. They are moving towards integrating apps and digital interfaces into their new products.

I was half of the UI/UX team at TTI

At a company with branches all around the world and over 50k employees, I was one of two UI/UX designers. I was responsible for leading UI/UX design across all brands, including all apps, digital interfaces, updates, and design systems.

During my time at TTI, I learned an immeasurable amount. Some of my achievements include:

Forming the department: Since there were only two of us and we were both recent college graduates, we didn't have a Director or Senior designer to provide us any guidance. We pushed ourselves until we made up for that lack.

Worked on the highest profile projects: TTI was expanding into new markets when I joined. We worked on the first global project and the first product where the app was essential to the use of the product.

Established a design system: This helped keep designs consistent in look and feel across all apps. It also helps designers and engineers to work more efficiently.

Project Background

When I came to work at TTI, the company was attempting to break into the robot market. The first of the robotic projects was a robotic mower. The first generation Ryobi Robotic Mower (the Robo Yagi) and its app were released in 2010 and were not recieved well. The product was rushed and TTI didn’t have any UI/UX Designers at the time, so the app was designed by Project Managers. It was not user tested before being released in the App Store and did not receive good customer reviews.

Ten years later, TTI wanted to try again. It was the highest profile project in the company, highly visible, and the company’s first global project. The Industrial Designers and engineers were in Hong Kong, the Project Managers were in Hong Kong, England, Australia, and America, and we were designing the app in America.

Global Obstacles

Normal procedure for releasing apps in other countries. Some problems we faced while designing a global app include:

Many early morning and late night meetings to accommodate all time zones
The robot’s design is different based on what country it’s being sold in, which affected all of the app’s imagery
Naming all text in order for it to be translated into 20 different languages
Accounting for regional differences, such as Days of the Week, military time, and verbiage (ex: in America, we say yard, but in Europe they say garden)

Research

Since there was a previous version of the app and product, we had a jumping off point for the information architecture of the app. We also had all of the customer feedback from comments and ratings on the Home Depot and TTI websites. This gave us clear but broad areas to focus on. However, we had to do all the research that was not done initially.

We worked to understand the user goals and needs.
We uncovered pain points with the existing user journey
We determined the success of the tasks measured
We did a lot of market research to understand how competitors handled teaching users how to use the robotic mower, despite it being a largely unfamiliar concept to the average person.

Original Roboyagi App

Moving forward, we aimed to fix the following problems indicated in red above:

The screens had too much wording that made the user more confused
There were too many important functions occurring on the same pages
The design was very out of date and did not align with the Ryobi VBL as well as standard UI/UX practices
Robotic mowers are an unfamiliar frontier for most users, and the typical demographic ranges from someone technologically savvy to people unable to physically mow their lawn, usually due to age or ability. There were a lot of accessibility issues that needed fixing

Redesign & Testing

Since we already had a jumping off point from the first app, we started restructuring the information architecture and redesigning after defining the aforementioned pain points. We made many iterations throughout this time and tested them initially with Industrial Designers, Project Managers, and Engineers around the office to narrow down the many designs.

Early Iterations

After finishing the first round of redesigns, we sent out the designs to the team for user testing and feedback. This project was very high profile and kept under very strict nondisclosure agreements, so we could not test the designs on people outside of the project a year away from mass production. We sent the drafts to Project Managers, Industrial Designers, and Engineers who were involved with the project in North America, Hong Kong, Europe, and ANZ.

The testers submitted comments on the prototypes and we collected all the feedback on an Excel document that categorized who made the comment, what section of the of the app it occurred in, date, details, development status, image, and priority.

Excel Sheets

We based the priority of redesign updates off of three factors:

Task Criticality x Impact x Frequency = Priority

Task Critically - How important the task is to the user's experience?
Impact - How much of an impact does this issue have on the user's tasks?
Frequency - How many times does this issue come up out of total participants?

Key Issues

After compiling the comments from the testers, the following were the key issues that took first priority:

A robotic mower is a product that most users are unfamiliar with. The manual control function was something that was confusing a lot of users, so in an effort to remedy this I updated the control design to replicate a more familiar concept- a simple remote control.
The wording was another issue that took priority. The product was very text heavy and intruded on the overall look and feel of the app. The words had also been supplied by Project Managers and Engineers in other languages, so a lot of the text nuances had been lost in translation. After overwhelming comments on the text being confusing, we were given permission by the Project Engineers to rewrite the text.
The scheduling function of the app was also giving users trouble. They wanted to be able to see more of the schedule at all time and simplify the Adding and Editing sections.

Creating Solutions

Based on the above problems identified, I worked towards addressing these pains by coming up with the following solutions:

We then used Userberry to send out the new designs to users and fine tune from there.

Development Process

We made High Fidelity mockups in Adobe XD. We created components and an asset sheet, marked all screens for export, set them to development specs, and sent the links to the developer via Jira.

After the development handoff, I worked with the developer to make sure every interaction was accounted for. I also conducted a UX review of each version of the Test Flights and APKs to make sure they were correct and in alignment with our goals.

XD File

Hi Fi Prototype

Jira Tickets

Designing Globally

Because this app is to be used globally, we had to take into account many regional differences and designed alternatives, including: legal documents, days of the week, imagery, time, socials, and text.

Final Product

Key Takeaways

Since the Robot Mower will not be released until 2024, it is to quantify the results of our work. However, based on overall user testing and feedback, I feel confident that the 2024 App will see much more success than the original RoboYagi App.

I learned so much working on this product. This was a politically tense project for TTI and I learned how to navigate difficult situations with VPs, Presidents, and even the CEO of the company, accommodating important opinions while still pushing innovation. It was also my first project working globally, which really expanded my communication skills.

I'm proud of the evolution of this app and I'm excited to see the outcome.