Problem Statement

Knowledge workers, students, and indie makers often juggle multiple tools—note apps, to‑do lists, and scattered idea docs. This fragmentation makes it hard to keep context, link information, and stay focused on the right work.

For this assignment, the challenge was to design a homepage for a new productivity web app (no existing brand) that:

• Communicates the Notes / Tasks / Ideas model in a single workspace.

• Shows how everything connects, rather than feeling like three separate tools.

• Feels calm and minimal, not like another noisy productivity dashboard.

Key problems to address:

• Users don’t immediately understand how notes, tasks, and ideas relate to each other.

• Many productivity sites over‑explain with heavy copy instead of showing the workflow.

• Marketing pages often scatter benefits, social proof, and CTAs, making the decision to sign up slower.

Design Goals

• Make the core value proposition instantly clear above the fold:
  “Organize notes, tasks, and ideas in one calm workspace.”

• Visually demonstrate how notes, tasks, and ideas connect inside the app.

• Keep the layout light, minimal, and distraction‑free while still feeling warm and creative.

• Build trust with simple metrics, testimonials, and a structured footer.

• Maintain a single, focused primary CTA: Sign Up.

Solution

Hero Section – Live Workspace Preview

• Designed a hero with a clear headline, short supporting copy, and a strong primary CTA next to a high‑fidelity UI preview.

• The preview shows a tabbed workspace (Notes / Tasks / Ideas) with a focused Notes view, rich‑text tools on the right, and contextual statuses like Draft, Saved, Shared.

• Added playful, notebook‑style stickers around the hero (mind map, note, today, brainstorm) to visually reference ideas and planning without cluttering the core UI.

“Everything in One Workspace” Feature Cards

• Created three colored feature cards—Notes, Tasks, Ideas—each with its own background tint, icon, and short list of key and optional features.

• Notes focuses on rich text, templates, code/quote blocks, and linking notes to tasks/ideas.

• Tasks emphasizes due dates, priorities, recurring tasks, Kanban view, and reminders.

• Ideas highlights mind maps, flowcharts, idea scoring, voting, and AI‑assisted exploration.

• This section clarifies that each pillar is powerful on its own but designed to work together.

“How It Works” – Four‑Step Flow

• Introduced a horizontal stepper with cards for Capture → Connect → Organize → Share & collaborate.

• Each card includes an icon, short explanation, and a mini UI preview (editor, linking interaction, grouped boards, shared workspace).

• This makes the workflow scannable and shows exactly how a note can become a task, then part of an organized project, and finally shared with others.

“Everything Stays Connected” Visual Story

• Built a side‑by‑side section:

  • Left: concise benefits (work faster, stay connected, see the big picture, collaborate seamlessly).

  • Right: vertical UI cards for a meeting note, linked task, and linked idea, with connectors between them.

• This reinforces the mental model: one thread from note → task → idea rather than isolated items.

Metrics & Social Proof

• “Built to save your time” section with three metric cards:

  • 4+ hrs saved per user each week.

  • 10k+ active users staying organized.

  • 50k+ notes created and linked.

• “What people say” testimonials with avatar, name, role, star rating, short quote, date, and verification badge.

• Together, they provide credibility and reduce anxiety about adopting a new tool.

Final CTA, Newsletter, and Footer

• Combined final CTA card with newsletter signup:

  • Heading: “Ready to organize everything in one place?”

  • Email field for product updates and a Subscribe button.

  • Primary Sign Up button centered below.

• Below this, a structured footer groups links into Product, Company, Resources, Support, and Legal, plus social icons, reinforcing the feel of a real SaaS product.

Visual Language & Branding

• Introduced a simple brand concept, Flowdesk, with a minimal dot‑grid “F” icon and wordmark.

• Used a calm blue primary color with soft yellow, blue, and violet tints for section cards.

• Employed rounded cards, subtle shadows, and generous white space to keep the page light and focused.

• Notebook‑style stickers and subtle doodles add personality and connect back to the idea of notes and brainstorming.