Kukui Cup Competition Design: Week 5

After the first milestone, we are taking a different approach to creating the mockups for the website. We will now be focusing on a different time period on the competition time line each week. We will create the pages with the appropriate content for each time period. This method will allow us to focus on a certain time period so we stay in the same mindset as we design each page for the time. It will help us to be more consistent and focus on exactly what should and shouldn't be on each of the pages. we will utilize our 2nd meetings each week to collaborate on our pages and make the necessary changes.

I made the mockups for the billboard page and the help page.



The billboard page is a page that is displayed on a large screen somewhere where there is a lot of foot traffic. People would be able to track the competition without needing to log in to the site. It will show relevant information depending on the time of the competition.



The help page just displays more information about the site and the Kukui Cup Competion.


View the wiki page with more information of the pages here.

Kukui Cup Competition Design: Milestone 1

This is the first milestone of the Kukui Cup Competition Design team. These past four weeks have definitely been a learning experience and being on the design team has enlightened me as to what the task entails. The most difficult thing that me and my team have had to adjust to was not having set tasks in order to meet an objective. There are many ways to reach the goals that are provided and it is up to us to stay on track to meet them. Now that the milestone is here, we are able to show a finished mockup of what we believe the site should look like after careful decisions were made about each portion of the site.

During the meeting on Friday, we really hashed out every aspect of the site and what needed to be there and what didn't need to be there. We decided to go with the single site design instead of the double site design in order to simplify for the milestone. We were able to cut down the number of pages and the number of modules on each page. For example, instead of having a page where the user can quickly see the current data on a login page, we decided it would be more useful and even quicker to have that same data on the home page. That way, we cut out the "logged out" page and made the experience much better for the user.

Much of my time this week was used to clean up the mockups that I have made previously and to create new ones to replace them. For the previous ones, I changed them to add actual content to make them look much closer to what they would look like if they were actually implemented. This was much more useful than I could have thought because actually seeing the site fleshed out like that actually helped me see what was effective and what was not in the pages. While it is quick to physically make the mockups, it is much harder to make the decisions that go into making a mockup. Many times, I would have to go back and forth on a feature or try different things when moving things around to make them aesthetically pleasing.

The two pages:




merged into one:


For the next milestone, much of the work comes in exploring other options. The first task we have is to refine what we have. We have done a lot of work trying to make the site as good as we can, but there are undoubtedly things that will come up as other teams try to implement the site. These may be things like aesthetics, but could also be things such as a module just not making sense to be in there. Since we have worked on the design for a while, there may be things that we may have set our minds to that may not actually be the best implementation. Outside of modifying what we already have, we may pursue the idea of having the two site design. If we could really flesh that out we could easily see what the major differences are between the two methodologies and may even decide to switch designs. Outside of the design aspect, we need to create more content for the site. This would include things like adding more activities, commitments, and goals, and also creating content of our own that would aid in increasing energy literacy. These could be in the form of videos, tips to succeed in the competition, and creating quizzes for the students.

The wiki of our milestone 1 can be found: here.

Kukui Cup Competition Design: Week III

In this third week of the project, I began creating mock-ups of the website. Me and Wing came up with a prototype design of a home page which would have a competition module that could be swapped in a out depending on whether there was a Kukui Cup being held. We used Balsamiq to do this create the mock-up. I also went with the old paper and pencil in my notebook to do a few more designs of this idea of a competition module. The drawings can be seen below. I apologize for the quality of the scans. Hopefully, I will be able to make them more clear later.








After that design, I moved onto another design which would have the competition module always be available, but its content would change depending on if it was before, during, or after the competition. These mock-ups were done in Balsamiq. This wiki page includes all of my mock-ups and an explanation of each page. Click here

During our meeting on Friday, we discussed activities which students could do to earn Kukui Nuts, different visualizations of the data, and questions that needed to be asked during the focus groups with the RAs.

For the next week and the milestone, we hope to choose one of the two designs proposed in this blog entry or another design which separates the main page and the Kukui Cup page. From there, we will be able to create a more polished and finalized version of the site for the first milestone.

