🖥️ Habild is a SaaS productivity and management software enabling users to manage their finances, deadlines as well as their teams and projects.
Tech Stack Used
Connect your tools, connect your teams. With over 100 apps already available in our directory, your team’s favourite tools are just a click away.
Project Overview
Habild is a productivity dashboard maker designed to simplify task and financial management for both B2B and B2C users, particularly those who may struggle with organization, such as students with ADHD. It provides an easy drag-and-drop interface, pre-built templates, and personalized dashboard creation based on user inputs. Habild aims to fill the gap left by complex productivity tools like Asana and Notion by offering a user-friendly, personalized experience that helps users track tasks, deadlines, and finances all in one place.
Problem Statement
Jake, a college student with ADHD, struggles to stay organized and manage his finances. Current tools are too complex and don’t meet his needs for simplicity and personalization. He needs a user-friendly solution that helps him stay on top of his responsibilities without adding to his stress.
Goal
The goal of Habild is to provide a simple, personalized productivity tool that helps users, especially those with ADHD, stay organized. By offering an intuitive, drag-and-drop dashboard, Habild aims to help users manage their tasks, deadlines, and finances more effectively without feeling overwhelmed.
User Personas
User Research
Kriti has always been a bright student, but her ADHD has made it difficult for her to focus for long periods and manage multiple tasks at once.
Goals
Kriti wants to organize all aspects of her academic and personal life, from assignments to bills, in a simple, visual way.
Needs
She enjoys having some control over how her dashboard looks and feels. She wants the ability to personalize it with colors, templates, and widgets that make it engaging.
Wants
Kriti needs an intuitive, visual dashboard that doesn’t require too much setup or technical knowledge.
Fears
Kriti is afraid of becoming overwhelmed with too many features or complicated setups that demand too much attention upfront.
User Journey Map
This process involved meticulous dedication learning the behaviours of the target user group.
Design System
Design System- Habild
This design system was carefully curated using the aforementioned user experience research and the best user interface practices.
The visual parameters of Habild’s design system focus on creating a clean, intuitive, and accessible interface that promotes ease of use for individuals and small teams. Simplicity is at the core of the visual design, with a focus on minimalism and clarity. The color palette is soft and neutral, with accent colors used strategically to highlight key actions or alerts, ensuring the interface remains visually calm and free from distractions. Typography is clear and legible, prioritizing readability across various devices, while iconography and visual cues are designed to guide the user seamlessly through tasks without overwhelming them.
Colors
Typography
Grid Layout
User Flows
The onboarding user flow for Habild is designed to be as seamless and intuitive as possible, guiding users step-by-step without causing friction. Upon signing up, users are immediately prompted to answer a few personalized questions that help tailor their dashboard to their specific needs. This setup process is visually illustrated, with progress indicators showing users how far they’ve advanced. Each step is accompanied by clear, concise instructions and visual cues to reduce cognitive load. Once users complete the onboarding questions, they are presented with a pre-built, personalized dashboard, eliminating the need for complex manual configurations. This streamlined flow ensures that new users can start using the platform effectively within minutes.
Each component in Habild’s design system is built with multiple states to ensure clarity and usability across different interactions. These states include default, hover, active, disabled, and error, providing visual feedback to guide user actions. For instance, buttons transition smoothly between these states with subtle animations, helping users understand when actions are available or unavailable.
Design the states of the Pomodoro component, illustrating the different stages the component can exist in.
User Interface and Screens
Each screen is organized to prioritize important tasks and financial tracking, reducing clutter and simplifying navigation. The drag-and-drop functionality is a core feature, allowing users to customize their dashboards easily. Visual consistency across screens, including uniform spacing, typography, and color usage, ensures that users can quickly become familiar with the interface.
