Overview

Tasks is a mobile productivity application that offers a thematical organisation of tasks and to-do lists through a folder-like structure. It was designed in Figma, developed with React Native, and it uses Firebase as its database. It consists of a main screen displaying folders and two Modal components – the first one is accessed via a plus button on the main screen and gives users the possibility to add a new folder, and the second modal opens upon tapping on each of the folders on the main screen and displays folder-specific tasks.

The application has not been deployed, but its codebase can be found on.

Design

The first step of the application design process were ideation and low-fidelity paper prototyping featuring more ideas and functionalities than the finished application. The low-fidelity prototype laid the foundations for the high-fidelity digital prototype created in Figma.

Low fidelity sketch Low fidelity sketch Low fidelity sketch
The low-fidelity wireframes show my initial ideas and plans of implementing a calendar, pomodoro timer, stats and settings. The final design was eventually simplified.

The Figma prototype consists of 3 pages – mock-up, style guide and the prototype itself made up of click-through screen models. The prototype’s features and components served as the principal style guide during implementation. Apple’s Human Interface Guidelines Large (Default) typography sizing were followed when designing the application’s text. The digital prototype proved itself to be an invaluable visual guide during the development phase.

The design system I created. Figma's component system is very similar to the components that React Native uses and therefore it helped me a lot when translating the design to code.
Above is an interactive high-fidelity prototype of my project. I created the application based on this prototype.

Implementation

Tasks application was developed in Visual Studio Code with React Native and Expo, using Firebase as a real-time database, an iOS device for testing and Git for version control. Due to lack of experience with React Native framework before developing the application and, the code is inspired by articles and tutorials found online.

The application itself is composed of the main page and three custom components – a modal which lets a user add new folders, the folder itself and another modal which is toggled upon tapping on one of the folders. It lists all tasks within a specific folder, and it is the main functionality of the application.

Some of the built-in (Core) Components which were used are View, Text, StyleSheet, TextInput and ScrollView from the Basic Components, FlatList from List Views, and other components like ActivityIndicator, Modal, KeyboardAvoidingView and TouchableOpacity.

The video shows an interaction with the final version of the developed app. The user can create new folders and to-do's and they are stored in a Firebase database.

Evaluation

Compared to the original application concept, the implementation has less functionalities, specifically it lacks calendar, timer, settings and analytics. However, the main functionalities of the application – folders consisting of tasks, creating new empty folders, adding, deleting and marking tasks as complete and colour customisation – have been successfully developed and are fully functional.

The Tasks application could be improved by adding a "delete folder" option which have been initiated, and introducing more basic actions like notifications, Google Calendars synchronisation, filter, sorting and user authentication.

To test the application, two people were asked to use it with a goal to create a shopping list. Both of the users found the application intuitive and easy to use. The first user claimed that she enjoyed the possibility to choose her own colour of the folder and the second user said that he liked how easily he could access the tasks and mark them as done.