Versions Compared

Key

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

...

Storyboard #1 (Gmail-esque):

...

Sketch

Design Description

 

House manager Michael McIntyre logs on to ‘appName’ and sees all of his repair jobs in the center pane of the main dashboard. Michael decides the “broken printer” job should have a higher priority than where it is currently listed (at the end of the ‘New’ section), so he clicks and drags the event to the top of the ‘New’ section using the drag-and-drop affordance at the left of the repair job listing. Next, Michael decides to assign the “broken lightbulbs in the penthouse” job to his mechanic, Jenks. He clicks on the job, which is then highlighted, and more details about the job appear in the right pane of the dashboard.

 

Michael can use the ‘Assignment’ area at the bottom of the right pane of the dashboard to assign the job to a worker. At first the worker picture is blank, and the drop down list says “Job not assigned”. Michael clicks on the drop down list arrow, sees a list of all his workers, and chooses “Jenks J”. The blank picture is now replaced by a photo of Jenks, and an “Assign” button appears which Michael can push once he is ready to assign the job.

 

Jenks J. the McCormick Hall mechanic gets to work that morning. He logs on to ‘appName’ and notices on his dashboard (very similar to the house manager’s dashboard) that he has some new repair jobs assigned to him. (In essence, a mechanic’s dashboard focuses on presenting to the mechanic the new, active, and recently completed repair jobs assigned to that particular mechanic as opposed to presenting all repair jobs.) He notes down the jobs assigned to him in a notebook and heads out to complete the jobs. (Note: Same screenshot is used as Michael M.'s dashboard since UIs are very similar.)

 

Jenks realizes that he needs more light bulbs in order to repair the lights in the McCormick penthouse. Each repair job has an update log that Jenks uses to record a new update; specifically, Jenks uses it to note that the job’s progress is being blocked because he needs more light bulbs. He submits this update by filling in a text description of the update, specifying the type of update via a dropdown menu, and then clicking ‘Add Update’.

 

When House Manager Michael McIntyre returns from his lunch break, he logs back into ‘appName’ and notices (in the top-left corner of his dashboard) that he’s received a notification. He clicks on the notification alert to bring up a dropdown menu of notification summaries. He sees from these summaries that Jenks needs more light bulbs to proceed with the McCormick penthouse repair job.

 

So Michael McIntyre uses ‘appname’’s Address Book feature to bring up a searchable, filterable list of contacts and their contact information. He filters through the contacts by clicking the ‘Electrical’ Tab, finds Home Depot’s phone number, and then places a bulk order for light bulbs.
Michael McIntyre then returns to the main dashboard and in the left pane updates the light bulb job to notify Jenks he’s ordered the light bulbs and that Jenks should proceed with the job tomorrow morning.

Storyboard #2 (Drag and Drop):

...

Sketch

Design Description


Sketch 1: Home Page
The idea behind the home page is that Michael can easily see all of the problems associated with a particular floor. Michael sees a floor plan on the left that he can easily tab between. The design is almost folder-like so that he can move to see what problems are associated with a particular floor. Each problem will be enumerated depending on the ordering from the right panel. When Michael first logs on, the task lists will arranged based on the time the event was entered. However, he can then rearrange the tasks on the right by dragging them and dropping them in the proper order.

Simple icons are used to represent what object needs to be fixed. There is a drop down menu that the house manager can use to assign the task to. If the job is urgent, he/she can click on the exclamation point icon to signify importance.


Sketch 2: Drop down Menu
Initially, no mechanic will be assigned to a particular job. When Michael decides that Jenks should be in charge of a particular task, he can then find the picture of Jenks and select him.

Sketch 3: Address Book
In the case that Michael needs to contact an outside source, he can easily click on the phone icon (or some other address book-like icon). A list of people who are available will pop up with their name and associated profession (e.g. an electrician will have a light bulb next to his image). Michael can then click on the person and then a phone number will appear for him to call.


Sketch 4: Mechanic’s View
Jenks the Mechanic has a similar view to Michael the House Manager. He sees two panels with both the floor plan and the task list on the right. However, in the task list, he does not need to assign the task to anyone so instead there will be a modified right panel.  There is an additional icon (the hand) that allows Jenks to notify Michael when there is a need to request additional parts or that he, Jenks, needs assistance.

When he is done with a particular task, Jenks can click on the check mark to signify that the job is completed. The task will then be greyed out and diminish in size in order to allow the user to still see the task if desired, but be in an unobstructive manner.

Studio Feedback

It is important to make sure the user has a notion of priority amongst the tasks.
 - Doesn't seem to come through in the interface the (high, low, etc).
 - No feedback other than that they're in a list.
 - No affordance -- invisible piece of information.

...