Tidli
Role
Lead Product Designer
Date
Sep 20, 2024
The main problem
In many messaging or project management apps, users have to switch between different platforms to communicate, organize tasks, or manage events. This leads to wasted time, disorganization, and frustration. Tidli solves this problem by unifying all essential functions into one app, offering a streamlined and efficient experience.
What is Tidli?
Tidli is a collaborative app that combines instant messaging with task and event organization in one place. Designed for busy users who need a simple yet powerful solution, Tidli helps maintain smooth communication, task management, and event planning without hassle. It integrates the most important functions for working efficiently as a team in one platform.
Why does Tidli exist?
The idea for Tidli arose from a common problem: current messaging tools are not comprehensive enough to manage tasks and events in an organized way, and more complex solutions tend to be difficult to use or expensive. Tidli was created to be accessible and simple, yet powerful enough to organize teams, tasks, and events seamlessly. Its intuitive design allows any user to take full advantage of its features, even without being tech-savvy.
Creating the brand
The creation of Tidli’s brand identity started with three in-depth discovery meetings where we explored every key aspect that would shape the foundation of the brand. These sessions were critical in understanding the core values, target audience, and market positioning for the product.
During these meetings, we identified a series of words that characterized the type of experience we wanted users to associate with the application.
Stylescapes
In line with the brand definition we had established, we created three stylescapes, each offering a distinct visual and conceptual style but remaining consistent with the core values we identified in the discovery phase.
Trust and Security
The First style leaned into the themes of confidentiality and security, with more conservative color palettes and structured layouts. This approach was meant to reassure users, emphasizing Tidli’s commitment to creating a secure, reliable environment for managing their tasks and services.
Bold Innovation
This version used vibrant colors and dynamic elements to highlight Tidli’s forward-thinking and disruptive qualities. The goal here was to capture attention and suggest that Tidli is an innovative tool at the cutting edge of organizational apps.
Web3-Inspired Gamer Aesthetic
The third stylescape is Web3-inspired, using purples, gradients, and blacks to create a bold, futuristic, and gamer-like aesthetic. It emphasizes innovation and confidence.
Brand Elements
Designing the Tidli logo, we based our approach on three key concepts that mirror the app's core functionalities: the circle, the star (represented as an asterisk), and messages.
The circle
Reflects the circle group, where every participant can interact with each other seamlessly.
The star
Represents the Service group, where a service provider communicates with multiple users simultaneously, from a central position.
The message
The icon symbolizes the importance of communication within the app.
These three elements were used throughout the logo development, ultimately becoming integral visual components of the Tidli brand itself. This cohesive system reinforces the brand identity, independently of the logo itself, across various touchpoints.
This branding effort ties back to our initial definition of the brand, as established in the discovery phase: Tidli provides a collaborative environment for busy clients, helping them stay organized, instilling confidence, and improving efficiency.
Logo Proposals
In our pursuit of creating a visual identity that resonates with the essence of our brand, we have developed three distinct logo proposals. Each design encapsulates unique concepts that reflect our commitment to fostering communication, simplicity, and a user-friendly experience.
Play
The first logo concept revolves around educational toys for children. It emphasizes the brand's vibrant colors while highlighting simplicity and ease of use. The design is family-friendly, aiming to create a warm and inviting atmosphere for users of all ages.
Core
The second logo focuses on messages converging at a central point. It symbolizes how all conversations and communications originate from the center and return to it. The negative space created by the messages forms an asterisk star, while the surrounding messages create a circular motion, representing connectivity and unity.
Messages
The third logo merges the previous concepts, depicting conversations between diverse users as circles and stars. It retains the simplicity and clarity of the other designs, effectively illustrating the idea of dialogue and interaction while maintaining an approachable aesthetic.
Final Logo Construction
Once the final design was approved, we constructed the logo using a new typography that better aligned with the client's vision. This new logo design incorporated a mathematical approach to ensure its future reproduction would be precise and consistent across various applications. This careful consideration of typography and structure not only enhances the overall aesthetic but also supports the brand's identity in a cohesive manner.
Brand Manual Overview
we also created a comprehensive brand manual. This manual outlines the color palette, typography, and logo construction, providing clear guidelines for proper usage. It includes examples of both correct and incorrect applications of the logo to ensure consistency and integrity in the brand's visual identity.
Creating the Application
To develop the application, we focused on three key points: Instant Messaging, Task Management, and Event Planning. We intended to use these three elements as the fundamental pillars of the app.
Instant Messaging
Facilitates real-time communication among team members or group participants, ensuring swift and efficient interactions.
Task Management
Allows users to create, assign, and track tasks within groups, helping to organize and streamline responsibilities and workflow.
Event Planning
Enables users to schedule and coordinate events, with options to sync with Google and Microsoft calendars for better organization and time management.
Research & Buyer Personas
During the research phase, we deeply analyzed the needs of our target audience and explored existing messaging apps like WhatsApp and Telegram. These are the most widely used communication platforms, but both lack key functionalities that Tidli aims to provide. By studying these apps, we identified the gap in managing tasks, events, and secure file-sharing, features that are essential for efficient group collaboration but not fully supported by these platforms.
Site Map
The structure of Tidli is designed to provide a seamless user experience with intuitive navigation and minimal complexity. The main entry point is the Workspace, where users can view an overview of their tasks and upcoming events. This central hub ensures that users have a clear picture of their current priorities.
The Messages section is the second key area. Here, users can engage in conversations, create new chats, and organize all the events and tasks from their various groups. This integration allows users to streamline communication and keep track of everything in one place.
The site map ensures that users can easily navigate between these essential areas, facilitating an efficient and organized workflow.
Wireframes: Initial Design Phase
The first version of Tidli's wireframes was developed based on the site map and user journey, with the goal of creating a clear and intuitive interface that would make task management, messaging, and event scheduling as straightforward as possible. However, during the wireframe phase, one of the designers was keen on exploring colors and visual elements early on, which led to incorporating some preliminary color schemes and UI components. This gave the wireframes a slightly more polished look than typical monochrome wireframes.
Workspace Overview
The workspace is the core screen where users can view all their tasks and upcoming events. This dashboard-style approach was designed to reduce the need for users to switch between screens, giving them a bird’s-eye view of all relevant information.
Messaging
Inspired by familiar messaging apps, the messaging interface is built to support group conversations and task/event integration. Users can easily create tasks or events directly from the chat, ensuring everything stays in one place and nothing is lost between communication and action.
Task and Event Creation
A simple interface allows users to quickly create tasks or events with just a few taps. Whether it’s setting deadlines, assigning tasks to group members, or scheduling an event, it all happens in a single, clean form.
User Testing
Users
Participants Total: 24 users
Age Range: 23-40 years old
18 users between 23-30 years old
6 users between 30-40 years old
Tasks Overview
Accept group invitation to Tidli.
Tidli's Work Chat Group:
Add a new task.
Move the task “Search Location” from "To do" to "In Progress".
Jorge Plumber Group (administrator perspective):
Add a new service with a specific time.
Add a new service without a specific time.
Tatiana Nails Group:
Book a nail art service with Tatiana.
Cancel the reservation.
MyWorkspace:
Add a new event
Key Findings and Observations:
Lack of Understanding of the Services Feature:
A significant number of users didn’t fully understand how to use the services feature. They were unsure when a chat was meant for offering services, especially in the administrator view.
This confusion led to hesitation in adding services with or without specific times. Users expected clearer distinctions between regular group chats and service-oriented chats.Navigation Issues with MyWorkspace:
Many users struggled to locate the MyWorkspace section. They didn’t realize this was where they could find general tasks or events.
This caused delays in completing tasks such as adding events or accessing overall group tasks, as users expected all tasks to be visible in their primary chat views.Task Management and Assignment:
In Tidli’s Work Chat, moving tasks between columns (e.g., "To Do" to "In Progress") was well-received by the younger users but still caused issues for a few, who felt the action wasn’t always visually confirmed.Service Bookings (Tatiana Nails):
Users generally liked the booking and cancellation process, but several mentioned that canceling a service was not as clear as booking one, with some feeling unsure if the reservation had been properly canceled.
Changes Applied Based on Feedback:
Clarifying the Services Feature:
Updated the UI to better differentiate between group chats and service provider chats (e.g., Jorge Plumber).Improved Navigation to MyWorkspace:
Redesigned the navigation bar and split My workspace in two: Tasks and Calendar.Visual Feedback for Task Management:
Enhanced the drag-and-drop functionality for task movement to provide instant feedback, ensuring users know their actions have been completed.
Refined the labels and visual design of the task management interface to make it clearer which tasks belong to each status.Confirmation for Cancellations:
Added a confirmation pop-up when users attempt to cancel a booking, making the process clearer and reducing the risk of unintentional cancellations.
Messages Screen
We focused heavily on this screen because it presented the most difficulties during user testing and is the foundation of the app's functionality. It’s the most important screen in the application since all information is created here.
Request View
From this screen, users can also access the “Request” view, where they can see incoming messages from users who require approval to initiate conversations.
Group Organization
Previously, all groups were listed one below the other. Now, personal services are displayed at the top, and we’ve introduced a folder feature that allows users to organize groups into custom folders, which can be named, colored, and given emojis.
Quick Creation
A more accessible + button was added, making it easy for users to create events, tasks, groups, and folders directly from the main screen.
Services System
The former "star group" has been renamed Services, making its function clearer for users. The group administrator can now create both scheduled services (appointments) and products. This allows clients within the group to easily reserve appointments and "purchase" products (although no transactions are processed within the app). Booked appointments are automatically saved to both the group’s calendar and the individual user’s calendar, ensuring seamless organization and scheduling for everyone involved.
Calendar and Tasks Screens
We decided to split the workspace into two separate screens: Calendar and Tasks, because they are both critical components that required their own hierarchy.
Tasks
We improved the interface to resemble Trello, allowing two viewing modes: vertical and horizontal. Users can drag tasks between lists and swipe left or right to mark tasks as completed or undo them. This provides an intuitive, flexible way to manage tasks efficiently.
Calendar
Designed to be minimalistic and straightforward, offering both weekly and monthly views. If no events are scheduled for a day, the calendar remains empty, reducing clutter and avoiding confusion.
Final Reflection
The app is still in development, with key tasks ahead such as responsive design for desktop and tablet, and final user testing to validate recent design changes.
Throughout this process, I’ve gained invaluable experience leading a small team of two designers, closely collaborating with the brand owner and developer. This has sharpened my skills in leadership, delivering complete weekly outputs, and working under tight deadlines.
Most importantly, I learned the value of user testing. Validating assumptions and realizing that the first idea is not always the right one.
