...
SMak is meant to be used on the go, when the user is traveling. The UI is currently a web browser application which has been ported to an iPad for portability reasons.
Design evolution
Our original storyboard design (GR2) was a mobile app consisting of a series of forms that allowed users to specify “constraints” such as location, duration and ordering of events.
During our paper prototype (GR3), we quickly learned that the constraints list was very confusing and the navigating through the forms was too complicated. In addition, users wanted to interact with the schedule once it was created.
For our computer prototype (GR4), we decided to abandon the mobile platform due to problems with drag and drop, and instead created a web app that shows all the different views from the mobile app on one screen. In addition, we decided to display and edit all constraints visually, such as allowing users to resize activities to change its duration or dragging activities around in the schedule to rearrange them. We used an edit distance algorithm to move conflicting activities around if the user drops an activity into an occupied time lot. This allowed users to rearrange their day without manually shifting each activity.
For our final implementation (GR5), we realized we needed to make the web app work on an ipad to make it portable for traveler, so we figured out how to make drag and drop work on the ipad browser. This new form factor meant the resize handles were very difficult to grab (since our fingers are a lot fatter than the mouse), so we created much larger round handles outside of the activity box to allow users to easily resize the activity. We also added many features suggested in the heuristic evaluations including an auto-completing form to allow users to either pick from a list of activities or create their own activities, undo, locking activities in the schedule, optimized auto-scheduling using travelling salesman, earliest start time and latest end time, and draggable map pinsTODO: what we learned from the first three checkpoints.
Implementation
View
The interface was implemented using Jquery UI which included libraries to create draggable and resizable boxes, as well as the autocomplete input box in the form.
...