The design of EZ-FIX allows housing managers the ability to quickly process and assign jobs to the house mechanics (mechanics in this context refer to anyone employed by the facility staff for repair related purposes). EZ-FIX was designed to allow users (house managers) to easily filter and view information about repair requests, known by our system as jobs. As seen in the image above, a user is able to filter jobs by clicking in the left most column, view a listing of jobs in the middle column, and view specific information about a selected job in the right most column.
One major design decision that was influenced by the heuristic evaluation is the stucture of the middle panel. Initially the jobs listed in the middle panel were broken into three different categories: unassigned, assigned, and completed. This allowed the user to quickly discern the status of a repair job. We found this to be an issue during the heuristic evaluation, though. It was hard to keep a consistent layout with a varying number of jobs in each section. For this reason, we pivoted and build the middle panel to list all jobs and provided labels to allow the user to discern job status.
Another design stemming from the heuristic evaluation was the consistency of the right panel. Initially the design had action buttons (mark complete, assign, submit update) on both the left and right sides of the panel. Additionally, these buttons were not all the same style -- two were red while the mark complete button was default and looked very out of place. The purpose of this was originally to not attract as much attention but it seemed as if this back fired as most users noted this as a major area for improvement. As seen in the screen shot above the right panel was improved to be more consistent and streamlined. The mark complete button took on the custom styling, the assignment widget was improved to be more streamlined with more safty (unassignment), and the submit button for updates was moved to the right side in order to maintain consistency.
EZ-FIX is implemented as a web application; it is written in html, css, and javascript. A choice was made to use well known, trusted frameworks as to mitigate cross-browser conflicts. For this reason, we decided to use Twitter Bootstrap's CSS and Javascript framework for major layout and JQuery for javascript functionality.
The layout of the UI is structured using Bootstrap's grid layout. There are three major columns: one for tabs/filtering, one for listing jobs, and one for displaying the selected job. In addition, there is a navigation bar that includes a system search and user options (logout).
The javascript is very cleanly separated into modular components. EZ-FIX mainly consists of models to hold the data, event listeners to capture user actions, and functions to handle user actions. There are 3 main models in our application: jobs, updates, and people. Each model is constructed with available information retrieved from Firebase (described below) and contains appropriate mutator methods.
There is technically no "backend" to our application; rather, we're using Firebase to persist all changes. Firebase provides a javascript library that gives an API to create, read, update, and destroy data. More succinctly, it allows us to create and modify data by calling javascript functions. All jobs, updates, and people are loaded onto the client through firebase as soon as the page is loaded.
The clean separation of concerns of our front end code allowed changes and new features to be quickly built. The typical flow is: a user makes an update to an existing model instance (stars a job, adds a label, creates an update, etc), the client side code calls the appropriate mutator method on the object, the mutuator method takes care of persisting the change by updating Firebase, finally the view renders the updated instance. The simplicity of this flow allows for additional features to be very easily implemented by simply adding the corresponding model methods and view changes.
Michelle
Rebecca