Dikla

052-5212304

Work

About

Contact

Dikla

A mobile app that helps HR's plan employee initiatives by connecting inspiration with clear execution.
It brings clarity to complex decisions by grounding ideas in real budgets, constraints, and next steps.

B2B Project Management System

B2B Project Management System

BACKSTAGE

BACKSTAGE

A B2B project management system for freelancers and small creative teams.
Designed to turn complex workflows into a clear, structured, decision-oriented experience.

A B2B project management system for freelancers and small creative teams.
Designed to turn complex workflows into a clear, structured, decision-oriented experience.

View Prototype

View Prototype

UX/UI Process Overview

UX/UI Process Overview

01

ANALYSIS

02

STRUCTURE

03

ARCHITECTURE

04

Design

  • Analyzed leading project management platforms

  • Identified usability gaps in
    client-based workflows

  • Defined system logic and
    user roles

  • Mapped core workflows and
    task dependencies

  • Structured data hierarchy
    across dashboards

  • Designed decision-focused
    layout patterns

  • Built a scalable design system

  • Reduced cognitive load through visual clarity

  • Analyzed leading project management platforms

01

ANALYSIS

  • Identified usability gaps in client-based workflows

  • Structured data hierarchy
    across dashboards

03

ARCHITECTURE

  • Designed decision-focused
    layout patterns

  • Defined system logic and user roles

02

STRUCTURE

  • Mapped core workflows and task dependencies

  • Built a scalable design system

04

Design

  • Reduced cognitive load through visual clarity

The Problem

The Problem

Freelancers and small creative teams need continuous visibility across projects, tasks, and timelines to maintain control over their workflow and client commitments.

Freelancers and small creative teams need continuous visibility across projects, tasks, and timelines to maintain control over their workflow and client commitments.

Operational Complexity

Client-based work involves multiple projects, shifting priorities, and task dependencies that rarely follow a linear structure.

Fragmented Workflows

Information is often spread across dashboards, tables, and communication channels, reducing visibility and slowing execution.

Priority Ambiguity

Many tools display data but lack structured hierarchy, making it harder to prioritize and act strategically.

Operational Complexity

Client-based work involves multiple projects, shifting priorities, and task dependencies that rarely follow a linear structure.

Fragmented Workflows

Information is often spread across dashboards, tables, and communication channels, reducing visibility and slowing execution.

Priority Ambiguity

Many tools display data but lack structured hierarchy, making it harder to prioritize and act strategically.

Competitor Analysis

Competitor Analysis

I reviewed a range of project and client-management tools to understand how freelancers handle complex, client-based workflows.

Enterprise Tools

Enterprise Tools

Jira

Jira

Wrike

Wrike

MS Project

MS Project

Powerful workflows and advanced tracking

Built for scale and heavy process

Can feel overwhelming for small teams

Powerful workflows and advanced tracking

High setup and maintenance effort

Built for scale and heavy process

Can feel overwhelming for small teams

High setup and maintenance effort

Flexible Work Management

Flexible Work Management

Monday

Monday

ClickUp

ClickUp

Notion

Notion

Highly customizable views and dashboards

Supports different work styles

Customization can create inconsistency

Highly customizable views and dashboards

Highly customizable views and dashboards

Supports different work styles

Customization can create inconsistency

More setup decisions before work flows smoothly

Simple Task Tools

Simple Task Tools

Trello

Trello

Todoist

Todoist

Basecamp

Basecamp

Quick to adopt and easy to use

Works well for lightweight planning

Limited support for dependencies and oversight

Quick to adopt and easy to use

Breaks down as multi-project complexity grows

Works well for lightweight planning

Limited support for dependencies and oversight

Breaks down as multi-project complexity grows

Opportunity: Backstage sits in the middle, offering structured oversight and decision-focused dashboards without heavy enterprise complexity.

Opportunity: Backstage sits in the middle, offering structured oversight and decision-focused dashboards without heavy enterprise complexity.

