Bolton Solar Power

Redesigning a solar monitoring console for desktop and mobile web

PROJECT TYPE
CONTRACT
SOLO UX DESIGNER
TEAM
HEAD OF ENGINEERING
FRONT-END DEVS
COMPANY STAKEHOLDERS
MY ROLE
User Research
SYSTEM AUDIT
BRANDINg
DESIGN SYSTEM
PROTOTYPING
USER TESTING
TOOLS
Figma
DURATION
3 MONTHS (2022)
Note: To comply with an NDA, I have omitted and replaced confidential information, including the company name.

Overview

Background

For over two decades, Bolton Energy Solutions has designed and produced solar power systems ranging anywhere from personal standalone units to solutions for large-scale commercial properties like hotels, apartment complexes, and corporate offices for household-name Fortune 500 companies.

Bolton customers need a way to monitor their systems that is immediate and accurate, providing them with exact metrics in real time. Enter the console, a tool to remotely monitor power systems and identify irregularities early on so they can be addressed and resolved before they become critical. When I was brought in, the product was in early development, but the interface urgently needed a redesign.

The Problem

Poor usability and accessibility

The existing interface, built by engineers, was hampered by accessibility and usability problems.

No design source of truth

A lack of design standardization meant complicated internal communication, and the current design was neither scalable nor mobile-friendly.

Outdated branding

Additionally, Bolton’s brand was in need of a refresh—its appearance was at odds with the modern nature of their products.

The Task

Fully revamp the console experience

Rethink the product design from the ground up, delivering a redesign with improved usability.

Introduce design infrastructure

Build a design system and component library from the ground up which can be expanded and adapted to future projects.

Update the brand image

Refresh the Bolton branding to reflect the quality of the products they offer.
SUCCESS METRICS

Before beginning my research, I defined some objectives to continually refer to throughout the design process.

The design will be successful if...

It quickly and clearly conveys critical information.
It evokes trust and confidence in the underlying product.
It is intuitive and simple to navigate.

Research

I didn’t have access to current customers (hypothetical future console users) as interview subjects. Instead, I had to rely on lengthy conversations with stakeholders and subject matter experts to draw out the information I needed in order to put myself in the user’s shoes.

I approached the project with two guiding questions:

  1. Who are the users, and what do they truly care about?
  2. Which of the system metrics collected are most meaningful to users?
FINDINGS & ANALYSIS

Hypothetical end users fell into two distinct categories.

Casual

Company bigwigs (owners of power systems), hobbyists, DIYers

Goals

See validation of their investment in the form of energy produced, money saved, and eco bragging rights.

Pain Points

Lacking specialized knowledge, they don’t want to dig through information they don’t understand.

Use Frequency

Once in a while to check in.

Professional

System monitors (employees hired to monitor groups of power systems), field technicians

Goals

To do their jobs well—quickly resolve system irregularities and appease higher-ups.

Pain Points

Juggling many responsibilities. They’re the ones held accountable if anything goes wrong.

Use Frequency

Regularly—they rely on it to do their jobs.

The design should prioritize the professional users.

Since the first group would use the console much more regularly than the second and have more risk and responsibility, the console should be primarily designed for their respective goals: to solve the problem and get their job done as quickly and easily as possible.

Casual users might be more receptive to a “soft” tool with a consumer-oriented aesthetic—something playful, friendly, and approachable. But for professional users, function is paramount—unnecessary flourishes add friction to their ability to quickly get their jobs done.

The battery is the most critical system component.

Once the charge drops past a certain voltage threshold, the battery is shot, and replacing it is very expensive. When the batteries fail, all systems go down, which can be extraordinarily disruptive and costly.

“More than anything else, users want to avoid battery death.”
— Company stakeholder

Key insights:

Hard users, like system monitors and field technicians, present the most frequent use cases.

To align with user needs and expectations, the product should look and feel like a powerful industrial tool.

Their primary goal is to quickly take action to resolve the issue.

The visual design should be utilitarian, prioritizing function above all. Unnecesseary decoration only adds friction to the user task.

Battery charge is by far the most important system metric.

Battery health should be prioritized in the visual hierarchy.

Auditing the Existing Design

HEURISTIC EVALUATION

What were the shortcomings of the existing design?

To assess the needs and priorities of the new design system, I carried out a thorough audit of the existing console interface based on research-backed accessibility and usability principles. This process doubled as a way to gather examples and references to help convey the console’s design issues to a team of non-designers.

Note: To comply with my NDA, I can’t include full images of the existing console design.
ISSUE #1

The existing design was cluttered and visually overstimulating, lessening the impact of critical system messages.

The design was colorful, gradients and drop shadows were applied with a heavy hand, and some hover animations felt jarring and unexpected.

ISSUE #2

Atypical uses of established design patterns were adding friction to the user experience.

Common design patterns and symbols were being used in ways that strayed from their conventional uses, creating situations where the product didn’t behave the way the user expected.

ISSUE #3

The font choice and lack of visual hierarchy made it difficult to quickly scan pages.

The rectangular shape of all-caps text already poses a challenge to anyone with reading difficulties, and the typeface’s nonstandard letterforms were exacerbating the issue.

Further, text styles were unstandardized—auditing just a few pages produced 24 unique text styles.

The audit clarified the design priorities going forward.

Simplicity, clarity, consistency.

Practice restraint.

Use colors and visual effects purely with semantic intention.

Introduce a clear visual hierarchy.