Kukui Cup Competition Design: Week II

For this second week of the design planning, we were able to meet together where we were able to brainstorm and discuss many issues. Some of the things that were were able to talk about were: which dorms would be the best suited for a dorm energy competition (Frear vs. Freshmen dorms), features of the site, different metrics for research and competition purposes, and overall design of the competition. This was very productive and I think that we were able to make important decisions which will help us to progress through the design phase.

I went through each of the websites of other school's dorm energy competition. After going through each of the pages, I realize that the goals for our website will put itself much farther than any other dorm energy competition website out there. The vast majority of sites that exist now don't have real time data, are static, give very few updates as to the progress of the competition, and don't allow for social interaction between students. They did however have events and tips for the students to increase their energy literacy.

For next week, we will create our first mockups and go through the actual design of the website and the features that should/shouldn't be included. We will incorporate what we learned by looking at the other websites to design a site which will hopefully result in the most effective was to make our dorm energy competition as successful as it can be.

Kukui Cup Competition Design

In my ICS 414 course, as a class we will be implementing a site for the upcoming dorm energy competition in the Fall semester this year. For the first few weeks of this semester, myself along with John, Kelli, Scott, Wing, and Shanah, will be working together to design the overall competition and create a mockup version of the site using Balsamic, a tool used to create mockups of websites.
We began with creating a list of tasks that we would need to complete in order to meets the goals of the project. We all looked resources which would help us to decide which tasks would be important when we are trying to make the competition as effective as it can be to reducing energy usage. This is a list of tasks that I thought would be necessary to achieve the goals of our subproject.

- continue research to so that we can figure out what is the most effective ways to get students to reduce their energy use
- look at what methods are the most effective for educating the students about energy conservation
- find the best ways to provide energy data to the students which would be meaningful to them and help them to see the results of their changes
- make a list of rules for the competition
- create a point system or another system which would be the basis of the competition
- design a system where students can make pledges to make certain
- create a list of incentives which would encourage the students
- research into extending the system into other sites/social networks such as Twitter and Facebook
- create mockups of the site, using Balsamic, which would include all the features necessary to make it successful
- research what should be in the site through research and looking at other school's programs

Link to page with resources.

Greensmart v2.1

Our project, named Greensmart, is a webapp which displays simulated data of the electrical grid of Oahu, Hawaii. It provides a user useful information in a way that is easy to digest and gain something useful. We have two pages which give different data to the user: a stoplight page and a grid info page. The stoplight page presents the user with a stoplight with either the red, yellow, or green light lit up. This represents the current level of carbon emissions. The user is given an explanation of the data presented and a recommendation if it is a good time to be using energy. The grid info page is a page where the user can enter in data to get the information that they want displayed in a google chart. The user can choose from a source and the start and end date.

There were two big things that I gained from this project. The first one is working in a group. I had only once before worked in a group for programming. The methods that we used in class like Hudson and HackyStat were very helpful in giving me a taste of what I can expect a professional setting to use. The second thing I learned was about the user interface and creating an interface that would be user friendly. There was a big emphasis placed on making the webapp as user friendly as possible and I learned a lot about what things we can do or avoid to achieve that goal.

Software Engineering

This semester I took ICS 413, Software Engineering. This was the hardest, but most rewarding ICS class I have taken. I learned much more about software engineering than I thought I would. I really feel like I am coming out of this class as a much better software engineer. We implemented many things that are used in the professional setting. Now that I have some experience using some of the tools, I feel more confident.

The best part about this class was working in groups. It was a very valuable experience that I haven’t gotten in my other ICS courses. Learning to work in a group, I think, is something that is very important to learn before to get out into the professional space. There are many things that I learned about working with other people and what you need to do as an individual and as a group to be successful.

This course also was set up in a way that was different than the other ICS courses I have taken in the past. The lectures were placed online and the time in class was used to work on our assignments. I felt that this was very effective and I wish that more courses would implement this same style of teaching. The hardest thing is the self-discipline to watch the videos online. Since the videos were necessary for the next class, if you don’t watch the video, you’re not going to be able to utilize the time in class productively.