Redesign of the time recording tool “Captre”
Time recording in Captre
Any number of tasks can be created for the various Cap3 projects. When a team member starts working on a task, the timer for that task is started and the running timer from the previous task is stopped. In this way, expenses can be recorded down to the second and you save the hassle of keeping a manual schedule of hours. At the end of the day, the measured times for each task are automatically added up and finally booked after our own review. On the next working day, you can access the tasks that have already been created again and start recording the expenses directly.
Design and user experience
The basic idea of Captre As a central time recording tool, remained Captre- Redesign exist, but in a new design with better usability and extended range of functions.
When comparing the old design (left) of the main screen with the new design (right), it is immediately apparent that the rough structure has remained the same. There is a column that lists the various tasks of the different projects and another column that contains the stopped times. In comparison, however, it is immediately noticeable that the new appearance of Captre provides a better overview in both columns. This impression is reflected on all screens.
The improvement in UX can also be clearly seen at this point. A previously overloaded screen gives way to a structured overlay, which focuses on a task at a time.
Expanded range of functions
Captre has received new functions in addition to a new design. One example is the Fast-Trackarea that should further simplify time recording for the team and enable them to switch between tasks more quickly. With a shortcut, you can open a search field that shows today's tasks without entering a search. If the selection is not sufficient, you can filter the desired task from all tasks and start it directly or even create a new task.
There are also functions desired by the team, such as the subsequent creation of time entries without a cumbersome workaround.
Captre redesign process
The redesign process of Captre began with a bachelor thesis, which analysed existing problems, interviewed team members and carried out initial UX tests based on a new design. These results formed the basis for subsequent technical implementation. During the development phase, feedback was regularly obtained from the team in order to further develop functions in a targeted manner. The close exchange between design, development and the team ensured that Captre was consistently geared to the actual needs of users. Captre is a web app whose frontend is with the JavaScript library React was developed. React is based on a hierarchical structure whose core components are so-called components. Based on the design draft of an application, React components are implemented on the software side.
Behind the scenes
Not only visually but also in the background architecture was Captre Getting on in years. For example, the redesign process was used directly to also update all used libraries or to replace them with other more modern libraries. For example, MUI React components (an extensive library of React UI components that helps developers create user interfaces quickly and efficiently) are now used for calendar selection or page navigation. However, the biggest change in the background architecture was the exchange of the build tool to Vite, which resulted in further modernization steps.
With fresh UI, improved UX, expanded range of functions and technical modernization, Captre Now ready for the future again.
