SUPPLY MIX CALCULATOR

Client: SaskPower Corporation
Project Name: Supply Mix Calculator (2015)
Type of Project: Interactive online calculator
Primary Roles: usability testing, front-end coding, ui design

Defining the Problem

Electricity demand is going up in our province. In order to meet that demand, SaskPower needs to increase output, update infrastructure, and explore fuel options. To help customers understand the impact of these choices, SaskPower wanted an interactive online calculator developed. The calculator will demonstrate to customers how different fuel types affect:

  1. infrastructure cost
  2. the environment
  3. the customer’s bill

Understand the User

The calculator is in response to feedback gathered from a variety of social channels, and personal conversations with customers who are asking:

  • Why does SaskPower need to invest in more fuel/infrastructure now?
  • Why can’t we just ‘go green’ and put up a bunch of wind turbines/solar panels?
  • How will these changes affect my bill?

Brainstorm

Communications led a brainstorming session with engineers and UX/Web Development team. As a group we came up with technical and design requirements.

Initial brainstorming results

Overall Goal

It was important to impress on visitors to saskpower.com that:

  • we need more energy(fuel) to meet rising demand
  • more energy means more infrastructure
  • having only one source of fuel isn’t reliable
  • ‘going green’ is possible, but costs are high

Initial Requirements

  • Sliders represent different fuel types
  • As sliders move, the following indicators dynamically update
  • total energy output
  • infrastructure cost
  • fuel cost
  • resulting average bill
  • text bubble above person summing up their choices (eg: “Lots of wind power is great for the environment, but your bill is going to be quite high!”)

Prototype-Build-Test

UI Design

The design always starts with a rough sketch on paper. The intent at this point isn’t to “design”, but to simplify the information from the brainstorming session as much as possible.

First sketch based on white board

Prototype-Build

After working out the basics on paper, I designed a mock-up in Balsamiq. It included not only the app wireframes, but also some multiple choice questions to gauge the users’ opinion and knowledge of the various fuel sources. This allowed the users to click through the various task scenarios on their own, while I took notes.

Higher fidelity design mocked up in Balsamiq and tested with users

The mock-up was exported to a PDF form that could be emailed to me for further statistical analysis. The final page in the mock-up was a System Usability Scale (SUS) survey, which I like to add at the end of all user testing.

System Usability Scale or "SUS"

Develop Testing Plan

With the mock-ups are complete, the next step was to write a script and create a design testing plan:

The UX Testing Plan included:

  • Basic script for tester to use (introduction, what they can expect, explain ‘talk aloud’ method)
  • Outline 3 task scenarios
  • Metrics to gather
  • Plan for analysis
  • Recommended next steps
Proposed testing set-up

Test Results Document

Based on overall goal of educating the user (vs the usual getting something done quickly) I ended up not doing the usual timed tests (eg: time on task, completion rate, error rate, etc.). Instead I used survey type questions to gauge if they changed their mind or “got it”.

I ended up testing with 5 people from the target group supplied by the Communications and Marketing teams (25-45 year old women).

Test results included:

  • a UI Problem Matrix that outlined UI issues
  • UI Recommendations based on user feedback
  • Comprehension Before and After measured with survey type questions
  • SUS Score: Mean SUS Score of 74.5 (B+)

The test results and UI designs were then sent to our agency of record for final graphic design.

Upon receiving the final design, I coded the front end while my colleague worked on the JavaScript calculations based on the spreadsheet provided by the engineers.

Front end coded based on design provided

Test-Learn

Due to the fleeting nature of web content like this, once the project went live, no further testing was scheduled. If this was a bigger or more complex project, I would test again to establish some benchmarks and plan for future improvements.

One criticism I have about the final layout is the vertical nature of the design. I think it would have been better as a horizontal layout since the aspect ratio of monitors is wider than tall. It is important the users see the entire calculator on their screen. Smaller screens may be cutting content off. This means they are missing out on the complete experience, which leads to some frustrated users (eg: moving slider while the result of their action is off screen).

< back