Key Product Insights

Three core insights identified through system analysis and design exploration.

DEPENDENCIES

Dependencies

Tasks often depend on approvals, assets, or previous steps, which creates hidden blockers.

Tasks often depend on approvals, assets, or previous steps, which creates hidden blockers.

Design implication:

Surface blockers and dependencies through statuses and "Blocked" indicators.

Surface blockers and dependencies through statuses and "Blocked" indicators.

CONTEXT SWITCHING

context Switching

Work is split across projects, tasks, invoices, and clients, causing context switching.

Work is split across projects, tasks, invoices, and clients, causing context switching.

Design implication:

Keep actions and context connected through consistent patterns (tables, side panels).

Keep actions and context connected through consistent patterns (tables, side panels).

Priorities

Priorities

Freelancers juggle multiple projects at once, so priorities must be obvious at a glance.

Freelancers juggle multiple projects at once, so priorities must be obvious at a glance.

Design implication:

Highlight urgent tasks, deadlines, and risk indicators on the dashboard.

Highlight urgent tasks, deadlines, and risk indicators on the dashboard.

Three core insights were identified through HR questionnaires, conversations, and direct experience

Key User Research Insights

Goals

Goals

From Scattered Client Work to Clear Operational Control

From Scattered Client Work to Clear Operational Control

1

1

PRIORITIZE

Prioritize

Make urgent tasks, blockers, and deadlines instantly visible.

Make urgent tasks, blockers, and deadlines instantly visible.

2

2

STRUCTURE

Structure

Organize projects, tasks, clients, and invoices into a clear system.

Organize projects, tasks, clients, and invoices into a clear system.

3

3

CONNECT

Connect

Keep context and actions linked across views to reduce context switching.

Keep context and actions linked across views to reduce context switching.

Key Role

Creative Project Lead (Freelance / Small Team)

Manages multiple client projects end-to-end while balancing shifting priorities, dependencies, and deadlines.

Needs a structured system to maintain visibility, reduce context switching, and deliver reliably.

Key Role

Creative Project Lead (Freelance / Small Team)

Manages multiple client projects end-to-end while balancing shifting priorities, dependencies, and deadlines.

Needs a structured system to maintain visibility, reduce context switching, and deliver reliably.

Information Architecture

Information Architecture

BACKSTAGE SYSTEM

dashboard

Urgent tasks

Task on hold

Cash risk

Projects Overview

Schedule

Today overview

CLIENTS

Client list / table

Client details

Linked projects

Linked files

Linked invoices

PROJECTS

Projects table

Project details

Create Project

Linked files

Linked invoices

proposals

Proposals table

Proposal details

Create proposal

Ai Proposal

Convert to project

TASKS

Board view

Task details

Status + priority

Dependencies

Add task

invoices

Invoices table

Invoice details

Payment tracking

Linked client

Linked project

User Flow

User Flow

From Client to Project

From Client to Project

Select Client & Create Proposal

Write your Proposal

Preview & Send to Client

After Approval - Convert to Project

Choose the Next Step: Review & Edit Project Details or Create Tasks for the project

Choose the Next Step: Review & Edit Project Details or Create Tasks for the project

Select Client & Create Proposal

Write your Proposal

After Approval - Convert to Project

Preview & Send to Client

This flow demonstrates how proposals transition into projects, keeping context and next steps connected.

This flow demonstrates how proposals transition into projects, keeping context and next steps connected.

Visual Language & Design Foundations

Visual Language & Design Foundations

Backstage uses a structured, clarity-first visual language designed for B2B workflows. The UI emphasizes hierarchy, consistency, and status-driven feedback to support confident decision-making.

Backstage uses a structured, clarity-first visual language designed for B2B workflows. The UI emphasizes hierarchy, consistency, and status-driven feedback to support confident decision-making.

Logo Usage

Logo Usage

