Design
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, which are known by our system as jobs. As seen in the image above, a user is able to filter jobs by clicking on 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.
During initial user testing of our computer prototype (both the heuristic evaluation and in-class demo) we received feedback that the color choice should be re-examined. Some people felt that the red of the buttons indicated importance or error. As it is true that red is usually used to signal error or importance, we felt that the application had a general red look and feel; there is enough red on the page (logo, all buttons, shadow, etc) that the red does not pop out to the user and look as if it requires attention. The red and grey colors were chosen to give an MIT feel to the application.
Grouping
One major design decision that was influenced by the heuristic evaluation is the structure of the middle panel. Initially, the jobs listed in the middle panel were grouped into three different categories: unassigned, assigned, and completed. This allowed the user to quickly discern the status of a repair job and find unassigned and assigned jobs quickly and efficiently. We found this to be an issue during the heuristic evaluation. It became a problem trying to keep a consistent layout with a varying number of jobs in each section; listing all jobs in a group didn't work well, fixed heights of each group didn't work well, and finally hiding empty groups (zero jobs) didn't work well. For this reason, we pivoted and built the middle panel to list all jobs and provided labels to allow the user to discern job status. Every job is listed and has a colored label indicating the status of a job (green = assigned, blue = unassigned, orange = completed). If the job has been assigned or completed, a picture of the mechanic responsible for the job is associated with the particular job. Or else, a default picture is chosen. This allows for quick scanning of a particular mechanic's jobs.
Updates
There are different events that trigger a job to be moved to the top of the job listing. Adding an update on a job moves the job to the top, while assigning a job or marking it complete does not. Typically, an update on a job happens by someone else (the mechanic) and indicates some form of status change (need for materials, etc). Assigning a job is done solely by the house manager and because he is making the change, it's not important for the job to be moved to the top for more attention.
Consistency in Right Panel
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 aligned within the panel. Additionally, these These buttons were not all the same style -- two were red while the mark complete button was a default grey and looked very out of place. The purpose of this was originally to not attract as much attention but it seemed as if this backfired as to be detrimental as most users noted this as a major area for improvement. As seen in the screen shot above, the right panel was improved modified 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 safety (un-assignment), and the submit button for updates was moved to the right side in order right aligned to maintain consistency.
Size of Location and Contact Info
The location and contact information of a job is smaller in font size than the description. This was done to offer a squint differentiation and visually differentiate the information. When a house manager looks at clicks on the detailsjob, he is interested in the details for the job. While it 's is important that he knows the location, it 's is not the biggest concern when assigning a mechanic to the job. Ideally, the manager can quickly scan the job, assign it and move on. The granular location data (floor, room number, etc) is more important for the mechanic responding to the job. The house manager can quickly scan the information and that's what's determine what is important.
Assignment Section
The assignment and un-assignment of jobs is an integral part of our application. It's important that this feature is very simple, yet gets the job done. Assignment is easy, choose a mechanic and click assign. The more interesting case is how to un-assign a job or re-assign it to someone else. Ultimately we went with a simple assign and un-assign. If a job is not assigned, it can be assigned by choosing a worker and clicking "assign". If a job is assigned, it can be un-assigned by clicking "un-assign". We considered a re-assignment option but this ultimately looked and felt overly complicated. In the case a user actually needs to re-assign a job, they can simply un-assign and re-assign the job.
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 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 mutator 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.
Evaluation
EZ-FIX is designed for housing managers, as such it is ideal to do user testing on them. Unfortunately, the semester wrapping up and Bexley hall closing has consumed resources and we were only able to do user testing on one house manager. This specific house manager was part of our initial need finding and was familiar with the problem we were trying to solve. In addition to the one house manager, we were able to test one professional staff and two student desk workers. The professional staff is close to our target user population because she is responsible for contacting various services (elevator and plumbing repair) for jobs within McCormick Hall and cares more about the overview of the facility status. Finally, student desk workers were chose and the closest alternative because they are sometimes faced with repair requests and are well informed of the building status. We noticed that the users had different technical abilities. Some users were familiar with Google Mail while others were not. While this didn't affect the user's ability to test our system, it did have an effect on the learnability of various features (starring for example).
...
- Cannot find a way to mark the job as "important" -- surprised when found the star.
- Severity: Cosmetic
- Solution: Better indicate star's meaning.
- Had difficulty finding a way to add a label to a job.
- Severity: Major - Adding labels is really important for house managers.
- Solution: Make label adding more obvious. Potentially add it to the right panel opposed to the middle panel.
- User suggested having the "add a label" ability in the left-most column to be with the other labels.
- Could not easily find a way to find all jobs for McCormick -- did not realize search was possible.
- Severity: Major - Ability to find all jobs by location is imperative.
- Solution: Make search more obvious. Automatically create labels for location.
- Creating a new job did not immediately show up in the list because "McCormick" was still in the search bar.
- Severity: Major - New jobs typically take action (assign, updates, etc) and need to be visible.
- Solution: Clear search terms when taking action not related to filtering. Automatically go to "all".
- Attempted to search for "Home Depot" in the job search bar.
- Severity: Minor - Nothing appeared and user later found address book.
- Solution: If term found in address book suggest, "Did you mean to search the address book?"
Reflection
As a result of this project, our team learned that using an iterative design process, specifically the spiral model, results in a better product and also reduces stress and time wasted along the way.
...