Watt’s the Big Deal?

Landing Page
│
├── Hero Section
│   ├── Project title
│   ├── Subtitle
│   └── Instruction ("Click any circle to learn more")
│
├── Solar Impact Overview, each with dropdown info panels
│   ├── 1,400 Solar Panels
│   ├── 549K kWh Generated
│   └── $155K Annual Savings
│
├── Real-World Energy Equivalents (click to flip cards)
│   ├── Refrigerator
│   ├── LED Light Bulb
│   ├── Laptop
│   └── iPhone Charging
│
└── Footer
    ├── Bentley University
    └── Office of Sustainability

I didn't want users to have to rely on recall when navigating the site. Now, the information panels open as a dropdown below the circles. Additionally, the selected circle turn a darker shade of yellow to make it clear on which panel is open. I incorporated these heuristics to allow users to make decisions with ease.

Rays circle the sun when hovering over a circle, signaling to users that something happens when pressed.

I reduced and moved the text in the subtext of the suns. The long text underneath the circle looked more like a sentence. The icons and numbers should let users know the message, with text supporting and providing a bit more information rather than overwhelm the user.

I ended up grouping the subtext with the bold text in the sun. The text labels were previously below each circle. I received feedback that the text didn't seem related to the circle. Using the Gestalt principle of proximity allows users to perceive the elements as being grouped together.

I also got feedback to have each card have its own flip state. Before, there was one "click to flip" button but it could be overwhelming for users to see all the cards flipped. Giving users the ability to flip the cards individually reduces cognitive effort and visual clutter since the flipped state has much larger numbers. This decision was inspired by the Nielsen (2006) article on progressive disclosure. This allows users to disclose (or open) more information when they want or when they are ready.

I chose to use Datawrapper to visualize monthly solar production in kilowatt-hours. I embedded the chart into the information panel. I explored different charts but the column chart was simple and effective in showing production. I chose to display the kWh above each column to avoid having users scan across and read the y axis.

A minor change I made was to remove the Bentley logo from the top of the page. It didn't go well with the colors of my page. I added a picture of The Arena to fill the top width of the site.

How much did Bentley save in 2025 with solar panels?

• I used monthly solar production data provided by the Office of Sustainability for 2025.
• Annual savings was calculated using the total solar panel production of 549,344 kWh in 2025. Using the service/supply rates, I calculated estimated savings of $155,201.
• Calculating the annual cost using service and supply rates for Massachusetts in 2025. I chose National Grid and determined the Arena would be classified as using a G1 commercial rate. Supply rate was fixed at $0.1441, while service rates changed according to the month.

If you'd like to talk about AI usage in design, I'd love to hear from you! Have you created interactive prototypes with the help of AI tools? Where do you think AI comes in handy in UX design, and where have you seen it fall short?