/GArdena Digital hub

Onboarding Redesign -
GARDENA smart system

Increasing user satisfaction and business metrics under time pressure.

Two large images of app screens: the left one displays instructions for scanning a QR code, while the right one shows how to initiate a firmware update.

Summary

The Gardena Smart System comprises a suite of intelligent gardening tools interconnected through an internet-enabled gateway. The initial step in the user onboarding process involves connecting this gateway to the Gardena server.

A comprehensive review of the current process has highlighted significant concerns. As the user's first interaction with the system, the onboarding experience is pivotal in shaping their perception of the product.

My Role

In my role as UX Manager, I was responsible for the planning, coordination, and execution of the comprehensive assessment of the smart system.

After identifying and verifying a range of issues within the onboarding process, I was responsible for the redesign in close collaboration with the embedded development team.

Result

User Satisfaction

The rate of failed initial connections decreased from 70% to 15%, with the remaining errors primarily due to a known technical issue.

User Freedom

Users receive guidance for both Ethernet and Wi-Fi setup, resulting in a 160% increase in gateways initially connected via Wi-Fi.

Happy Costumer Service

Minimized customer service inquiries by implementing context-sensitive help screens, enabling users to resolve issues independently.

Happy Costumer Service & Users

Including essential data in the contact form has streamlined the customer service process, reducing response times.

Results

User Satisfaction

The rate of failed initial connections decreased from 70% to 15%, with the remaining errors primarily due to a known technical issue.

User Freedom

Users receive guidance for both Ethernet and Wi-Fi setup, resulting in a 160% increase in gateways initially connected via Wi-Fi.

Happy Costumer Service

Minimized customer service inquiries by implementing context-sensitive help screens, enabling users to resolve issues independently.

Happy Costumer Service & Users

Including essential data in the contact form has streamlined the customer service process, reducing response times.

Uncovering
the Problem

Summary

To gain a thorough understanding of the entire product line, which has undergone significant evolution over time, my team and I embarked on an extensive expert review. This review encompassed all facets of the product, both digital and non-digital, as well as the interplay between these components.
This process revealed that onboarding was a primary area of concern.

To gain a more detailed understanding, we carried out a series of usability tests. These tests showed that a significant number of participants encountered specific issues.

Ultimately, our observations were substantiated by concrete data: 70% of all attempted connections to the system failed.

A combination of two images. The first showing two people using an app and a gateway. The second is an excel file including all results.
Expert Review with the Touchpoint Channel Map as a result.

Main issues found

  • Instructions just for connecting via ethernet, more complex process for wifi missing.
  • Steps in user manual and app not in sync.
  • The user can proceed to the next step without finishing the last one, leading to errors.
  • No contextual help if user runs into problems.
  • Images and texts often not informative.

This led to...

A sad smiley face

High costumer frustration

Setting up the system's physical devices already demands considerable effort from customers. When this is compounded by a complex and unclear digital guidance process, the frustration intensifies significantly.

A knocked-out smiley face

High work load for costumer service

Customers often resorted to contacting customer service for setup assistance, increasing the team's workload due to the process's complexity and the unique nature of each garden setup.

An angry smiley face

Negative Feedback & Reviews

The onboarding sets crucial initial expectations for the system, and any negative experiences can lead to unfavorable reviews

For these reasons, upper management has designated the redesign as a:
High Priority

Our Approach

Introduction

For the onboarding process redesign, we adopted a lean approach, grounding our decisions in rapid user testing, insights from competitor analysis, and open discussions with the embedded development team to ensure feasibility.

Time Constraints

As the gardening season neared, it was crucial to complete and deploy the redesign before its onset. This entailed finalizing the design, programming, quality assurance, and deployment before this key date, placing significant time pressure on the design phase.

Competitor Analysis

Our UX team greatly benefited from an extensive competitor analysis we had previously conducted on comparable IoT products.

This analysis, which detailed crucial steps with comprehensive screenshots and annotations, allowed us to effectively reflect on our own processes. We could discern which strategies to adopt and which to avoid for our system, ensuring a more informed and strategic approach.

This research provided a solid foundation for us to develop initial concepts and explore potential solutions.

An excel file showing screenshots, photos and annotations for a competitor.
Example Competitor Analysis with annotations.

General Solution Process

In our approach, we prioritized rapidly validating our ideas before delving into detailed solutions. This strategy enabled us to swiftly develop a robust, overarching concept.

An image depicting the overall process: Phase 1 involves continuous ideation, prototyping, and testing. Phase 2 is focused on Design & Build. The final step is measuring results.An image depicting the overall process: Phase 1 involves continuous ideation, prototyping, and testing. Phase 2 is focused on Design & Build. The final step is measuring results.
Phase 1

Ideate & Prototype
& Test Ideas

In order to explore and test a diverse range of solutions including variations in structure, imagery, text, and help systems, we decided to conducting multiple rounds of unmoderated remote usability testing.

