Design
Left Sidebar
Scheduler
Task List
Implementation
dBabies, in good web programming practice, is implemented using html for content, css for presentation, and javascript for behavior, however in minor instances, these boundaries were blurred for convenience.
At the frontend, we used the jQuery javascript library extensively for selecting manipulating, and adding click events to html elements. Additionally, we used the Bootstrap framework for many of our base components and for the responsive design of the page. The sortable interaction of jQueryUI was also used within the Shopping List section of our page to allow the sorting of individual items. In the left Sidebar, bootstrap date picker, bootstrap time picker, and jQuery-fileupload were used for the purposes that their respective names imply. The scheduler in dBabies is library from dhtmlx with customizations set via the API to fit along with our overall theme and certain affordances e.g. the highlighting of the current day and time within the calendar.
In the backend, we are using node.js to run our server and handle user picture uploads. Additionally, we are using a short php script to handle saving of scheduler events across user sessions. Lastly, our code is being hosted on Heroku.
Evaluation
Briefing
When a child is born, parents have to adjust to a new sleep schedule, keep track of the newborn’s needs, and manage vital supplies. Management of these things is not intuitive and often results in one of the areas being neglected. Our website "dBabies" is designed to help parents of newborns record important events for the baby and have a running list of baby supplies that need to be purchased. In this user test, you are a stay at home spouse for your baby Marvin where you will be walked through a few typical events in the life of a newborn's parents.
Scenario Tasks
1) After a long day of playing, Marvin and you are very tired and both take a nap. After an hour of sleep, you wake up but Marvin is still fast asleep. You log onto dBabies to log Marvin's nap.
Task: Add a "Nap Time" for Marvin which started 1 hour ago.
2) As Marvin sleeps, you realize that you want to start tracking whenever Marvin is bathed. Since bathing is a pretty common task, you want to be able to quickly and easily add it to the calendar.
Task: Add a new quick press button to the side panel for Marvin when he is bathed
3) Marvin is finally awake from his nap and is quite hungry. You grab a bottle of milk from the fridge, and, after warming it up, start to feed Marvin. With Marvin in one arm, you log onto dBabies yet again to mark his feeding.
Task: Mark a "Feeding Time" for the current time.
4) As you feed Marvin, you notice he is staring to run a fever. You're worried that he is starting to get sick, so you set up a doctor's appointment for tomorrow afternoon at 1:00 PM.
Task: Add a new event, doctor's appointment, to the calendar for tomorrow at 1:00 PM.
5) Marvin is very uncomfortable about being so warm from his fever and is starting to cry. You decide that you should get him some baby Advil. Luckily, your spouse is almost out of work and he/she always checks dBabies to see if anything needs to be picked up for Marvin as the make their way back home.
Task: Update the Shopping List with baby Advil
6) As you try to soothe Marvin by picking rocking him back and forth, you notice that his diaper is wet. You go to change Marvin and realize that you are down to your last 5 diapers. After changing him , you get on dBabies and log the diaper change and note that the diapers are low.
Task: Log that Marvin has been changed and update the Shopping List to buy more diapers.
User Testing
Users were selected based on whether they had been or were currently any form of a caretaker for an infant. We
User 1
User 2
User 3
Reflection
Over the course of the iterative design process we learned several things of what goes into a solid website design. What we found to be the most important is taking note of feedback and incorporating those comments into our design as much as possible.
Lessons Learned:
If we had the opportunity to redo the project all over again, we would spend more time about thinking how the UI would connect with the backend. We hoped to have a more complete website in terms of how it interacts with the backend but that is not the case. While the focus of the project was on providing users with a learnable and efficient interface, if we would have thought about how we would want to integrate the backend, we would have had a better transition in terms of working with node.js.
Additionally, we believe less time could have been spent on picking the correct fonts and colors. While coloring and font are important for the user experience, we could have set a strict amount of time for deciding which font and color scheme to use. This would have allowed for more time on less trivial components of the website.