User Experience (UX) for Smart Product Onboarding by App - Best Practice

REHAU, one of the leading premium brands for polymer-based solutions in the construction, automotive and industrial sectors, has chosen us to develop an app that enables the use of its in-house smart water safety system RE.GUARD 2.0. This consists of a smart water control system within the pipes and the associated water detector. This innovative system can detect water leaks and record water consumption, allowing both private households and businesses to benefit from preventative measures and efficient resource management.

Our approach

The onboarding process in general is the initial step in which a device is connected to the cloud so that it can be controlled remotely. Smooth and intuitive onboarding is crucial for user acceptance and satisfaction and thus the success of a product. Developing a user-friendly app requires careful planning and implementation. Our goal was to make the onboarding process as simple and understandable as possible.

To do this, we applied a number of proven UX methods to optimize the user experience and facilitate the all-important onboarding for users.

An overview of the methodology:

• Remote kick-off workshop
• UX review of the existing app
• Qualitative user survey
• Concept phase: wireframing and user flows
• Implementation of the onboarding route

Remote kick-off workshop

An essential part of our approach was a kick-off workshop. In this workshop, all relevant stakeholders came together to develop a common understanding of the final solution and to clearly define the objectives of the project. A key element of this workshop was the creation of a benefit/effort matrix. This matrix helped us to prioritize the most important features by weighing the expected benefits for users against the required development effort.

The workshop participants, including representatives from the client and our design and development team, contributed their different perspectives. This collaborative approach allowed us to ensure that all key requirements and expectations were considered. The kick-off workshop served as a guide for further development and helped us to focus on the most important and valuable features.

UX review of the existing app

At the same time, a comprehensive UX review of our client’s existing app was carried out. In our UX review, we analyzed the current user interface and experience to identify weaknesses and potential for improvement. Our focus included identifying issues such as complicated instructions, technical hurdles and unclear steps.

When reviewing the app, we used the ISO 9241-110 standard entitled “Interaction Principles”, among others. This contains 7 interaction principles that are applicable to the design of any user interface, regardless of whether it is software, hardware or a combination of both.

It quickly became clear to us that the old onboarding system lacked appropriate assistance and that there were also authorization problems that prevented progress entirely. One of the worst incidents from a UX perspective.

Qualitative user survey

REHAU communicated the target group to us, which enabled us to conduct a user survey. We did this with a gas/water installer, a homeowner and IoT experts.

These surveys helped us to gain a deep understanding of end users’ needs, expectations and challenges. Through direct conversations and focused questions, we were able to gain valuable insights into users’ actual usage scenarios and preferences.

When it comes to UX, it is very important to talk to the target group in advance. Only through direct feedback from users can developers and designers ensure that the solutions actually meet the needs and are practicable. User surveys make it possible to recognise potential problems at an early stage and adapt the development accordingly, thereby avoiding costly errors and rework. They also encourage greater user loyalty, as users feel that their opinions and needs are taken seriously and taken into account.

Although our sample was not large, as a UX designer you often have to make compromises and think pragmatically in order to manage the balancing act between time, requirements and the available budget. Nevertheless, it was a start and gave us the security of not developing in the wrong direction. Anyone who works in an agile way will be very familiar with this approach - “progress over perfection”.

Concept phase: wireframing and user flows

After the analysis phase, we began the conception phase. We developed wireframes and user flows in Figma that served as a visual blueprint for the new app. This helped us to clearly visualize the structure and flow of the onboarding process and ensure that all necessary steps were logically and intuitively arranged.

We always work on an interdisciplinary basis, as almost all technical disciplines play a role in onboarding. Our onboarding building blocks, which we have already discussed in more detail in the article “Onboarding building blocks”, also helped us with the design. In a nutshell, the building blocks are the essential solution steps of onboarding, but they should be individually adapted depending on the product, requirements or budget. Ultimately, onboarding can always be carried out successfully, but each decision has a different impact on the overall user experience.

Implementation of the onboarding route

A well-known quote from Albert Einstein says: “If I have an hour to solve a problem, I spend 55 minutes on the problem and 5 minutes on the solution.”

Once the big picture was clear, the final implementation was almost child’s play. Even though new topics of discussion often only arise during implementation in an agile way of working, we could be sure that we were always on the right track.

Since pictures say more than 1000 words, here are some pictures of the final onboarding process.

Clear entry into the onboarding process: If, as in our case, there are different product types, clear entry points make the selection easier and the user later only sees the steps that are really relevant to them.

Step-by-step instructions: Clear and visually supported instructions guide the user through each step of the process.

Help and FAQs: In the event that users encounter problems, we have integrated easily accessible help and an extensive FAQ section.

Visual feedback: Each completed step is confirmed to the user by visual feedback, thus avoiding uncertainties.

We are very proud of the end result and initial user tests confirm that our work has paid off!

Conclusion

The successful collaboration with our client has shown how important a user-friendly design of the onboarding process is. By applying proven UX methods, we were able to develop an app that excites users.