Hager Group
Elevating digital strategy through user experience
Collaborated with Hager Group within their Design Studio, using an Agile framework, on innovative IoT digital product projects.
Hager Group: UX/UI Design for Electrical Installation Solutions.
About the Design Studio.
Hager Group is a leading provider of solutions and services for electrical installations in residential and commercial buildings. They offer a wide range of products, from circuit breakers and wiring accessories to smart home systems.
Multidisciplinary team working iteratively to design and develop user-centered digital products
Highlights.
Add features on the existing (coming soon)
A custom configurator for a discerning audience (coming soon)
1. User flows improvements and redesign on B2B mobile apps
With Hager Pilot.
❓ What is Hager Pilot?
As a B2B native mobile app for certified electricians, allowing the installer to configure and control an electrical circuit breaker using its phone. It's a valuable tool for electricians seeking quick and reliable support in the field, remotely as well.
🔑 Key features of this app include Protection flow,
enabling installers to update circuit breaker firmware, and a step-by-step diagnostic guide to resolve product issues.
🎯 Target market: UK and France
My Role.
👉🏽 Refining the user experience based on feedback gathered from field tests, addressing key friction points.
👉🏽 Redesigned the UI, improving readability and user guidance through visual hierarchy and refined animations.
👉🏽 Adapted the application for the French market, refining content and functionality to meet local needs.
👉🏽 All while seamlessly integrating with Hager's growing design system.
The Challenge.
Hager Pilot offers a range of features, including step-by-step diagnostic guide, product information, and troubleshooting assistance.
It was already in progress when I joined. Specifically, the Protection flow was under development
How to reimagin the traditional PDF diagnostic guide as an intuitive, mobile-first, step-by-step digital experience for electricians.
How I overcomed this.
A proper Homepage
44% of users are missing the diagnostic guide, likely due to confusion about the "update" function and low banner visibility. Since users who find the guide appreciate it, we should prioritize clarifying the guide's purpose and improving its promotion.
V0
Integrating a New Design System
Through Iteration
Installers tend to read the dense instructions diagonally, resulting in missed information and unsuccessful installations. On the bright side, they really appreciate the animation for the reassuring factor.
STEP 1
STEP 1
BEFORE
Structuring the guidance
Installers tend to read the dense instructions diagonally, resulting in missed information and unsuccessful installations. On the bright side, they really appreciate the animation for the reassuring factor.
STEP 2
STEP 2
Interactive Flow for IoT
I worked closely with the operational team to map all interactions and product states before designing a user-centered interactive flow.
V1
Last Proposition
By breaking down this crucial flow into smaller, more manageable steps (and doubling the screen count), we were able to create a much more user-friendly and stress-free experience, as validated by user testing.
👇🏽
To make the choice more conscious and defined, the aim was to offer two options that clearly correspond to the two main functionalities, each with a distinct path.
👉🏾
To improve installer comprehension and task completion, the dense instructions were redesigned with clear, actionable steps, prominent visual cues, and a conditionally enabled button to ensure all steps are followed.
👉🏾
V0
V1
In response to feedback from the first field test, I proposed and implemented design improvements that balanced user needs with budget constraints and market realities.
AFTER
2. Balancing UX technicals constraints and market needs
With Hager Intercom.
❓ What is Hager Intercom?
As a B2C native mobile app allows to control your Hager intercom system from your smartphone or tablet. You can answer calls, open doors, view camera feeds, and talk to visitors remotely, adding convenience and security to your home or building.
🔑 Key features of this app include remote answering of calls,
remote door opening, live camera view with two-way communication.
🎯 Target market: Europeen
My Role.
👉🏽 Ensuring an optimal user experience throughout the delivery phase.
👉🏽 Designing efficient navigation and anticipating all user flows.
👉🏽Participating in weekly meetings, presenting designs, and gathering feedback.
👉🏽 Ensuring visual and functional consistency, and adherence to usability/accessibility standards with Hager Design Sytem.
Visual Glimpse .
Light and dark mode
Offering both light and dark modes enhances accessibility, improves user comfort, caters to different contexts, maintains brand consistency, aligns with design trends, and can potentially offer battery life benefits. All of these contribute to a better overall user experience.
Furthermore, with the implementation of the new design system, the team has taken all of these considerations into account. This was not the case with the previous design, where light and dark modes were not consistently addressed.
Welcoming Users: The Onboarding Experience
Onboarding is essential for the Hager intercom app because it directly impacts user adoption and satisfaction. Effective onboarding guides users through key features, reducing confusion and encouraging regular use. A poor experience can lead to app abandonment and a negative brand perception.
YES
I have an account
NO
I don’t have an account
Collaborative Handover: Detailing Interactions
Clearly communicating interactions during developer handover is crucial for accurate mobile app development. Well-defined interactions ensure the final product matches the design vision, avoiding misinterpretations and rework. Detailed specifications lead to a polished, intuitive app, minimizing friction and maximizing quality.
Get ready for more chapters! They're coming soon
3. Add features on the existing
4. A custom configurator for a discerning audience