An app to update status and view progress on initiatives for a marketing project.
Function: Planning & Project Management
The Project Plan app is designed for teams to keep track of projects, with the ability to assign tasks, track progress, and sort projects by custom groupings. Multiple view options allow for simple sorting of data. Color coding and status indicators help stakeholders stay updated with project progress.
Also see: tablet mode & fullscreen mode
This is a high-level model of both the data entities and the UI elements in the app.
This is a preview of the data sets used in the app.
How we built this app
We built this app with a set of descriptive columns that provide important information about the specifications of each task, including the Owner, Status, Progress, and more. Special column types allow users to view each task and immediately discern what has been completed vs. what’s left to complete. 1. First we created a set of tasks in the spreadsheet as indicated by the first column in the “All” view in the app. 2. We then added a Color Code field which allows for Red, Yellow, Green, and Blue to indicate how far the task is from complete. You’ll notice when you click to edit the field in the Editor there is a formula on the backend spreadsheet. More on that in the next step. 3. The Color Code field corresponds directly to the Status field we created because of the formula in the spreadsheet. We created a set of progress markers as a dropdown menu (or Enum Field Type) for the Status field including Not Started, In Progress, Delayed, and Complete. The formula in the spreadsheet now causes the project's color code to change according to the status when the status is indicated in the app. 4. We created dropdown menus using the Enum Field Type for "Owner" and "Assigned To" as well. This way, users do not have to manually type in employees’ names. 5. We started with one view of all projects in the “All” view, and then added two more views-- one grouped by "Status" and one grouped by "Owner". The grouping choices were specified in the UX tab.