The Big Test

Having completed the core functionality of Decaf, an important last step for the project was to test how it works in a real small business environment. This process provided valuable feedback that I can use to improve the system for my portfolio (and future projects).

I was able to conduct a week long test with the help of two businesses. The first business was the café that I introduced earlier in the term, and the second a medium sized retail store. I duplicated the prototype for each, and asked a scheduler complete a few tasks to test Decaf.


  1. Create employees in the system, and assign them a role
  2. Ask the employees to set their availability
  3. Add shifts for a week (in addition to your existing scheduling system or paper)
  4. Have the employees punch in and out (in addition to existing timesheet)
  5. At the end of the week visit the Payroll page and check vs regular timesheet

I encouraged managers to make as many changes to the schedule as needed during the week, and asked them to record any thoughts they had while using the system in a journal (as not to be intrusive). Please write down any thoughts, the more the better. I also approached a few employees and asked them to do the same. Continue reading

Wishful Thinking

I learned so much about PHP + Javascript development, MySQL databases, interface design, working with time and problem solving on this project. I have already started using the skills acquired from developing it in other school, work and personal projects.

Screen Shot 2014-04-01 at 9.33.53 PM

Given unlimited time and resources, though, and there is much more that I would have liked to do with Decaf outside the scope of a Directed Studies project. In its current form I would describe the project as a working prototype or proof of concept: it meets the design goals I set out three months ago, but I’ve discovered more opportunities along the way.

  1. Request time away: going forward I would like to add a feature for employees to request holiday time, sick days or others type of paid / unpaid leave. There would be three parts to this “module”. First would be a system side part calculates how much holiday or sick time an employee has accrued based on their hours worked or time with the company. Second would be an employee facing section that allows employees to select and submit a request for time away. The last part is the administrative section where managers would approve or deny time away. Time away would be factored into availability when adding or editing shifts.
  2. Auto schedule: this is the dream. Based on employee role (or an additional skills / capabilities table), availability, part or full time status the system would automatically schedule employees. A manager might set how many hours they would like to spend each day of the week or build a template to follow. Then Decaf would fill in the blanks with employees on a weekly basis. After a schedule was germinated, managers could go in and manually adjust as necessary.
  3. Employee initiated shift swaps: if Sandra want’s to give her shift away she can post it on the “Trade” page. Then Sally could offer to cover it with one click. Swapped shifts would be placed in a queue where managers could approve or deny them based on the needs of the business. Ideally managers also post extra shifts on this page that employees could offer to tae if they are looking for extra hours.
  4. Attendance tracking: since Decaf already tracks punches and schedules, it would be great to compare the data to track timeliness and attendance. If an employee arrives late or misses a  shift managers could be notified or points applied automatically. A grace period or allowable number of incidents could be set in the settings section.
  5. Schedule HUD / dashboard: a simple live-updating page that shows the employee, start time, end time and position of each shift. This would make it easy to see who’s working, when they start and what exactly they should be doing. Useful for businesses with different sections (café vs kiosk) or jobs to do (barista vs baker).

And that’s just getting started. CalDAV integration, email / text notifications and full mobile access are among the features I would love to add to Decaf. If anything I have discovered that there is great opportunity to offer a high quality scheduling experience for both small business managers and employees.

Regex Fun

Last week we discovered how to better split up time strings that people might enter. I want the time inputs to be very flexible–anything from “12:00PM”, “523”, “4p”, etc. The regex that we ended with was something along the lines of:


Which was good! But for values like 110 it would return the chunks 10 and 0, instead of 1 and 00. So I worked with it a bit and settled on the following regex:


Screen Shot 2014-04-01 at 9.36.50 PM

This one breaks each digit apart, which gives us more flexibility to work with the data in PHP. After getting the raw numbers I build a string and format it depending on length and composition. This way I can create a string that can reliably be interpreted by strtotime().

The real fun is using PHP to build a uniform time string from the pieces the regex makes for us. My code builds a string based on the length of input, and wether or not it has an AM / PM designation.  If the regex could not understand the entry, the PHP function returns a “fail” string. The bonus here is when you feed “fail” into strototime(), it returns a false (unlike “cat” which is a time!).

