User Testing

MILESTONE GOAL

To perform iterative usability tests to further improve the interaction between our prototype and stakeholders.


PROCESS

Phase 1: We made a list of all the changes that we wanted to make to our prototype following our milestone 6 presentation. However, we did not want to act on any changes until we received some reactions from users. We conducted usability tests with two stakeholders that we had interviewed earlier in the semester.


Phase 2: The first round of user testing provided us with useful insight into improvements on our interface. These findings actually reinforced many similar concerns that we had noted previously. The main findings included the problematic color contrast in some of the page banners, adding more appropriate instructions for each pages, and making callout boxes for each pages that were necessary for the logical flow of the website. We revised our prototype based on these findings.


Phase 3: After revising the prototype, we proceeded to the second round of user testing. The second round highlighted some areas that still needed improvement. For example, we found that the text on the pages was still too small and the transparency of the callout boxes created problems for one of our users. However, we definitely saw positive results from our modifications.



MAIN FINDINGS

  • Insufficient instructions for each page (panel on home, introduction to the website)
  • Text is too small (banner)
  • Color contrast is problematic in some places (home banner)
  • Need callout boxes for each page/necessary for logical flow (home, learn, act page)
  • Lack of cost, payback, and monetary incentives (panel on home)
  • Home graphic and maps need explanations



BeforeAfter

HOME

  • Adjusted color of Home banner to improve color contrast issues
  • Made text larger
  • Added backdrop to text to improve readability
  • Added callout that appears once user clicks on an interactive part of the house
  • Added basic instructions on how to adjust the budget range
  • Changed improvements icons to dynamic menu for scalability




BeforeAfter

THE LEARN PAGE

  • Adjusted color of Home banner to improve color contrast issues
  • Made text larger
  • Added backdrop to text to improve readability
  • Added callouts that highlight information on the selected user and their project
  • Changed bubble icons to the following:
Solar
Water
Wind






BeforeAfter

ACT

  • Adjusted color of Home banner to improve color contrast issues
  • Made text larger
  • Added backdrop to text to improve readability
  • Added callouts that highlight information on the selected user and their project
  • Changed bubble icons to the same as seen above




BeforeAfter

SHARE

  • Made text larger
  • Added backdrop to text to improve readability



NEXT STEPS

  • Ride the mechanical bull at the Fifth Quarter