top of page

TASKLY - Taskly – AI-Powered Task Management Homepage

Duration: 1 Week | Tools Used: Figma | Role: UX/UI Designer

Figma Link 

Taskly Homepage.png

Project Overview

​

Taskly is a conceptual SaaS product designed to help individuals and teams manage tasks with AI assistance.The goal was to create a conversion-focused landing page that communicates value quickly, builds trust, and encourages users to start a free trial.

Problem Statement

 

Traditional task management tools often feel cluttered, overwhelming, and time-consuming.Users want a simpler, smarter way to stay organized without spending hours planning their day.

Challenge:

How might we design a homepage that clearly communicates Taskly’s AI-driven value while making it easy for users to trust and sign up?

Research & Insights

 

I conducted a quick competitive analysis of leading task management tools (Trello, Asana, Todoist):

  • Strengths: Strong branding, feature-rich, community trust.

  • Gaps: Overloaded with features, steep learning curves, generic visuals.

User Needs Identified:

  • A tool that saves time (AI-driven help).

  • A simple onboarding process.

  • A clean, minimal interface that doesn’t overwhelm.

Design Goals

​

  • Keep the layout clean, modern, and conversion-focused.

  • Use dark gradient theme with vibrant accents for a futuristic feel.

  • Highlight AI-powered features clearly.

  • Provide trust-building elements like testimonials and pricing plans.

Wireframe to High Fidelity

 

Information Architecture (single scroll page)

  • Hero Section – Headline, subheading, primary CTA (“Start Free Trial”), and product mockup.

  • Features Section – 4 key features with icons + microcopy.

  • How It Works Section – 3-step visual flow: Add tasks → AI organizes → Track & achieve.

  • Testimonials Section – 5 user stories to build credibility.

  • Pricing Section – 3 plans (Free, Pro, Enterprise) with highlighted CTA.

  • Footer – Brand info, quick links, resources, social, newsletter signup.

Visual Design

 

Typography:

Bold sans-serif for headings, clean geometric font for body.

Colors:

  • Background: Deep navy → indigo gradient.

  • Accents: Vibrant cyan + purple glow.

  • Text: White/Light gray for readability.

  • Icons & Illustrations: Minimal line icons with glowing highlights.

  • Mood: Modern, futuristic, trustworthy.

Final Design Highlights

 

Hero: “Stay organized with AI-powered task management” + bold CTA.

Features:

  • Smart Task Sorting

  • Collaboration Made Easy

  • Calendar & App Integration

  • Personalized Reminders

How It Works:

3-step infographic (Add → Organize → Achieve).

Testimonials: Realistic user quotes with faces for authenticity.

Pricing: Clear tiered options with emphasis on Pro plan.

Footer: Clean, structured, with quick navigation + newsletter CTA.

Key Learnings

 

  • A single landing page can effectively showcase value + trust without being cluttered.

  • Visual hierarchy is critical—users notice CTA buttons and hero text first.

  • Subtle animations (like hover states and glowing accents) make the site feel modern without distracting.

Outcome

 

The Taskly homepage design achieved:

  • A clear brand voice (AI + productivity).A conversion-friendly layout with multiple CTAs.

  • A visually polished, responsive design suitable for SaaS startups.

This project demonstrates my ability to:

  • Research user needs & competitors

  • Translate insights into UI/UX decisions

  • Create a high-fidelity mockup with storytelling for a portfolio

Future Enhancements

 

  • Add interactive prototypes.

  • Expand to a multi-page experience (dashboard, sign-up, pricing details).

bottom of page