Babysteps: the application development process, beginning to end

Parenting is a chaotic time for all caregivers, but it's especially hard for first-time parents. To ease some of the cognitive load of caring for an infant, the mobile app BabySteps was created to keep parents organized and aware of their child's needs. BabySteps provides a simple and centralized way to track information such as health metrics, notes, and milestones, as well as offering organizational aid through calendar and task-list features, and easy communication capabilities through a social media page. In this thesis we follow the evolution of BabySteps, from its conception to the presented product. After an overview of the app we begin by exploring the design phase, including the UI design and the planning of the features through the examination of use cases. We discuss the design choices made and how they line up with UX best practices. In the next chapter we investigate the implementation of the application, answering questions such as what software development methodologies were employed? How was user feedback taken into consideration? Finally, we end with a reflection on the overall successes and failures of the project, and ways that the application could be expanded in the future.

BABYSTEPS: THE APPLICATION DEVELOPMENT PROCESS, BEGINNING TO END by Alexis Stucki A Senior Honors Thesis Submitted to the Faculty of The University of Utah In Partial Fulfillment of the Requirements for the Honors Degree in Bachelor of Science In Computer Science Approved: ___ _______________ Aaron Wood, PhD Thesis Faculty Supervisor _____ Mary Hall, PhD Director, School of Computing _ Thomas Henderson, PhD Honors Faculty Advisor _____________________________ Monisha Pasupathi, PhD Dean, Honors College May 2024 Copyright © 2024 All Rights Reserved ABSTRACT Parenting is a chaotic time for all caregivers, but it’s especially hard for first-time parents. To ease some of the cognitive load of caring for an infant, the mobile app BabySteps was created to keep parents organized and aware of their child’s needs. BabySteps provides a simple and centralized way to track information such as health metrics, notes, and milestones, as well as offering organizational aid through calendar and task-list features, and easy communication capabilities through a social media page. In this thesis we follow the evolution of BabySteps, from its conception to the presented product. After an overview of the app we begin by exploring the design phase, including the UI design and the planning of the features through the examination of use cases. We discuss the design choices made and how they line up with UX best practices. In the next chapter we investigate the implementation of the application, answering questions such as what software development methodologies were employed? How was user feedback taken into consideration? Finally, we end with a reflection on the overall successes and failures of the project, and ways that the application could be expanded in the future. ii TABLE OF CONTENTS ABSTRACT ii INTRODUCTION 1 MOTIVATION 1 APP OVERVIEW 1 PRODUCT DESIGN 7 USE CASES 7 WIREFRAMING 8 UX BEST PRACTICES 10 PRODUCT DEVELOPMENT 11 METHODOLOGY 11 SOFTWARE DEVELOPMENT BEST PRACTICES 12 USER FEEDBACK 13 REFLECTION 15 REFERENCES 18 APPENDICES 19 A DESIGN DOCUMENT LINK 19 iii 1 INTRODUCTION MOTIVATION Raising a newborn is a daunting task, especially so for those who have never done it before. During the first year, caregivers not only have to keep a near-constant eye on the entirely dependent infant, but they must also track various health metrics for the child, keep up with the many necessary doctor’s appointments, be aware of whether the baby is progressing as expected, and keep friends and family updated. All the while, they must continue to maintain many of their regular responsibilities such as working a job, taking care of a house, and managing their own physical and mental health. To make this even more difficult, it all has to be done on a suboptimal amount of sleep, as “Parents of newborns often lose about one to two hours of sleep per night until their baby is five months old,” adding up to about 400 hours of lost sleep in the first year (“True or False,” 2014). During the chaos and confusion, it’s easy for pieces to slip through the cracks. This why BabySteps was created—to help caregivers stay organized, connected, and upto-date during their newborn’s first year of life. APP OVERVIEW The BabySteps app tackles the turmoil of this time through four main pages: tracking, calendar, notes, and social. The tracking page is the main focus of the app and contains the most functionality, as it will likely be the page most used by caregivers. During just the first year with a newborn, the baby will need to see the doctor seven times 2 (“A Guide,” n.d.). During these visits, the doctor will ask questions about things like baby’s growth, feeding and sleep habits, and dirty diaper frequency. The purpose of the tracking page is to help caregivers stay on top of tracking these various metrics. The page first presents all of the available metrics to track, including tabs for feeding, sleep, diaper changes, weight, temperature, and medical tracking. Each tab leads the user to a page where the given metric can be tracked though a combination of stopwatches and/or data entry forms. Each page also displays a snapshot of data about the last tracking entry, and a more comprehensive view of the historical data. The tracking landing page is pictured below, along with an example of a specific metric page. 3 The calendar page focuses on the goal of keeping caregivers organized. It provides a calendar with multiple view options (weekly, biweekly, and monthly), then all other information on the page will correspond to the currently selected date. Beneath the calendar are sections for the user to keep track of events happening on the given day, as well as a “tasks” tab, where caregivers can create a to-do list of tasks for the day and check them off as they go. Tasks also come equipped with the ability to attach a reminder to them that will alert the user at the specified time. Last on the calendar page is a “milestones” tab. This provides a list of CDC-recommended milestones that the caretaker should expect to see during the selected timeframe (for example, baby should be starting to smile socially, beginning to support their own head, etc.). It also allows caregivers to add any of their own milestones that they want to track. The calendar page is shown below with the expanded view of some of its tabs. 4 The notes page provides a simple interface for caregivers to jot down information in note documents, mimicking the common notes app seen on most phones. The reason for its inclusion is in the interest of consolidating all newborn-related information into one place, simplifying the lives of the caregivers by keeping everything in one centralized app instead of spread across several locations. The notes page and an example of a note are shown below. Lastly we have the social page. First-time caregivers tend to take a lot of pictures of their adorable new baby, and there are many people in the family’s social circle that want to see the pictures and stay in the loop on the baby’s progress. However, the internet can be a dangerous place, and not all caregivers feel comfortable posting pictures of their 5 newborn on a large public domain. BabySteps solves this issue with its social page, providing a more private location for caregivers to share photos and updates. Additionally, once the child has grown past the point where they need to be tracked so meticulously, the social page allows the user to save all posts to a pdf so that they can safely delete the app without losing all of their collected memories. The social page is pictured below. As an additional feature, BabySteps supports multiple caregivers helping to raise one child, and as well as having multiple children under one caretaker. The primary caregiver has the ability to add additional children to the account, and/or additional caregivers such as another parent or a nanny, who can then access and edit all of the same 6 information on the four pages in real-time. The primary caretaker can also add “socialonly” users for the friends and family they want to keep in the loop, who are then given read-only access to just the social page. All together, the app provides a one-stop-shop for all of the information a caretaker needs to keep track of, and gives the primary caretaker total control over their baby’s data and who can access it. 7 PRODUCT DESIGN The design phase for the BabySteps application was extensive, taking up the better part of the fall capstone course. It was kickstarted by initial informal concept pitches to fellow classmates, followed by a formal idea proposal made to the course staff. The goal was not only to refine our elevator pitch for the app, but also to determine whether the scope and complexity of the idea was appropriate for a senior capstone project. Upon receiving positive feedback on these points, the bulk of the design phase then focused on two main components: detailing use cases and planning the visual structure of the app. USE CASES From the very beginning, the design of the app was heavily driven by a useroriented perspective. We wanted to create an app that would follow the best interests of our intended users (caregivers of all kinds, and their friends and family), not just the personal interests of our team as developers. In order to properly motivate our feature list and app design, we began by detailing a comprehensive list of use cases. These were written in the form “As a ____, I want to ____, so that ____.” For example, one of our use cases was: “As a caregiver to a newborn, I want to see the baby’s weight over time so that I can monitor their growth and have the data available during appointments.” We created use cases for each of our four intended main pages (tracking, calendar, notes, and 8 social) as well as the profile page, ending with 36 in total. All uses cases can be viewed in Appendix B of the Design Document (Appendix A). Beginning with the use cases was incredibly helpful in planning of the functionality of our app. Each use case provided information on what feature would be beneficial to our users, the purpose behind it, and which specific user it would impact. It was then fairly straightforward to translate these use cases into a list of features for the app. For example, consider the use case mentioned above where the user wants to see their baby’s weight over time. To fulfill this need, we added the feature “Tracked data is stored in the database and can be queried in development graphs” to our list. After building what we felt was a suitably comprehensive list, we then organized our features into 3 phases: base, planned, and advanced. Base features were those necessary for the most basic version of the app to run. Planned features filled out the rest of the core functionalities that could be reasonably expected to be included. Advanced features were more tentative ideas that added interesting functionality but weren’t strictly necessary to meet the main goals of the app. The full feature list can be viewed in the “System Features” section of the Design Document (Appendix A). WIREFRAMING After creating a solid feature list, we moved on to the visual aspect: designing the UI. We already knew our four basic pages, and we now had a set of use cases/features for each one. The task was then to translate these features into UI components. We first worked as a team to whiteboard out some basic layouts, making sure everyone was on the 10 UX BEST PRACTICES We employed multiple UX best practices while designing these UI wireframes. One such practice is to “put yourself in the users’ shoes” (“Best Practices,” n.d.). We did this before even beginning the wireframes by creating our list of user stories. This forced us to consider the app from the user’s point of view, thinking about exactly what they would want and why they would want it. We continued to do this throughout the wireframing process as we built connections between the components and simulated user interactions. Another good UX practice that we followed is to keep the app visually and functionally consistent (“Best Practices,” n.d.). We maintained a cohesive look and feel for our app by pre-establishing a theme and by storing all works-in-progress on the same Figma board to ensure that we were matching each other on every page. One more UX best practice we employed is to “use clear navigation tools” (“Best Practices,” n.d.). As shown in the wireframe flow above, we maintained an app bar at the bottom of every frame displaying the four main pages and which one the user was currently on. We also created a back arrow at the top left to allow users to move back to a previous page, along with additional location labelling at the top. 11 PRODUCT DEVELOPMENT Once the feature list and UI layout were set, the project moved into the development phase. This began in the last third of the fall semester, and continued through the spring semester of the capstone series. The work was done in phases, including prototype, alpha, beta, and final releases. These phases lined up with the different levels of feature list developed previously, with prototype and alpha both covering the base level features. METHODOLOGY While developing the application, our team followed the Agile development methodology. We worked in week-long sprints, meeting on Monday mornings to discuss the previous week’s accomplishments and plan out the tasks that each member would focus on during the upcoming week. We also met every Friday morning, checking everyone’s progress so far and helping each other with any current roadblocks. Partway through the spring semester we also began doing a daily check-in every morning using Discord’s DailyBot. This strengthened our communication levels and made us more aware of what others were doing on a day-to-day basis, which in turn made it easier to coordinate and collaborate with each other. We also practiced agile methodologies by being flexible and adaptable. If we received feedback that suggested a change in our plan or in our code, we accepted it and were quick to make the adjustment. 12 SOFTWARE DEVELOPMENT BEST PRACTICES We employed the software practices of task management, bug tracking, and version control by using GitLab. Through GitLab we maintained a backlog of issues organized on issue boards. Every new task would receive an issue tagged with relevant identifiers (such as “alpha phase,” “front-end,” “bug,” etc.). That task would begin in the “open” or “to do” board, move to “in progress” when a team member started actively working on it, then enter “code review” before ending in the “closed” board. In order to move into the closed board, we implemented a code review system where all new code must go into a merge request, where it would be reviewed by a minimum of one other team member before being allowed to push to main. This helped us to keep buggy code from entering the main application, and also exposed more team members to the work being done by others, all of which also follows software development best practices. Two software practices that we didn’t exercise quite as well were concerning documentation and testing. While the application as a whole was documented well through our design document, the documentation in the code itself could have been improved. The code would have benefitted from a more formal and unified style of code commenting, especially at the beginning of files and classes. As for testing, the vast majority of our testing was done manually. To better follow best development practices, we should have created a suite of automated tests, and run those tests consistently throughout development and before every merge request. 13 USER FEEDBACK An important part of the development process was collecting and incorporating feedback from users. The intended users for our app span far more than just parents; we also developed the app for use by secondary caregivers such as nannies, grandparents, or babysitters, as well as friends and family that want to be involved in the baby’s first year of life. Thus we wanted to collect feedback from a diverse range of users to reflect this broad base. Many of the users we interviewed were mothers (both first-time and otherwise), but we also included fathers, couples who were expecting, previous nannies, software developers, and QA testers. Through this group of users we exposed the app to people with a variety of backgrounds and perspectives, and collected feedback on everything from useful/not-so-useful features to buggy edge cases in the app. While we were not able to incorporate every piece of individual feedback, we did fix all of the bugs that were pointed out to us, and adjusted our app to reflect some of the common feedback areas between the users. For example, we had been considering the idea of adding a home page for the app to land on, but users agreed that this page was unnecessary and only added more clicks to reach the useful functionalities. Thus, we removed that tentative home page and relocated its few features onto other pages. Users also informed us that they did not find the calendar page very useful, and would likely continue to use their regular calendar apps. In response to this, we added additional functionality to the calendar page to differentiate it from a regular calendar, such as the milestone tab which provided the caretaker with information on the CDC-recommended milestones that their newborn should be reaching at that period in time. One more piece 14 of common feedback was that users wanted the ability to manually add tracking entries on all pages, as opposed to being forced to use the timers on some of the pages. We incorporated this suggestion and gave every tracking metric the option to record a data entry through a form. 15 REFLECTION By the end of the capstone series, BabySteps became a polished mobile application with a clean, professional-looking UI, and a large set of fully-functional features spread across four main pages. As of Spring 2024 the app is up and running on TestFlight and the Google Play Store, and has received positive remarks from test users, classmates, and course staff. Although we consider the app to be a success overall, there were a few features in the original plan that did not make it into the end product. One such feature was to have detailed account permissions controlled by the primary user. While we were able to include the social-only user with read-only access to the social page, we had originally planned to provide a wider variety of possible user permissions. For example, perhaps a family employs a nanny to watch their baby during the day, and they would like the nanny to be able to enter tracking information, but they do not want the nanny to view or edit their notes. We wanted to provide a solution to this scenario by allowing the primary caretaker to customize specific read and write permissions for different users. This extra level of customization was not implemented in the final app simply because modifying user view and edit capabilities proved to be more difficult than anticipated, and with our limited amount of time we chose to prioritize adding other features for the primary caregiver. Another element of originally-planned customization was the ability for the caregiver to pick and choose which tracking metrics were important to them, then only 16 the components for the chosen metrics would appear on their tracking page. This would optimize the usefulness of the app for each individual caretaker by removing anything they would perceive as unnecessary “clutter.” However, like the customizable user permissions, this would have become more time-consuming and difficult than originally accounted for. Once again, we chose to prioritize adding a greater amount of functionality for caregivers instead of implementing this feature. One last missing component is higher-level security features. We do have basic account security incorporated, however, all data is stored unencrypted in our database. If the app was to be fully released, we would need to take further steps to protect the users’ data, as potentially sensitive health information is being tracked and saved. We would also take greater care to prevent against malicious users by actively preventing things like injection attacks, which we currently have no protection against. If we were to continue work on the app, we would certainly dive into implementing these missing functionalities. Additionally, we could expand the app in another direction by putting more focus on the mother instead of solely on the baby. For example, we could add tracking for the mother’s health and habits, especially during pregnancy. Since we currently anticipate the app being used for just the first year of a baby’s life, including the time during pregnancy would almost double the use time for the app. We could also expand the social side of the app to include a public discussion forum component, where the new caregivers could ask questions and receive help from those with more experience and knowledge. This would help them to further grow their 17 network, building useful connections beyond the immediate circle that the current social page caters to. Though there are certainly areas where the BabySteps app could be improved and expanded upon, overall our team created an impressive application that accomplishes the primary tasks that we set out to achieve. Through its wide variety of features, BabySteps provides a one-stop-shop solution to the hectic and disorganized time of early parenthood by keeping caregivers up-to-date on their baby’s development through metric tracking and milestone information, organizing their time with a calendar and to-do list, consolidating all necessary information into one place, and keeping their friends and family updated in a private and controlled manner. 18 REFERENCES A guide to your baby's first year of doctor visits. (n.d.). Children’s Hospital Colorado. https://www.childrenscolorado.org/conditions-and-advice/parenting/parentingarticles/baby-first-year/ True or false: If you have a newborn, you’ll lose about 400 hours of sleep this year. (2014, May 13). Montreal Children’s Hospital. https://www.thechildren.com/ health-info/conditions-and-illnesses/true-or-false-if-you-have-newborn-youlllose-about-400-hours Best practices for rocking UX design. (n.d.). Lucidspark. https://lucidspark.com/blog/ ux-design-best-practices 19 APPENDICES APPENDIX A: DESIGN DOCUMENT LINK https://capstone-cs.eng.utah.edu/groups/babysteps/-/wikis/uploads/ b62520106b2aa0f883f367a27d4c9186/BabySteps_CS_4000_final_design_document.pdf 20 Name of Candidate: Alexis Stucki Date of Submission: April 22, 2024