About

The problem addressed by this application is related to the difficulty many people face when trying to incorporate new habits into their daily routines. 

Motivations

The Product Owner, Nicolas Reichert, is an expert front-end Engineer and sees opportunities in the market, to develop a system that can be used for personal use, and expand how to share routines and habits with friends or clients.  

Research and Discovery

Methods used 

Identify main features of the app

In conversations and interviews with the client, based on their expectations for using the application, we defined a set of functionalities to design. Thus, we established the following scope of work:

• Task creation with easy recurrence selection.
• Create calendars (calendars are a grouping concept for tasks).
• Filter calendars (list of calendars, similar to Google Calendar).
• Share tasks.
• Task details.
• Ability to add comments (journaling).
• Share calendars.

Search references from other published applications.

Analyzing similar apps in the market helps understand user expectations and existing design conventions. This is crucial for creating an experience that users are already familiar with.

Observing various apps helps identify emerging trends in user interface design. This is especially important to keep the design updated and aligned with user preferences.

By observing how other apps have tackled similar challenges, you can validate or adjust your own design decisions. This contributes to a more informed and grounded process.

Define a concept map of the app.

Basically here we create a simple map, that represents how the modules are connected, and how the user can navigate through the features. This gives support to build a resilient navigation for the product and create better user journeys. 

This map doesn't have to be necessarily created in the beginning of the project, but can be an asset used to meetings with clients and developers to understand the whole thing.

Design System

Methods used 

Architecture and organization

I initiated the Design System project by defining an architecture and organizing a package of variables. This project was intended for a single brand and included two light modes: Light and Dark.

I used Figma to create all the variables, which were later translated into a CSS file responsible for providing global colors, text sizes, and other styles. This allowed for global changes during the design process, enabling us to make visual design alterations without compromising the structure of pages or components.

User Interface

Methods used 

Craft and Design

The interface design process was carried out as we evolved our discussions about the project scope. Initially, I focused on desktop interfaces, creating the platform's macro interactions. In the video, I showcase an example of the login, designed using Figma. We chose to provide access through a Google account and via email, using a PIN Code sent to the user.

Our goal was to streamline the entry for initial users, eliminating the hassle of remembering passwords. In addition, we aimed to provide a widely used login method through Google.

Additionally, we prototyped other features such as creating a new task, adding comments, sharing tasks, and viewing the tasks themselves. In an overall workflow, my role, in addition to visually crafting the experience, involved defining alert systems, modals, buttons, and forms in a way that we could reuse the modules later. I documented the assets in Figma, enabling us to have an extensive library of UI components and modules.

Responsive design

Moreover, it was necessary to create breakpoints for the layout and implement responsive interactions. In this project, we employed the concept of fluid components, which easily allowed us to adapt our material for different devices.

Light and Dark mode

In this project, by implementing a system of variables, it was possible to switch between color modes for a lighter and darker visual appearance. In the video, there's an example applied to the task interface.