Client
Victron Energy
Industry
Energy systems
Company size
100+ employees
Services we provided
• UI / UX
• Digital Design
• App development
Technologies
• Xamarin
Do you want to know more?
Complexity made simple
Solving the usability puzzle
The previous app complicated, rather than simplified, the installation process. There was a need for one app which handles product selection and on-the-spot troubleshooting. Our redesign transformed frustration into satisfaction and reduced the load on Victron’s support teams and communities.
Empathizing with both amateur and professional installers
El Niño, alongside Pim van Daelen and Cliff Design, redesigned the app with installers in mind, whether they are amateurs or professionals. Understanding the challenges of both user groups and work environments resulted in an app tailored to their needs.
Simplifying information overload
Instead of confusing users with technical terms, we went for a dual-layered approach. The surface layer offers simplicity for all users, while a deeper layer caters to power users with advanced options. We focussed on making this information readily available in the relevant screens, eliminating the need for searching through the app.
Overcoming compatibility challenges
To ensure compatibility across all devices, Xamarin's capabilities were chosen as our mobile app platform. Xamarin provides a nearly native design and performance experience. In addition, this platform makes it easier to maintain the Toolkit app. Updated source files are automatically applied to iOS and Android, decreasing maintenance time significantly.
We made sure our app worked well for people facing tough conditions on-site and their wishes. Installers need immediate solutions to solve urgent problems on the spot. These insights drove our wireframe and design decisions.
A clear information hierarchy
Streamlining for simplicity
We made sure even amateur installers could easily find what they need. Information is placed intuitively, right where users expect it. Our aim was to ensure that users, regardless of their experience level, could navigate the app effortlessly.
Delving deeper for professionals
Professionals and power users can access in-depth information in one click. We kept the layout clear, avoiding clutter. This approach ensures that users can access advanced features without getting lost in unnecessary complexity.
The user flows served as a blueprint and made sure we covered every detail, painting a clear picture of the scope of the project.
Our dual layer approach presents straightforward information to all users in the initial layer, while advanced options are available with a single click for professionals.
Moving from flowchart to wireframe and design ensured a smooth process where every detail was accounted for, covering all the topics.
Accessibility anytime, anywhere
Empathizing with the users
By understanding installers, who are facing tight deadlines in challenging environments, we were able to make crucial design choices. We put ourselves in the shoes of the users, considering their needs and challenges to created a more effective and user-friendly app.
Decluttering for clarity
We prioritized clarity over anything in the interface. Large tap targets, clear output values and legible text enhance usability even in the most challenging conditions.
Stress-testing for usability
Validating our prototypes guarantees readability in any situation. This included real-world testing, applying low brightness conditions, resulting in optimal usability and legibility.
Dark mode default
Given low-light working environments, dark mode became the default setting. We recognized the importance of adaptability in various lighting conditions, hence the optional light mode. This decision enhances usability and reduces strain on the users' eyes.
Every component was carefully crafted, making sure the app looks great whether it is viewed in dark mode or light mode.
Maximizing efficiency through minimal clicks
Addressing a common issue
Most users only need a fraction of the app's features. Although every product and situation is added in the app, only the information of 1-3 products is relevant to that user. We streamlined the user experience to prioritize the most relevant features, reducing unnecessary clutter and improving efficiency.
Saving precious time
We added shortcuts in the flows, by highlighting recent items and adding a QR code scan for product-specific content. These features aim to optimize the user's workflow, saving valuable time and enhancing overall usability.
Mapping out the steps in flowcharts enabled us to identify possible shortcuts, to make navigating the app quicker and easier for users.
By adding quick ways to navigate, like showing recent items and using a QR code scanner, we reduced the amount of clicks by up to 10, saving users valuable time during the installation process
Features like recent items and searching by keyword are repeated all over the app. This speeds up the navigation process significantly.
The result
Developing an app tailored to installers' needs transformed the installation and troubleshooting process. By simplifying complex information, organizing it intuitively, and prioritizing accessibility and efficiency, we've made Victron Toolkit an indispensable tool for both amateurs and professionals in the field.
