top of page


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:

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:


          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



          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

图片 1.png

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


The image displays the code for setting screen initializing


The image displays the code for rename and change profile image functions


The image displays the code for whether the sound and vibrate are mute or on


The image displays the code for changing the background color

bottom of page