Logo Concept

Logo Concept

The Backstage logo is a clean, product-first wordmark for a professional B2B system.
The colored dots hint at the platform’s status-driven language (Active, Pending, Overdue, etc.).

Logo Usage

Logo Usage

Used sparingly to keep the UI calm and data-focused:

  • Small in the top nav / sidebar

  • Full logo on login/entry screens

  • A subtle mark (or dots) in empty states

Color Palette

Color Palette

Primary (Brand & Actions)

Primary (Brand & Actions)

#4F46E5

Primary

#4338CA

Primary Hover

Primary
Hover

#EEF2FF

Primary Light

Primary
Light

Neutral Palette (Foundation)

Neutral Palette (Foundation)

#57534E

Secondary
Text

#1C1917

Primary
Text

#FFFFFF

Card

#FAFAF9

Background

#F5F5F4

Muted

#57534E

Secondary Text

#1C1917

Primary Text

Semantic Colors (Status-Driven)

Semantic Colors (Status-Driven)

Success

Paid / Done

Warning

Background

Destructive

Overdue / Error

Inactive

Draft / Paused

Destructive

Overdue / Error

Inactive

Draft / Paused

Usage principle:
Primary purple are for navigation and actions. Semantic colors are only for status communication to keep the system calm and scannable.

Usage principle: Primary purple are for navigation and actions. Semantic colors are only for status communication to keep the system calm and scannable.

Typography

Primary Typeface

SF Pro

Type Scale

H1

20/28

H2

18/25.2

H3

16/22.4

H4 Med

16/22.4

Body Main

16/22.4

Body Secondary

14/19.6

Labels

12/18

Buttons

14/21

Hierarchy in Practice

Project Dashboard

Recent Activity

Track all updates across clients, projects, and proposals in one unified timeline view.

Last updated 2 hours ago

System Label

Status Badges

Active

Sent

Approved

Paid

Done

Overdue

Rejected

Expired

Unpaid

To do

Partially Paid

Viewed

Inactive

Draft

On Hold

Icon System

All icons maintain rounded corners and optical balance for visual harmony.

Icons use a consistent stroke weight (1.5px) and shape language to support fast scanning. All icons maintain rounded corners and optical balance for visual harmony.

Icons use a consistent stroke weight (1.5px) and shape language to support fast scanning.

The Solution

The Solution

Turning complexity into structured oversight: each screen supports confident decision-making.

Turning complexity into structured oversight: each screen supports confident decision-making.

Operational control, at a glance

Operational control, at a glance

Priorities at a Glance

Urgent tasks, deadlines, and risk signals are surfaced immediately.

Cash Risk

Track overdue invoices and prevent payment delays.

Quick Actions

Start work faster with in-context shortcuts across modules.

Resolve dependencies without losing context

Resolve dependencies without losing context

Workflow Stages

Move tasks across clear columns (To Do, Blocked, In Progress, Done) to track progress instantly.

Dependency Clarity

See what’s blocking progress and jump directly to the blocker to unblock work faster.

In-Context Updates

Edit key fields (status, priority, owner, and due date) directly from the task panel without switching screens.

Resolve dependencies without losing context

Resolve dependencies without losing context

List + Details Pattern

Scan projects and take action without jumping between screens.

Cross-Module Linking

Projects connect to tasks, invoices, and client context.

Scannable Structure

Filters, chips, and statuses support fast decisions in dense tables.

From Priority to Payment

From Priority to Payment

Watch how users prioritize work, unblock tasks, jump into projects, and issue invoices without losing context.

Watch how users prioritize work, unblock tasks, jump into projects, and issue invoices without losing context.

Press play to view the live prototype walkthrough (dashboard → tasks → project → invoices)

Press play to view the live prototype walkthrough (dashboard → tasks → project → invoices)

Interested in working together?

Interested in working together?

Let's Talk

Let's Talk

See More Projects

See More Projects