Xantrex Web App

Role: User Experience Flow Planning, User Interface Design, Marketing Design

Tools: Figma, Adobe XD, Adobe Illustrator

Project Timeline: 4 months

Team size: 1 designer, 1 product manager, 3 developers, 1 firmware engineer, 1 QA

Project Summary

I worked with the product team to redevelop a mobile first web app, so that we have a platform that can connect to all Xantrex products and allow users to monitor and control their electrical system, whether they were camping in their recreational vehicle or on their boat. Previously, users had to download and connect to separate apps and Xantrex had to manage multiple apps. I applied what I learned from designing the first Xantrex FXC Control app and from conducting user research.

Status page where a user may monitor their electrical system and the settings page.

What is the problem?

Users want an all-in-one mobile app to connect to all their Xantrex products. The first app was constrained with features and the ability to build upon the app and interface with new products. Xantrex began to develop separate apps for each product, whereas competitors had an all-in-one solution.

Solution

We recognized we needed to develop a new app that was able to communicate and interact with all our products in one, future proofed app. I conducted user research on the original apps and developed a solution that allowed users to better monitor and control their electrical system.

Context

User Context

Users liked the core functionality of our existing apps, such as the Xantrex FXC Control App, but they wanted the ability to monitor and control multiple Xantrex products from one app. They wanted more information and more intuitive controls for changing commonly used settings.

Project Context

I developed and executed a plan to conduct user research. I created a list of specific and open-ended questions for users to answer. I reached out to marketing influencers we have a relationship with, internal firmware engineers, application engineers, tech support, sales and asked sales to reach out to some key customers. I also developed a preliminary interactive mockup that the head of product management was able to show and test with our customers at a B2B tradeshow.

User research findings:

Users wanted a control center, where users can use common settings.
Alerts need to be more organized and provide more information.
Users wanted to see more useful data on the status screen.
Users wanted to ensure that settings that could have actual harmful effects on their electrical system were moved or locked.

Functionality and Design

Achieved goals of the app:

Monitor system without having to interface with a physical control panel.
Get up to date power consumption/ generation information.
Visualize the electrical system.
Allow users to easily understand settings and provide options to change settings with more context.
More useful alerts system that provide more information and context for the user. Not all alerts are negative or require immediate intervention.

Feature: Status Screen

Users will have a wide variety of different electrical system requirements depending on their type of vehicle. The status screen had to be designed that it may expand to showcase a large amount of products.
The status screen shows essential information with a diagram showing the “flow” of power through the products, any faults or warnings with specific products and key product data.
Product cards show specific key data.
Monitoring tab that shows the user more detailed product information.

Status: essential information to monitor users system.

Feature: Control Screen

User feedback indicated they wanted to be able to customize and pick the settings they use most often.
We curated the most commonly used options and provided the option to allow users to customize this screen with settings widgets.

Control: Most used features available for quick access.

Feature: Alerts

Users may set up the app to receive notifications on mobile devices.
Alerts are separated into two categories: faults and warnings.
Notification badge on Alerts icon in navigation correlates to most recent alert.

Alerts: view faults and warnings with system. Users may also receive notifications.

Feature: Settings

Settings are organized by product type and products sections are expandable/collapsible.
To ensure that users do not cause any real harm to their electrical system and products, we created an “advanced” settings section that is password protected.
Included a description of each setting from the user manual on each settings page.

Settings: easy access to make adjustments. Each settings has a description to ensure user aware of what they may be changing.

Ideation

I used the Xantrex FXC Control App that I designed previously as the base experience for this new app. There were components that would transfer over and there were opportunities to improve and make changes.

I leveraged Figma for this project. Figma allowed me to rapidly ideate and create variations of pages to show the different electrical systems and options.

I worked with Product Management to ensure the status page would be adaptable to handle a wide variety of system configurations.

Below you may see various ideas of how we could present information to the user. From the user research, users wanted graphs, charts and specific system information. I created mockups of how we may display this information. I also wanted to create two different ways for people to view information on the status screen, diagram and widget/card view. These features were designed for future iterations of the app due to time and cost.

Impact and Next Steps

The Xantrex App is being poised to be released Q2 of 2022. The app was internally praised for its ability to provide visually pleasing information and being able to scale to various system sizes. The control center page was seen as a great improvement for the user experience, by removing the need for the user to always have to navigate the large list of settings.

The next phase of the app will be to integrate a fully realized monitor page and to integrate graphical data into the app.