Taigo Energy SMAR
Interactive data visualization dashboard which monitors Solar PV system performance
Project Overview
I served as the sole UX Designer and collaborated with Product, Engineering, Marketing, and Support teams.
Due to NDA's, names have been changed.
Taigo Energy is a successful established international company based in northern California which provides products, technologies, software and services to installers, distributors, and Original Equipment Manufacturers within the photovoltaic industry. The SMAR site is a complex web app which allows users to monitor the performance of their PV systems. It is free to download and use, with more advanced features included as part of a premium SaaS model.
When I was brought onboard, a large multi-million dollar partnership with an Inverter manufacturer was on the line. The dashboard needed to be redesigned quickly and deadlines were tight.
Some light box images may not display properly in Safari. Webflow is working on this but for the best experience, please use Chrome.
My task was to redesign the dashboard with an improved user experience and refreshed UI.
Understanding the users
Who uses this app?
Although the app is free for anyone to download, it is mainly used by residential owners and PV installers. After talking with product and tech support as well as observing proud PV system owners post their daily generation stats online, it helped me realize what metrics matter to these users. PV installers want to troubleshoot and check performance of solar modules easily, and system owners need to check their PV generation for proof of ROI on their solar investment.
"It's really nice to see consumption and grid data information". - PV system owner
Displaying AC data
Until recently the Taigo SMART webapp could only display DC data from the solar modules (panels). However with partnerships with inverter manufacturers and the addition of net metering or "shark meters", the display of AC data is now possible and seems to be of greater importance to the user.
"DC data doesn't matter much to me since AC is what the home uses. If AC data looks low, I can take a look at the DC side of things to see if voltage or current looks lower than it should be". - PV system owner
Challenging assumptions
Due to the highly technical nature of the dashboard, it would be easy to assume that the PV installers were well versed in electrical engineering concepts and terminology. However after talking to the technical support team about what kind of calls they usually receive, I was surprised to learn that many calls came from non-tech savvy PV installers. Many PV installers come from a background in roofing and may take a relatively short term course on PV installation which ranges from a few days to several months. This helped me realize the importance of displaying complex concepts in an understandable manner for all users regardless of background.
"I actually got started in the field by just applying to start out as a technician, with no construction background whatsoever. Many of our employees came from temp staffing agencies as well- work on site with a temp agency and get hired on with the actual EPC after that". - PV installer
UI Refresh
Aligning stakeholder objectives
Although the various departments had different visions for the new dashboard in terms of features, everyone could agree that the UI looked outdated and needed to be refreshed. After creating a mood board and having a few stakeholder meetings with concepts I created, we decided on a refreshed theme.
Although the lighter #33AA29 color is the brand color, using the darker #00573B color for the dashboard comes with a number of advantages, It provides good contrast against a white background for text style buttons, works better for backgrounds, and can be used more liberally across the UI in comparison to the strong #33AA29 color.
Old (left) vs New (right) sub menu stylings. One of many accessibility and visual hierarchy improvements.
New features
Various departments had different ideas for what features they wanted to include on the redesign. Using techniques such as affinity mapping and competitor analysis combined with user feedback, we were able to include a few new core features to improve the user experience.
I'll highlight a few here:
New Energy Flow widget which allows the user to see the direction and stats of the energy flow of their system in real time. It also allows them to troubleshoot equipment issues on the spot.
New PV generation graph lets users monitor their total Production vs Consumption vs Net energy sold or bought from the grid very close to real time. They can also monitor the state of charge of their battery.
Implementation
Working with Engineering
I am very lucky to have a talented team of in-house developers on board for implementation of the redesign. We are using Bootstrap 4.5 for implementation currently but are slowly transitioning to Vue.JS. At the request of engineering and to make things easier to implement, I based designs for all breakpoints on a 12 column grid. Using Gitlab and Teams for project management and collaboration, I continue to work with engineering on a daily basis on tickets and backlog grooming.
Tablet
Mobile
Measuring Success
Although not a main source of income, the company also monetizes the app through a premium version as part of a SaaS model, one of the ways we will measure the success of this redesign is through number of premium signups as well as user feedback.
- The redesign has now entered beta phase with the majority of the redesign in implementation in sandbox mode
- Soon the redesign will be rolled out to a small set of users for feedback collection
Although the 2020 Coronavirus pandemic may affect metrics in the short term, I will continue to monitor the results and will update this page.
Reflections
The Taigo SMAR app is a powerful application which helps move humanity towards a sustainable future. Focusing on human-centered design, it's important to translate complex concepts in an understandable way and prioritize usability in the functions the users really need.
Back to top