Direct the user’s attention to the most important information.

Keep typography clear and consistent.

Ensure that all type is legible and accessible.

Designing the New Console

WIREFRAMES

The design needed to surface relevant information first and eliminate nonessential clutter.

Many messy sketches later, I settled on a basic structure which limited the dashboard contents to critical message banners, active alerts, and starred systems.

The existing design used cards for each system. I opted to use a data table instead, which allows the user to easily scan down or across a row of column to get a holistic view of a system’s health or compare metrics between systems.

Two of the wireframes I decided to develop further.
MOBILE ADAPTABILITY

I also considered how the console could adapt to a mobile device.

Ultimately, I decided that switching to cards was the best way to provide a complete view of a system’s health without requiring awkward scrolling.

BRANDING

I wanted the brand image to be bold and recognizable, evoking technological capability and industrial power.

The logo also needed to be graphically simple—it should look good not only on the digital console but also on the physical products Bolton manufactures. I pulled a gear motif from the existing logo, rendering it with clean, sharp edges in a quarter profile with radial bars to evoke beams of sun and connectivity. I maintained the logo’s primary color of green, softening the hue and adding gradation between the bars. I chose Akzidenz-Grotesk for the wordmark, hand-kerning to adjust for even optical spacing. I provided the team with spacing guidelines based on fractional values of the x-height.

DESIGN SYSTEM

I built a foundational design system which could grow and evolve through future projects.

Referencing public systems—namely Atlassian, Elastic UI, and Carbon—I built a design system from the ground up with the goals of unifying visual language and enabling a more streamlined workflow for the developers.

The system was a clean, neutral base that would allow semantic colors and critical messages to be the center of attention.

I chose a utilitarian system font (SF Pro) with a minimal hierarchy of text styles, all aligned to a 4px baseline grid to ensure a consistent vertical rhythm.

To make the design system feel modern and prevent it from feeling overly harsh or cold, I softened corners and added thin, low-contrast borders. Elements had adequate breathing room internally and externally and adhered to an 8px grid system, adding the polish and harmoniousness the existing design was lacking.

INTERACTIVE PROTOTYPE

I put together a mid-fidelity prototype for user testing.

Due to project constraints, I prioritized the desktop console. The user flow I decided to test was the primary use case for professional users:

  • Entry point: The user receives a notification that one of their systems is in critical condition and follows a link to the console.
  • End point: The user takes concrete action to resolve the issue, either deploying a technician to handle the issue or contacting Bolton support.
Scroll sideways to view flow  ->

Test & Iterate

USER TESTING METHODOLOGY

Did my design meet the success criteria I’d defined at the beginning of the project?

Evaluating all three metrics required a combination of different testing methods.

It quickly and clearly conveys critical information.

How much information does the subject absorb after short exposure to one of the screens?

Seven second tests

It evokes trust and confidence in the underlying product.

What is the subject’s gut reaction to the visual design? 
What judgments do they make about the product?

Qualitative interviews

It is intuitive and simple to navigate.

Does the navigational structure align with user expectations? Are features easily findable?

Usability tests & quick tasks

I carried out tests with four Bolton employees who were familiar with the concepts behind the console but had never seen it firsthand. Since I wanted to compare my design with the existing interface, I included comparable screens and switched the order of images for each subject.

FINDING #1

The redesign produced a large increase in recall accuracy.

Subjects were able to answer questions about the purpose, content, location, and structure of pages from the existing design with low to medium accuracy. In particular, they struggled to process information about the status of the power systems.

The same questions about the redesign were answered with much higher degrees of accuracy. Most subjects were able to correctly identify the specific alert type, and all were able to accurately describe the fundamental issue with the system’s power flow.

FINDING #2

Subjects found the information architecture clear and intuitive.

All subjects navigated through the flow as anticipated and confirmed that each step of the flow matched their expectations of what they would see before clicking.

They were able to complete short tasks with speed and ease (such as finding system maintenance notes, info about other systems in the group, etc).

FINDING #3

The redesign felt more professional and inspired more confidence in the product.

In comparison, the existing console didn’t evoke the same degree of trust in the company or the underlying technology.

finding #4

A few particular features of the redesign were sources of surprise and delight.

All participants expressed that they liked the power flow chart as a way to visually convey the inner workings of the system, especially the flow animation and the power trend statistic.

DESIGN ITERATIONS

The user testing sessions were extremely productive in identifying potential improvements.

Here are two selected examples of problem areas and solutions:

ITERATION #1

Add more information and a CTA button to the dashboard alert banner.

Users gravitated to the alert banner, and some expressed wanting to click on it. By leaning into this urge and adding a button to view more information, the flow could be made even more intuitive.

ITERATION #2

Provide a way to easily copy links to alerts.

When I asked one participant what his next steps would be after expanding the alert details, he replied:

If I was reaching out to a technician I work with closely, I’d probably screenshot [the alert details] and send it to them whatever way we normally communicate.

His answer raised an excellent point—instead of forcing users to contact their technicians by using the product’s internal contacting system, let them paste the alert details directly into their preferred messaging tool. This way, the product can integrate samlessly into the user’s existing workflow.

The Final Product

HIGH-FIDELITY MOCKUPS

Bringing the design system and testing findings together, here is the redesigned Bolton monitoring console for desktop and mobile.

Note: If the videos aren't playing in your browser, you can also view them on Dropbox.

Logging in to check on a misbehaving system on the desktop console.
The same flow accessed through a mobile browser.