We chose to use the platform rapidusertest.com, which offered several key advantages for us:

  • Efficient and cost-effective setup of tests, aligning with our resource constraints.
  • The platform handled participant screening and recruitment, streamlining the process.
  • Rapid turnaround time, with test setups leading to result videos in just 5 hours.
Two wirframes sie by side, showing early concepts.
Left: Starting Point - By letting users pick the inclusion method we can give provide step-by-step guidance.
Right: Contextual help: - The help button is not a primary action, but clearly states when the user should act.

The Challenge of "Remote Testing" for IoT

Conducting early-stage testing of IoT systems presents its own set of challenges, and these are further amplified in an unmoderated remote environment.

For several of our prototypes, it was crucial for testers to interact not only with the companion smartphone app but also with the physical gateway device.

We aimed to discover:

  • Users can identify errors and recover on their own.
  • Their responses to LED signals and waiting periods.
  • Their comprehension of instructions involving the physical device.

For these particular prototypes, we chose to use ProtoPie.io, an advanced prototyping tool. This allowed us to simulate a digital gateway that could interact with our app prototype, providing realistic feedback based on user actions with either the app or the gateway itself.

An Smartphone shwoing an App screen beside the image of a Gateway. Below the Gateway are three buttons to rotate the device.
Example screen from our prototype, displaying the app alongside a rotatable Gateway. We were also able to simulate LED flashing and errors, providing a realistic experience when users encountered problems. The prototype presentation received very positive feedback from the participants.

Main decisions after testing

1

Enhancing On-Screen Information and Feedback

Along with clear instructions and supportive imagery, we opted to incorporate simple, straightforward animations to further enhance the user's understanding of the system's current activities.

2

Support Systems for Error Resolution

We integrated contextual help screens and support options at key points in the process.
If problems occur that can not be resolved by the user, a straightforward customer care contact form is available. This form automatically sends specific data, aiding the customer care team in quickly identifying and addressing the problem's root cause.

3

Checkpoints & Fallbacks

We strategically placed checkpoints to confirm the completion of critical setup stages. These checkpoints are designed to be informative yet unobtrusive, providing reassurance without disrupting the user’s flow.

In addition, we incorporated 'technical checkpoints' as fallbacks, ensuring that users don’t need to start over if the app is closed.

All decision have been made together with the Project Owner and the Development team to ensure feasibility concerning our tight schedule.
Phase 2

Design & Build

General Approach

To meet our deadline, we aligned the development and design work to proceed in parallel.

User Flow Optimization with Embedded Developers

As the developers began back-end work for the support system, our focus was on refining the general user flow of the onboarding process.

In collaboration with the development team, we iterated multiple times to create a comprehensive flow that accounted for all potential user scenarios, challenges, and system checks.

This allowed us three main things:

  • Efficient collaboration with the development team, focusing on feasible and impactful design solutions.
  • The ability to swiftly reorganize steps in the flow to accommodate technical constraints.
  • A more distributed workload, enabling the development team to work on implementing and preparing various components while we finalized the screen mock-ups.
A big flow diagram using UML language.
The flow might look complex, but it included many things that happened in the back, not visible to the user. This enabled us to plan for any possible situation.

Finalizing Screens, Texts, and Images

Once we had solidified the general concept and user flow, our focus shifted to fully developing all the screens.

This phase benefited greatly from the insights we gathered during our user testing, which had already explored various combinations of images and text, as well as interaction and feedback patterns.

Adapting to unforeseen Challenges

Our initial plan was to collaborate with a 3D artist to create the final images. This wasn't just a time-saving measure; we aimed for high-quality, professional visuals.

However, due to budget constraints brought on by the uncertainties of the coronavirus pandemic, we had to adapt and find an internal solution, leading me to take on the creation of the final images.

This not only honed my skills in visual design but also ensured that we tailor the images to communicate exactly what was needed by the user.

Example screens

A high-fidelty image of an app screen, presenting to main options: Connect via Lan Cable or WI-FI.
While orange is Gardena's primary color and signifies action on their physical devices, it can be challenging to incorporate effectively. Therefore, we opted to use a more subdued tone of this color.
A high-fidelty image of an app screen with instructions to start a firmware update.
This step is optional for users opting to connect via Wi-Fi. Since the app and the gateway aren't yet linked, we could not detect any progress automatically. This was a big point for discussion.
A high-fidelty image of an app screen, showing how to connect the device by scanning one of two QR codes. The wrong code is crossed out, the other one is highlighted.
The remaining 15% connection failure rate is largely due to scanning the wrong code. Ideally, we would have addressed this technically, but time constraints made this unfeasible for the current version. Consequently, we had to settle for a less elegant solution for the time being.

Conclusion

Our iterative and collaborative approach not only enabled us to complete the Onboarding redesign on schedule, but it also yielded impressive results.

This success is evident in the significant reduction of connection errors, which dropped from 70% to 15%. It's important to note that the remaining errors are primarily due to a technical issue beyond our immediate control.

Particularly instrumental was the user testing-focused experimental phase, which rapidly provided us with a deep understanding of our target objectives. These insights were crucial and informed every subsequent step of our process.

Explore another story