Tools app

When team members of Dutch Coding Company work on a project, either for a client or internally, it is important to track how much time is spent on the project and what has been realized in that time. This is used both to report to our clients, but also to for example learn how to work more efficiently.

Logging the timesheets is done in Tools, an application that Dutch Coding Company developed themselves. This is a (tedious) task that can take quite some time (or that’s how it feels sometimes). Particularly if you don’t write up your timesheets daily, because it can prove difficult to remember what you’ve worked on in the past week. This also creates the risk of errors in the reporting. A solution to this could be an app that helps in writing timesheets efficiently and accurately, without having to fill out the same form over and over again. This seemed a perfect opportunity for an internship assignment that we, Niels Rijnberg en Marc Verwijmeren, worked on together for our graduation project.

Designing the app

The next step was to create a basic design. We chose to align the design of the app with the web version. Even though there were no big requirements for the design, usability was obviously key.

After the most important features were ordered, we therefore started with creating a rough sketch of the various screens that were to be included in the app, which is called wireframing. This is merely mapping and placing the functionalities on the screens, such as buttons, lists, and navigation. In this phase, no styling, fonts, etc are taken into account. That you keep focusing on the usability of the design.

Of course, the app should look good as well. Therefore, we had to design a general style for the app. We worked with a Design System: one overview that defines all visual components. This includes colors and fonts, but also entire components that will be used in the app, such as the lists and buttons. What components should at least be designed, became apparent when creating the wireframes. The use of a design system is important for visual consistency in the app.

The last step was to create the full design. The screens from the wireframes were combined with the design system into one, pretty whole. This way, you could see exactly what the app would look like, even before we started programming.

Developing the app

The app has been developed with Flutter because we then only had to develop one app for both Android and iOS. Despite we didn’t have much experience with Flutter, we managed to finish the project within the internship timeframe. All designed screens and their functionalities have been implemented in the app.

The most important functionality in the app is the huge blue button; that button also pops right out when you open the app. When you tap the button, a timer is started for a project of your choice. In the background, the hours are recorded for that user. The user can pause the timer, which saves it in a list of active timers. You then have two options: continuing recording time on the timesheet, or stopping and saving that timesheet. This makes it easy to record the time while working and makes logging your time much quicker.

Besides that, we’ve implemented another time saver. By measuring the user’s behavior, the app can suggest useful shortcuts, using a simple, but effective, algorithm.

These suggested shortcuts can be found on the home screen, right below the blue button. Shortcuts vary from viewing timesheets, clients, projects, and colleagues to creating a prefilled timesheet. The shortcuts are updated automatically in real-time and change based on the time of the day. All collected data and the algorithm work on the device; no data at all is sent to the server, warranting the privacy of the user.