The goal of this project was to create a general tracking progressive web app.
Because a general tracking app involves a broad range of user, we decided to identify three general audiences that may benefit most from a new tracking app to narrow the scope of the project. The audiences are:
● People who want to track academic tasks
● People who want to track spending
● People who want to track medicine usage (etc. daily vitamins)
While users may turn to physical or digital calendars or alarm applications for their tracking needs, these alternatives fail to engage and remind users consistently and efficiently because of inconvenient and passive interfaces. Our product, in contrast, will help people who track academic goals, food-related spending, and/or medication usage by interactively motivating them to increase productivity, improve financial management, and maintain healthier lifestyles. To address the forgetfulness typical of users, our application will provide proactive reminders to input desired information and prompts to execute desired goals. Our product will also provide users with the ability to view their progress towards completion of their goals, unlike other applications that track completion alone. Additionally, our application will allow mobile and desktop tracking. However, while out tracking application will effectively mitigate typical nuisances associated with trackers on the market, it does also pose some costs. Users will be required to share sensitive, private medical information; they will be costed time and effort in actively inputting and updating information related to academic goals, food-related budgeting, and medical prescriptions. Yet, the long-tern benefits offered by our application justifies these costs.
Ideation and User Testing
To incorporate all of the needs of out three audiences, the following project themes were integrated into our general tracking app.
- Integrate calendar features into goal tracking
- Allow users to track and mark complete goals
- Visually represent analytics that show progress towards a certain goal
- For food-related spending, visualize current expenditures relative to spending goal through percentages
- Include reminder function that alerts users of approaching deadlines or goals/tasks to be complete, take their medication on time or to prompt users to input daily expenditures
Based on these themes, we came up with an preliminary sketch of the tracking app.
We reviewed the sketches together as a team and decided upon which features were most important to be implemented. After prioritizing features and the the amount of tabs we would have on the navigation bar, we created a paper prototype to start the user testing process.
During user testing, we found that users wanted to set a due date that was more granular. For example, instead of restricting deadlines to the day of the month, we now allow user to input a specific time of the day when the goal/task is due. We also displayed spending goals on our weekly calendar view to provide users with more information about their tasks. One user remarked that it was impossible to go back to the task list if he decided not to add a new task. Another user stated that our profile page may not need to be so complicated. He stated for a tracking app, we may not need to allow users to change profile pictures. Multiple users also suggested more detailed breakdowns. For example, allowing users to view particular details and tasks that make up the visualizations on the analytics page or tasks page would be helpful for them to better understand their goals.
Based on our feedback, we decided to make some changes to our user interface:
- Add a back button so users can navigate back to the tasks page from adding task
- Remove ‘change profile picture’ option and allow users to change only their name or email
- Incorporate a function where details about the task can be displayed on hover on the task page so quick summaries of the tasks are more easily accessible
- Move the notification setting to profile page for better visibility
Wireframes based on feedback.
Final Progressive Web App
We created our progressive web app following the design of the wireframes as closely as possible and implemented all functionality.
Programming Language: Vue.js