Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Design

Image Removed

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).  The design allows users (house managers) to easily filter and view information about repair requests, known by our system as jobs.   

...

 

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.  Image Removed

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.

Implementation

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).

...