UC Davis Facilities Management:
Energy Audit Website

Design Process

01. User Research

Who are the users? 

To start off, I set out to understand who the potential users of this website would be by discussing the purpose of the website with Facilities Management staff and the other intern, Ana. As background information, we found out that the website was being built by two graduate students as part of a class they were enrolled in, and the ultimate goal was to have the website be a walk-through guide, that someone can follow step by step, to complete an energy audit for a particular building. The users would likely already have some expertise in energy and conservation topics, regardless of whether they have any specific experience in energy auditing. The website should be a comprehensive guide, so there is a lot of content to sort through and understand. It's most likely that other grad students in relevant departments would access the website as a campus resource for projects they get assigned in their classes.

As part of this initial research process, I also observed the entire process of an energy audit from beginning to end with the two grad students and other staff as guides for the audit of an office building. Additionally, this also contributed to a parallel project, which was the mobile app for the energy audit. The two grad students attempted two methods: 1) taking notes by hand, and 2) taking notes with the energy audit mobile app. The structure of the mobile app helped my understanding of the hierarchy and chronological process of an energy audit.

Card Sorting

The next step was to organize the information architecture of the website. When we started, the website was very simple, with marketing highlight boxes serving as navigation to certain pages, that were harder to access (2 or 3 clicks away), from the main drop-down menu. We wanted to optimize the navigation in terms of efficiency and user-friendliness. So the goal was to see how users would intuitively organize the information.

There were a total of 19 pages which were listed out as individual cards, such as "HVAC System Overview" or "Opportunities in Building Envelope" and so on. I decided on conducting an open card sort that would be ordered (participants were asked to number the categories that they created). This was to allow maximum flexibility and opportunities for the participants to dictate the navigation as they wished. The way participants would order the categories was also significant, as it helped with the order of items in the drop-down menu bar. There were a total of 8 card sorts conducted, each with a different individual.

Above: examples of the first category name that participants created

02. Synthesis and Ideation

Insights & Ideation

When I was reviewing the results from the card sort, a few similarities became obvious and helped provide insight into the participants' thought process in organizing the cards. For one, it was common to have within the range of 5-6 categories. There were two main approaches that we could see dividing the way participants sorted the card. The first approach was the more common one, in which people grouped the cards by binding together categories for a particular component, such as building envelope or HVAC, and also sorted energy data pages together in smaller categories. On the other hand, a minority sorted by the process rather than components, e.g. grouping together all the "Opportunities" pages for each concept, e.g. Opportunities for HVAC. Because the first method was found to be more widely used, I decided to plan out the navigation on the wireframe according to this approach.

03. Wireframing

Final Wireframe

06. Reflection