function parseTime($inTime) {
 $result; // Create the regex split array
 preg_match("/([0-9])([0-9])?:?([0-9])?([0-9])?[\s]?(am|pm|a|p|h)?/", $inTime, $result);
 $timeString = "";
 $timeString = $result[1] . $result[2] . $result[3] . $result[4];

 $length = strlen($timeString);
 $temp1 = substr($timeString,0,$length-2);
 $temp2 = substr($timeString,$length-2,$length);
if ($length > 2) {
 $timeString = $temp1 . ":" . $temp2;
if ($length == 1 || ($length == 2)) {
 $timeString = $timeString . ":00";
if ($result[5] == "a" || $result[5] == "am") {
 $timeString = $timeString . "am";
if ($result[5] == "p" || $result[5] == "pm") {
 $timeString = $timeString . "pm";
if ($length == 0) {
 $timeString = "fail";
 return $timeString;

Odds and Ends

Screen Shot 2014-03-25 at 11.40.08 PM

This week I started tackling some of the odds and ends I’d like to address in the project.

One of them is the ability to edit shifts instead of having to remove and recreate them when changes are necessary. Now managers can use the edit button to adjust start and end times, as well as the assigned employee. The time and employee selection offer the same validation as a new shift, and changes are reflected without refreshing.

One of the most important things I wanted to do was enable shift swaps. Managers can now easily select two shifts and press the swap button to swap the assigned employee.

Swapping shifts. One of the most important things I wanted to do was enable shift swaps. Managers can now easily select two shifts and press the swap button to swap the assigned employee.

The start of better buttons. Instead of the add shift and add timepair links, users can add shifts or punches by clicking on the relevant date or +.

The start of better buttons. Instead of the add shift and add timepair links, users can add shifts or punches by clicking on the relevant date or +. I plan to address some more links and buttons.

Hour display and regular vs. overtime. Previously shifts were reported in terms of hours:minutes on the Payroll page. Since payroll is usually calculated in terms of hours, I am now using hour based units. Regular hour vs. overtime hour units are also displayed in the current version,

Hour display and regular vs. overtime. Previously shifts were reported in terms of hours:minutes on the Payroll page. Since payroll is usually calculated in terms of hours, I am now using hour based units. Regular hour vs. overtime hour units are also displayed in the current version to two decimal places.

I am still working with regex to try and offer more forgiving time entry than strototime() can offer. My goal is to break up the pieces of the time (hours, minutes, morning/afternoon if available) into an array using the the pattern and preg_match(), then rebuild the time in a known good format to pass on to strototime(). The current version of my regex reads like this:


The problem is that it fails when someone enters a time like 18:00 in the 24 hour format. Adding a ? on the last block prevents the pattern from working at all.

Screen Shot 2014-03-26 at 12.04.37 AM

Other stuff. Shifts and punches that can be selected now have a hover border, making it easier to tell they can be selected. Modal dialogs (the popups to add a shift, timepair, user etc) and success boxes are displayed in a fixed position so their display is more consistent. Before they would float down the page depending on the amount of rows.

Punch In Punch Out

Photo 2014-03-19, 12 10 16 AMThis week I started building out the punch / timecard module that will let employees and managers track time and attendance in the system. Early on in the project I identified that the punch process should be quick and mobile friendly. Punches should be immediately viewable with hours worked and timeliness data.

The basic punch system is working. Any employee with a role that “canWork” is able to punch in, and record their hours in Decaf. All they need to do is load up the punch page and enter their username and password. It already knows if they are punched in, so it isn’t necessary to specify wether they’re starting or finishing. Employees should punch in and out at the beginning and end of their shift, as well as any unpaid breaks (lunches).

Screen Shot 2014-03-19 at 12.19.15 AM

the payroll page shows employee punch and hours worked information

The more challenging part of the module is on the backend. This is the Payroll page, where managers can view, add and edit their employees’ punches. They can also track total time for the week including regular and overtime hours (soon). 

Continue reading

Prioritizing Feedback

I received so much feedback from the user test that it would be difficult to address everything in the span of a week. Instead I’ve tackled a few of the most pressing issues and best ideas–in addition to building out other parts of the system.

Order employees based on availability: This feature seems pretty fundamental to the system. Available employees should be shown above unavailable ones, so I added some logic that orders  by available / unavailable and then by first name.

I also took this opportunity to limit the height of the drop down so large numbers of employees don’t break the page. It can be refined by typing part of a name or be scrolled. The selection list also appears when the form element is focused making it easier to choose an employee (and less likely that someone would just type a random name).

Screen Shot 2014-03-18 at 11.30.23 PM

More obvious remove button, and refined date display: three of my five test participants had difficulty removing shifts at first. In order to address this I’ve added a remove link that serves the same purpose as the selection (making the interface friendly to both novice and power users). I concede the current implantation is a bit ugly. I plan to take care of that by relocating the remove text or replacing it with a simple icon.

More than one user was annoyed by the parentheses around the day of the month. I didn’t expect this to be an issue! In any case I’ve removed the brackets.

Screen Shot 2014-03-18 at 11.35.39 PM Continue reading

Initial Usability Test Findings

As of today I have had a chance to test Decaf with three users (according to the plan outlined in my previous entry). I expected testers to find some trouble-spots or bugs in the design and workflow, but I didn’t expect them to have so many useful suggestions! I hope to test with at least a few more people and I’m excited start trying some of these out.

User suggested improvements:

  • If availability is same on some days during the week, offer to copy or autocomplete
  • Add shifts like 6 to 2 without other formatting
  • Scheduler: show unavailable employees at bottom of autocomplete list
  • Show employees who haven’t set available in a different colour (like blue)
  • Remove brackets around day of month in week scheduler
  • Make confirmation / success box that can be exited or goes away on its own
  • Make sure remove button has right width when shifts are selected (number cut off)
  • Modal confirmation instead of confirm() popup
  • Add an “X” or “edit” button to top right corner of shifts
  • Swap shifts between employees

Continue reading

OK Let’s Test

Now that a few parts of Decaf are working, it has been suggested that this would be a good time to conduct some usability testing. This will give me an opportunity to course correct any issues with the basic interaction / user journey while the interface and workflows are still fluid.

WHAT is being tested?

The current iteration of the Decaf prototype is being tested. It will be the live version in a standard web browser. I plan to ask participants to perform three tasks during the test.

  1. Add time you can work weekly as if you were starting a new job (begin April 1st).
  2. Determine what your Friday availability is set to this week.
  3. Add two shifts to this week’s schedule (any day and time). Then delete any shift.

I will ask the tasks to be completed one at a time, and respond to participants question only with my own open-ended questions like how would you do that or what do you think about that (see “How do we test?”). My goal is to learn what they think while using the prototype, and uncover components that create confusion, frustration, or delight.

Continue reading

Users and Roles

In order to properly test shift management I had to create and add availability for several users. Since it has be done anyway–I started on the user and role management section of the system. Its  simple right now, but the page lists active system users allows managers to add new employees (and choose their access level).

Screen Shot 2014-03-05 at 12.21.19 AM

Screen Shot 2014-03-05 at 12.29.36 AMDepending on their role employees can view their schedule, manage shifts or adjust system settings. Each user has a role column that is set to an ID in the database where privileges are defined.

Users can also be removed in the system, in case you were wondering. To make sure old shifts continue to display properly (and prevent reuse of usernames), users aren’t actually deleted. Instead they are assigned a role of “removed”. They can’t log in or be scheduled to work, but the system can still look up their name and understand shifts that were assigned to them in the past. This is the same strategy I adopted for deleted shifts (for logging / audit purposes).

Let’s Add Some Shifts

Screen Shot 2014-03-05 at 12.10.13 AM

employee autocomplete

My goal this week was to get the shifts section working. Good news, it is! Based on availability data input by employees–managers can now add shifts to the schedule. Simply input the start and end of the shift and the system suggests which employees are available to work. It also let’s you know why other employees are not available and when they will be.

Last week I discovered some challenges with jQuery autcomplete. I wanted to pass custom form values and classes so the autcomplete would make make sense (descriptive text like ‘already working until 1pm’) and look decent (colour coding available vs unavailable employees, for example). It required some custom code and trial and error, but the system reliably informs which employees are available and why / why not colour coded and all.

IScreen Shot 2014-03-05 at 12.13.52 AM had planned to stick with adding shifts this week, but deleting my test shifts manually was annoying so I built out some simple shift management. One or more shifts can be selected from the schedule (using a tweaked jQuery UI selectable), and deleted using the remove button or delete key on the keyboard. The shift removal is done via AJAX and reflected immediately on screen