March 13th - Detail View Interface Implementation (almost) Completed

Team members involved: Michael Del Fante, Eric Oltean, Jonathan Wai, Micheal Seng

Our overall goal for this quarter was to have the detail view completely implemented and fully functional. We are very close to completing the detail view, but there are still a few things to do. We split up working on this milestone in this manner: Eric and Michael would work on developing the detail view, then show a live demo to Jonathan and Micheal, who would then come up with a list of adjustments/improvements for us to make. This way, Michael and Eric could work in an agile environment where neither person was being hung up waiting to hear back from the design team because we could continue working and add any changes to the do to list as they come in. This milestone has been ongoing for many weeks at this point.

The first thing that you'll notice since the last time you looked at the detail view is that we have adopted the design from our wireframes. The sidebar now reflects the current overall status of that refrigerator. The add button to add a new refrigerator is now functional and appears in the top right just like the design. We also added a navigation tool at the top so that you can go back to the folder view easily. For the UI, we still need to update the system information to reflect the information in the wireframes, and update the graphs and sidebar to reflect the corresponding information as well. We also need to fix the sidebar because when the page enables scrolling to occur it no longer looks like a sidebar (doesn't go to bottom of page yet). As far as implementation goes, all of the features that are present are functional (the graphs work, add button adds a refrigerator, etc.).

Our next step after the detail view is completed is to continue implementing the overview page (aka folder view) so that it matches our wireframe designs, and implement the landing page for when a folder is clicked on but a refrigerator hasn't been selected. I have provided a screenshot of the current state of the detail view page below, and the wireframe of the detail view for comparison purposes.

March 13th - Implement login/logout system

Team members involved: Eric Oltean, Michael Del Fante

One requirement that our refrigerator monitoring dashboard needs to fulfill is to allow the users and administrators to log into the dashboard. Administrators will be able to create new folders and refrigerators, while other users will only be able to monitor the refrigerators. We implemented the login page using Flask Security, which is a Flask extension that adds security mechanisms to our application. Flask Security makes it easy to take care of salt-encrypting the passwords, storing sessions, and redirecting the user if he lands on a page that requires the user to be logged in. Flask integrates well with SQLAlchemy, the Flask database extension, so the username and passwords are stored securely in our SQLite database.

The login/logout page currently includes a brief introduction to Ombitron, but we are going to change it to include a brief introduction to the dashboard itself instead. Users have the option to either log in or register. After registering and/or logging in, the user is redirected to the folder overview page. The screenshot below shows what the login/logout page looks like.

March 6th - Stakesholder Meeting

Team member involved: Jonathan Wai and Micheal Seng

We finally met our client, Paul, to discuss the scenarios and personas for the Dashboard. This process is to ensure we are designing the correct product for Paul. What we originally thought of was not far from the correct personas and scenarios. From this, we made couple of improvements on our dashboard.

Personas

Mark - Manager of ArenaWorld

He is responsible for managing the entire arena, which includes making sure all refrigerators in the arena work perfectly. He usually checks in with his Assistant Managers, who report refrigerator status to him. Occasionally, he also looks into statistical data online to learn about different refrigerator brands, to see if better models are available.

Nancy – Assistant Manager

She is responsible for a few of refrigerators at a specific location within ArenaWorld. Nancy is one of Mark’s assistant managers, so she reports fridge statuses directly to him. She usually only looks at each refrigerator’s temperature dial and reports that, since she isn’t technically trained and cannot report any other information.

Joe – Maintenance

Joe is the the go-to-guy when any refrigerator is broken. Responsible for figuring out problems with refrigerators, he tries to gain insight as to why a fridge isn’t working. He wishes that he could have access to more detailed information, rather than just looking at it once it’s broken. Recently, more fridges are breaking, but it’s impossible to predict which ones.

Scenarios

Scenario 1

Mark is a busy person, but he still need to ensure the entire refrigerators that he is responsible functions correctly. There are many assistant managers work under him, who take care different locations. The number of refrigerators varies depending on the location. Occasionally, he wants to check whether all his assistant managers are working properly and make sure solve problems. Also, it is part of Mark’s job to find out and generate report on which brand of refrigerators are better for different cases or which one saves more energy.

Scenario 2

Nancy is responsible for Century Link’s beer refrigerator that Mark assigned her. Every month, she has to report to Mark regarding all refrigerators problem. Also, she has to make sure when there’s a broken refrigerator, it will be fixed as soon as possible. She usually walks around Century Link to check out all refrigerators and record all the internal and external temperature. Nancy feels that the information she collects is tedious and hope that there is a way to check all refrigerators online.

Scenario 3

Recently, more fridges are breaking and Joe goes around to check on the fridge one by one to figure out what is wrong with them. Not only it's time consuming, there are times when he couldn't understand the problem. He would just assumed the fridges are just old or the change in temperature of the fridge is too drastic. He would be glad if there are ways to constantly record the data, so when the fridge breaks down, he would be able to get a better insight.

March 6 - Setup Back-end In Flask

Team members involved: Michael Del Fante, Eric Oltean

Eric and Michael worked on getting the back end functional. This allowed us to send and process requests. Modifying and accessing the data stored in our database. We initially tested the back end with  a chrome plugin called postman rest client. This allowed us to test the back end before connecting it to our front end. This was a very important step in our project so we could connect our front end to the database and reflect the information stored there. 

Here are some of the tests we ran on the back end from Postman Rest:

March 6 - Front-end Usability Testing

Team Involved: Micheal Seng and Jonathan Wai

Today we did our second round of usability testing during our presentation for class today. We updated our wireframe based off of the feedback we received last time. Below are the updated designs that we came up with!

We simplified our dashboard by having just the three icons, in a case, where a company has a large number of refrigerators. Here, we have display two concepts: only show number of refrigerator under each status, and the other one is fraction over total number of refrigerator.

We change the flow of adding folder or refrigerator

User able to add refrigerator while creating folder

Adding new refrigerator

Detail View

We change the concept, where there are only 2 views instead of 3. Here, as you can see, user still able to quickly run through the entire refrigerators on the folder by going through the list on the left. All the refrigerators that throw some errors will go on top of the list.

When user clicked on folder, this is the landing page where user able to see summary and have click on link to the right fridge.

Looking at the detail on a specific refrigerator

Overall, the feedback we received was more positive than last time. People seemed to like the changes we made. The following describes the noteworthy feedback we did receive:

Top level view
First, we asked the class whether they preferred the total to be shown once or under each refrigerator status (as seen in the first screenshot). The class voted and 8 preferred the total being shown once, while 7 preferred the total to be underneath each overall status. There doesn't seem to be a clear favorite.

We also received this feedback:

1. A pie chart might be a better way to visualize how many refrigerators have a green, yellow, or red status.
2. Does the notification system notify you about activity changing on the top level and/or detail view?
3. What about colorblindness? The user would have no way of differentiating.
4. Screen size could be an issue
5. Are icons necessary? Maybe different icons for each status type.

Add folder window

1. Add button isn't easy to locate.
2. User should be able to add a refrigerator by clicking on the add button or by adding it directly to a specific folder
3. Folder isn't a descriptive term. Change to add group or add location.

Detail view

1. Some people thought the icons in the right column (summarizing the detail view) could be clickable when they're not
2. Left & right columns could be better integrated (a lot of space between)

Our next steps for the design team is to work on addressing the feedback we received, brainstorm solutions, and update the wireframes accordingly.