Plannerly
CCT361 Speculative Design Thinking II Course Group (4 members) Project
A mobile app that demonstrates the persuasive capabilities of mobile computing allows students to better manage their time with a to-do list, timer, and achievement functions.
App link: https://gallery.appinventor.mit.edu/?galleryid=5ef42694-512c-4fff-93b7-debec357e060
Persuasive Mobile App
2021 Winter CCT361 Speculative Design II Course Group Project
A mobile app that demonstrates the persuasive capabilities of mobile computing allows students to better manage their time with a to-do list, timer, achievement functions.
​
App link: https://gallery.appinventor.mit.edu/?galleryid=5ef42694-512c-4fff-93b7-debec357e060
Summary
Plannerly is a planner app designed to help students organize their schedules. One of the app’s features is that it allows users to record events with the To-Do list. The To-Do list documents the user’s tasks and enables students to categorize them by class, subject and prioritize them based on their weight. This function helps students stay on top of their work and helps them prioritize their assignments. Moreover, Plannerly also comes with a timer function that allows users to set a timer for study sessions and breaks. This helps students take the appropriate study breaks necessary to reduce stress and improve study performance. When designing the application, we wanted to create an app that was functional, user-friendly and would be able to meet students’ needs. Additionally, we wanted to include several persuasive design principles to give our app persuasive capabilities. These include the principle of reminders in the form of notifications, the principle of liking by allowing the user to customize the app through the settings page, and the principle of rewards by presenting them with stickers when they complete achievements while using the app.
Design Process
Personas


Our final app took a significant turn compared to our original app proposal. First, we expanded our sitemap from the original in the design report (Figure 1). In the design report, we only included primary navigations, while our new site map (Figure 2) has updated sub-sections and indicates all the screens we need for our app.

Figure 1. Sitemap from design report

Figure 2. New sitemap
Wireframes version 1


Figure 3. Homepage version 1

Figure 4. Final homepage
Additionally, we improved our homepage’s design. In our design report, the homepage displays a list of upcoming tasks without a specific order (Figure 3). However, while we were developing our app, we realized it overlaps with our to-do list page and may confuse our users. Therefore, we changed our home page to an image of Plannerly’s logo and four buttons that allow users to navigate to their desired page (Figure 4).
One idea we initially proposed was including a categorizable to-do list and a calendar that will display students’ tasks by “Day view,” “Week view,” and “Month view”, shown in figure 5. Based on the feedback from our proposal, we revised our idea and decided to omit the calendar because it could result in redundancies. In our design report, we stated that we would be focusing our application on creating a to-do list with a filter function that will sort tasks based on user inputs, such as whether it is school-related or not. If it is, it can be sorted by weight, deadline and course code. If not, the tasks can be sorted by the deadline. Moreover, we improve the interface of the to-do list from the design report. In the design report, the “add new task” function is indicated by a “plus sign” button next to the title, and the filter function is displayed as a dropdown menu as shown in figure 6. We improved this page by providing buttons with text instead of symbols, and added “delete task” and “complete task” buttons for users to better manage their tasks as displayed in figure 7. We improved the filters by using a spinner in the app inventor that pops up on screen and allows users to make a selection. After users choose whether it is school-related, indicated in figure 8, another spinner will be visible to let users choose a more specific option like weight and deadline. These clearly labelled filter options, shown in figures 9 and 10, will improve the users’ experiences with our app.

Figure 5. Calendar from proposal

Figure 8. Sort by school-related

Figure 6. Filter from design report

Figure 7. Final to-do list page


Figure 9. Options under not related
Figure 10. Options under related
Compared to the timer page in the design report shown in figure 11, our final timer page has more buttons: “Start,” “continue,” “reset,” and “pause,” as demonstrated in figure 12, which will provide a more flexible way for users to manage their time. We also included the notification function from our design report, as can be seen in figure 13.
Our proposal stated that we planned to make the sticker rewards on the achievements page based on users’ preference for TV shows that they would input upon joining the app (Figure 14). Due to the number of popular TV shows, we decided to narrow the scope of these rewards. Instead, Plannerly offers some preset stickers based on famous TV series rather than letting users select one. This allowed us to use TinyDB to store data on users’ achievements. Furthermore, the final achievements page now indicates unlocking requirements underneath each sticker, encouraging users to continue working towards unlocking all the stickers (Figure 15&16).



Figure 11. Timer from design report
Figure 12. Final Timer page
Figure 13. Notification Function

Figure 14. Achievements from design report


Figure 15&16. Final achievements page
In keeping with our design report, Plannerly includes a settings page, shown in figures 17 and 18, that allows users to set a profile image and user name as displayed in figures 21 and 22, customize the background colour and adjust the sound and vibration settings. Initially, our design report showed individual options for the sound and vibrate settings; however, the final app, shown in figure 19 combines the two, enabling us to provide a toggle button instead of separate checkboxes, demonstrated in figure 20. Furthermore, for the change background colour function, instead of using a notification style pop-up, a colour table appears next to the button when users click it allowing them to select a colour as can be seen in figure 20.


Figure 17&18. Setting from design report

Figure 19. Final Setting page



Figure 20. Toggle button & Color table
Figure 21&22. Change profile image and user name functions
Code (my part)
Home page code

The image display the code for homepage screen initializing
Timer page code

The image displays the code for timer’s countdown number

The image displays the code for timer screen initialization and pause, continue and reset buttons

The image displays the code for the timer function with notification and whether to have sound and vibrate or not
Setting page code