Decathlon Design

This week I was able to create a few mock up pages for the Solar Decathlon system that our software engineering class is currently working on.  Initially we worked on our designs individually before we were assigned to groups of three or four students.  As I mentioned in an earlier post my background is in print layout and design working for our school's newspaper.

Initial thoughts

Main Menu

The key to working together as a team is to always have some an line of communication with every member.  Working in a group is nothing new to me, and working with a couple friends made this group experience even more enjoyable.  Being comfortable enough with your team to present 'off-the-wall' ideas without fear of being judged harshly allows the group to come up with some ideas that you wouldn't normally come up with on your own.  I must admit that I was also relieved to be working in a group because that meant that the work load would be spread out, which would allow me to focus on what I like to do, layout design.

When our group first formed, we decided to take a look at the mockups we had come up with individually and tried to take all the ideas we liked and tried to merge them into one system.  We had decided to start with my layout as a base design, which has since gone through some redesign.  For the most part I was to deal with most of the graphical aspects of our program, as my team would put as much content and functionality as they could on each page.

Design choices

Energy menu

As a group we had a general idea of what we wanted to include in the system.  I think the most challenging part of this assignment was how it should be displayed to the user.  For me, the design had to be both intuitive and innovative.  Throughout the past week I would always be pitching lines like "How cool would it be if we did... " or "I have an idea!  It's a little out there, but I think it's pretty good."  Many of these ideas didn't make it too far, but a few of them were accepted by my team.

As a computer science major, when you think of visualizing data you'll probably think of something like a bar chart or line graph.  While these types of visualization do a good job at presenting the user with information, they're not very enjoyable to look at.  For this project I have tried to come up with ways to present the user with data visualizations that they could provide the user with information they needed, be visually appealing, and if at all possible, be interactive with the user.  One of these ideas was the visualization I came up with for our energy menu which can be seen above.

Another important design aspect is to be consistent.  You don't want to have your users to be navigating to your system and then suddenly the entire layout changes and they don't know where to find anything anymore.  On all of the pages a constant menu bar is there to tie all the pages together.  The menu bar contains a widget and 4 main menu buttons.  On the left side of the page you have a submenu bar that corresponds to the current main menu that you are located in.

Project management
While working in a group, we used a combination of Subversion and Google Project Hosting which can find at: http://code.google.com/p/solar-decathlon-teamhawaii-2.  This setup worked out quite well as literally takes seconds to share your files with the entire team.


This project was an Issue Driven Design Project, which meant as issues came up, we would create a task in the Issues section of our Google Project, from there team members would try to handle the issues, whether it was to update files or create new pages.  Even though there are only three of us working on this project, having the issues down somewhere can be good because you can just check to see if there's anything that needs work on instead of having to remember it.

Thoughts so far
I think we worked very well as a group this past week.  There are a few more designs that I would like to come with in the next week.  I am also looking forward to programing these systems and have been trying to create designs that implement many of jQuery UI's.


********************************************************************************


Updates

As a group we put on the finishing touches to our mock up.  We ended up adding only a couple new pages: the Scheduler and Settings menus.

The design concept behind the scheduler was to allow the user to create a new event a simply as possible.  We want to incorporate the same 'drag' utility that has been provided throughout the entire program to allow the user to automate tasks with just a few simple clicks.

Scheduler

The scheduler also would have a chart that corresponds to the time period currently being viewed.  It will allow the user to predict how much energy is going to be used during that time period, and should have a general idea of the stress it would put on the system.  It could turn into a game of balancing tasks to make sure the house never takes on more than it can handle.  We'd like the graph's color represent the house's current load, green being a safe condition, and red being a high load.  By clicking on the graph we hope to allow the use to modify tasks near that time frame.

Settings Menu

In addition to the current functions available in the settings menu, I think there should be a 'snapshot' that can save the variables of the house's current state.  Then at any time the user could revert to the saved states with a single click.  This could apply to many different situations including things like a power save mode to a nice dining mode.  It would really be up to the users to set the house up exactly how they'd like it to be every time they use the snapshot feature, but the possibilities are endless.