HomeBlogTools app
Tools app
#Culture #Engineering
Niels Rijnberg - DeveloperNiels Rijnberg
August 2, 2021

Tools app

During the past half-year, Niels and Marc interned at Dutch Coding Company. The assignment: make an app for Tools (our in-house developed project management application) with the core feature of logging time on projects for clients or internally. They both graduated. Below they’ll tell you something about the results they got during the internship.

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.

Requirements analysis

To make sure the app meets the needs of the users, we did a preliminary investigation. We started with user interviews. During the desk interviews with the end-users (in this case: colleagues), we asked what kind of tasks the user now performed in the web version of Tools, what tasks often recurred and how we could improve on the ease and speed with which these tasks could be performed. Based on these interviews we’ve created a list of different requirements for the app.

We grouped the most important functionalities and ordered them by means of the MoSCoW-method. This way, all items got a certain urgency assigned to them and were subsequently divided into sprints and issues in GitLab.

Wireframes Tools app

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.

Design system Tools 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.

Designs DCC Tools 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.

All and all it was a rather instructive graduation internship. We’ve learned a new programming language in a short time, and built a great end product that will be used in the company to report time to clients. The team helped us out on a great many occasions. We also learned a lot from the feedback we received in the various phases of the project (analysis, design, implementation) and thereby developed ourselves professionally.

Niels & Marc

You might find this interesting:

Don't let a missing strategy ruin your project. Prevent expensive software never to gain adoption and check if your idea is ready for development. With our Digital Readiness Scan you'll know your next step on the road to succes within 5 questions.

Do the scan