Voltage Drop Calculator
I blended UI design, UX strategy, technical research, and intuitive data visualization into one cohesive interface to create a powerful tool that helps landscape lighting professionals determine the requirements of their lighting projects.
ROLE
Lead designer for the B2B e-commerce site’s suite of project calculators.
PURPOSE
Develop a responsive tool that helps landscape lighting professionals accurately calculate voltage drop in outdoor lighting systems - a crucial factor for both performance and compliance.
I went far beyond the typical workflow of a designer by conducting in-depth research, collaborating with industry experts to understand the electrical engineering behind voltage drop specific to outdoor lighting, fine-tuning the mathematical formulas used to calculate voltage drop, and creating tools to aid engineering and quality assurance.
For our developers and QA department, I created a detailed spreadsheet that calculated voltage drop for all gauges of wire simultaneously, providing crystal clear validation with color-coded conditional formatting.
LEAD DESIGNER
DESKTOP WEB
MOBILE WEB
MOBILE APP
Figma
FigJam
Google Sheets
Microsoft Excel
UX Research
Sketching & Wireframing
Electrical Engineering
Prototyping
QA
Research
I worked directly with specialists in our outdoor lighting department and listened to feedback from B2B customers through connections with our Customer Experience team.
Our customers wanted a tool that made it quick and easy to check the voltage at the last fixture.
They wanted to make sure that voltage drop was acceptable over the length of their circuit.
Finally, they wanted to be sure that they were selecting the right wire for their landscape lighting project.
Design
Knowing that our customers were focused on determining voltage at the last fixture first and selecting the appropriate wire gauge second, I set out to design a calculator that would put those two aspects in the spotlight.
I usually start off a new design by sketching. This is the most natural way to get some ideas out of my head and into a visual form that I can look at and evaluate.
I knew that I wanted to provide clear visual feedback in this calculator.
Our users primarily compare voltage drop and voltage at the last fixture primarily by wire gauge. The visual Wire Gauge Comparison tool makes this plain and simple. Our B2B landscape lighting professionals can instantly compare the suitability of their selected wire to the two closest gauges above and below their selection in the color-coded chart.
The end design had two key features to aid in planning an outdoor lighting project:
Large presentation of voltage drop and voltage at the last fixture.
Clear visual feedback that shows if voltage at the last fixture is acceptable, borderline, or too low.
In Development
I developed a spreadsheet that calculated voltage drop for all gauges of wire simultaneously. I created custom formulas for Google Sheets that were relative to the low-voltage outdoor lighting products that SiteOne sells and I incorporated color-coded conditional formatting to make sure that the data presented was crystal clear.
This was a crucial resource for our developers and QA department when this calculator was in development and testing.
Final Thoughts & Next Steps
The Voltage Drop Calculator is now the second-most used calculator on our website and iOS app.
This calculator is a valuable tool for our B2B lighting professionals, and I’m proud to see that it’s frequently used.
Next Steps
We have to plans to advance this calculator into a full-blown project configurator that would have the data of all our lights, fixtures, and other components, allowing our customers can plan their entire installation with our in-suite tool.
