As a reminder, we're working on project tracking software that we can build using the FileMaker platform. Our FileMaker Project Management Solution blog post discussed some fundamental functionality many off-the-shelf project management applications offer and their shortcomings for users with unique workflows.
By way of an example, we've established that we are a graphic design firm hired by "Big Dog" dog food company to create a web campaign for our new dog treat, "Big Snack." Our team has assigned the logo creation task for the snack to our lead designer, Roger Smith. Based on this scenario, we've worked through the basic requirements for our project management system and created a simple entity relationship diagram and workflow diagram.
Project Tracking Design
Once we've determined the necessary fields, we might feel tempted to start building the application in FileMaker. FileMaker is an easy-to-use low-code development tool, so it's easy to jump in and start developing. First, however, it's helpful to take some time to consider and map out the design, which we also refer to as the user interface (UI). The UI governs how users interact with the application, so we want to make the process as efficient and productive as possible.
There might be just as many online UI design tools as project management programs. A few of our favorites include Figma, Balsamiq, and Adobe XD. We usually use one of these tools when creating professional-looking sketches that call for digital collaboration. In particular, we like Balsamiq because of its simplicity, and it provides a design mode that makes the sketches look like sketches instead of finished products.
During the preliminary design stage, users and developers must keep an open mind and not immediately commit to a particular solution or idea. We want to keep the process fluid such that changes are easy to make without excessive investment in time or money. We've found that if something looks polished and like it took a lot of time to create, people will be less likely to say it doesn't work. We prefer a framework where ideas can be candidly proposed, visualized, accepted, or dismissed. It turns out that freehand drawing supports these ideals and is readily available to all of us. So we grabbed a couple of small whiteboards for this project and started sketching ideas. Here's our first sketch:
We won't win any awards for our drawing skills or penmanship, but it's clear enough for us to visualize and start thinking about what we need to build. The drawing reflects a precursory project list view and a dashboard. The list view will itemize all the projects that might be filterable by team member. The goal is for users to view their specific projects exclusively. In addition, users can customize the dashboard to display their projects, tasks, and clients. These are good ideas and might need to be part of the final product, but this is just a start. Before building this in FileMaker, we still have to get to the heart of the system, where users will regularly interact with the tool.
Next, we draft a project detail page and a task list view/report. The project detail will provide characteristics about the project at the top, and then a master detail view of the tasks below. We envision a list of the project tasks on the left so that when a user clicks on it, the details for that task appear on the right. Along with the details, there's an area where users can input comments and upload screenshots of the task in progress. It's also a field where the team can discuss the task and share feedback with one other.
When we have a visual, it helps us think through usability and functionality. For example, we like the idea of positioning the comments and the task detail in the middle of the layout, but placing the task list on the left may not be ideal. Users generally want to be able to drill into a task to update its status or make a comment. Therefore the task list will need to show the task assignment, description, and status fields. That's a lot to put into a small list. Plus, as designed, the user would have to select the task first and then edit it on the right, which means multiple clicks.
Now let's review the right-hand side of the layout. We want to present a standalone task list, essentially a standard sub-summary report view. We would use the tasks table to arrange the projects and tasks sorted by status. Users would be able to filter tasks to view only their assigned tasks. Again, we will likely incorporate this functionality, but it still isn't the heart of the system. Of course, we will make it as productive as possible for users who prefer the view, but there's still room to optimize usability.
We like parts of what we created in the detail view, so we'll just make a few adjustments. Flexibility is essential, so we recommend remaining impartial and noncommital during the sketch phase. If we had spent time building the solution in FileMaker, we'd want to keep it. However, since it's just on a whiteboard, we can erase it and start over.
Let's revisit the project detail part. At the top, we have room for information about the project – Project Name, Client, Status, etc. Below, on the left, we can include a navigation bar or a vertical tab. So we can link additional information and functionality to the project. The primary feature will be the tasks menu, but we could include several other tabs, such as Documents, Team, etc. Finally, we'll have an editable and filterable portal in the middle. The portal will display the tasks for the project, color-coded by status and filterable by status and by the person assigned. In addition, users can update the task status and assignment directly in the portal without clicking anything. And, if users want to add comments, subtasks, and/or screenshots, an edit button will open a card window allowing them to do all of those things - essentially, a detailed view of the task itself.
And now we've captured the heart of the project tracking software, so we can turn to FileMaker to start coding the design and functionality. Again, the key takeaways are:
- Don't start developing in FileMaker right away.
- Don't get attached to any idea while brainstorming; use a framework that supports flexibility.
- Do sketch your ideas and use them to discover other ways of optimizing usability and functionality.
Stay tuned for the final part of our FileMaker project management series when we turn all of these ideas into reality in FileMaker.
Discover other ways FileMaker improves productivity and operational efficiency. And find additional custom app development resources, including tips and tricks, demos, and best practices.
This article is also published on FileMakerProGurus.com.