النسخة العربيةAR
Let’s talk

A good partnership starts with a conversation.

NEXTWAVE / SELECTED WORKCASE STUDY / FROM IDEA TO EXPERIENCE
Back to our workBusiness systems

BRIXEL — Construction planning and cost tracking interfaces

A task may be complete while its costs still need review, or due soon while waiting on earlier work. BRIXEL brings timing, dependencies, progress and expenditure into one Arabic planning workspace.

Explore the project

Project information

Client
An original Nextwave project
Sector
Construction
Platforms
Web
Project type
Business systems

Services delivered

Web application developmentUser interface & experience design
THE BIG PICTURE

Project overview

Construction follow-up needs more than a completion figure. The team needs to see what is finished, what depends on earlier work and where expenditure belongs. BRIXEL starts with the daily review: an overview that leads to the task and context behind each number.

Three readings of the same task

Completion describes work performed, dates place it in a plan, and expenditure describes cost. Combining them into one percentage can hide useful distinctions: higher spending does not establish greater progress, and an unstarted task may be waiting on its predecessor.

The design separates these measures and keeps dependencies beside the task details. A reviewer can move from the overview to the schedule or individual record to inspect dates, responsibility, progress, costs and change history.

An overview, a schedule and a record for each task

The project room switches between workspaces and displays allocation, expenditure, duration-weighted progress and completed tasks. Comparison bars expose the distribution behind the total. The starting register contains three projects and 13 tasks, with new tasks added to the selected project.

The schedule offers Gantt and table views with search, status and owner filters. Each task record brings its plan, predecessor, progress, costs and reviews together. Project progress uses inclusive planned task durations as weights and remains separate from money.

Rules that keep the plan consistent

A task must start after its predecessor ends, and dependencies stay inside the same project. Circular chains are rejected. Editing a predecessor cannot invalidate existing dependent dates. Progress requires the earlier task to be complete, and a predecessor cannot regress once a dependent has started.

Amounts are stored in integer cents. Expense corrections require a reason and retain old/new values; overspending is displayed explicitly. Register exports follow the current filters, and task expenses have their own export. A failed save keeps the form and inputs without committing a partial change.

INSIDE THE EXPERIENCE

Project images

Explore the interface and experience through the project gallery.

Use case: scheduling work after a predecessor

The planner selects a project, enters the task, owner, allocation and dates, then chooses its predecessor. A start on or before the earlier task’s end keeps the form open with the conflict explained. A dependency chain that loops back to itself is rejected before saving.

The valid task appears in the schedule with its predecessor reference. Recording progress remains blocked until the earlier work is complete. The relationship survives navigation and reload, and once the dependent has started its predecessor cannot regress. Other dates do not shift automatically; reviewing the wider schedule remains an explicit planning decision.

BRIXEL execution schedule and task record connecting dates, completion and expenditure
BRIXEL execution schedule and task record connecting dates, completion and expenditure

Use case: reviewing cost without rewriting progress

The reviewer records an expense with its description, amount and date. Expenditure and remaining allocation change; the recorded completion percentage does not. Paying for work does not by itself establish that the work is finished.

A correction requires a reason and keeps the old/new amount in the history. Totals are recalculated, and spending above the allocation produces an explicit over-budget amount rather than a silent budget increase. Expenses can be exported for separate review. The interface does not execute a payment or an external accounting entry.

BRIXEL task record with an enlarged budget, expenditure and remaining-allocation detail
BRIXEL task record with an enlarged budget, expenditure and remaining-allocation detail

Use case: preparing a daily plan review

The manager selects a project and reading date. A task becomes overdue when its planned end precedes that date and completion remains below 100%. The alert leads into the schedule, where search, owner and status filters focus the review.

Switching between Gantt and table preserves the selection, and each task opens its dependencies, expenses and history. Export includes exactly the visible rows. Mobile scheduling stacks task names, dates and bars into a readable vertical arrangement for reviews away from a desk.

Three BRIXEL mobile screens showing project indicators, the task schedule and an execution record
Three BRIXEL mobile screens showing project indicators, the task schedule and an execution record

A visual language grounded in construction

Electric blue leads actions, navy anchors the navigation and selected indicators, and pink distinguishes progress and specific waiting or over-budget states. Architectural imagery establishes context while numbers and comparisons keep their own space.

Four mockups use original screens: overview with phone, schedule with task record, mobile views and a financial detail. Interlocking geometric background forms echo construction without placing text outside the interfaces.

Three BRIXEL mobile screens showing project indicators, the task schedule and an execution record
Three BRIXEL mobile screens showing project indicators, the task schedule and an execution record

Implemented scope

The work comprises three connected HTML, CSS and JavaScript interfaces with browser-local storage. It implements dependency, date, progress and expense rules, corrections, exports and responsive/keyboard behaviour. The sidebar outlines broader modules; the project room, schedule and task record define the implemented interaction scope. Shared team operation, critical-path calculation, accounting integration, documents and access control require separate backend work. Displayed projects, people and figures are interface data rather than verified customer outcomes.

Built with

  • HTML5
  • CSS3
  • JavaScript
  • localStorage
NEXTWAVE

Need a clearer view of your project plan and costs?

We start with how your team plans tasks and reviews dates and expenses, then define the data, permissions and integrations required for operation.

Let’s talk about your project