TPMS wireframe proposal

Project workspace, work plan, mobile time entry, and reporting improvements

A practical, phased UI direction that reduces duplicate setup screens, improves project visibility, and keeps development cost controlled.

Primary goal Make project setup and time tracking easier to understand.
Design approach Consolidate related workflows into a Project Workspace instead of rebuilding the whole system.
Recommended first phase Navigation cleanup, clearer labels, dashboard/work plan layout, and mobile time entry improvements.

01. Proposed flow

One project workspace instead of several competing setup screens

The key change is to guide users from Project List into one workspace. Work package setup, activity budgets, time detail, associations, and reports should live inside that workspace.

Client discussion frame
Project List Search, filter, and open the project.
Project Workspace Single destination for status and setup.
Work Plan Work packages and activity budgets together.
Time Entry Project -> package -> activity -> task.
Reports Preview, filter, export, or print.

Recommended navigation: Dashboard, Projects, Time Entry, Reports, Admin. Move Activities, Tasks, and Allowed Tasks by Activity into Admin.

02. Desktop wireframe

Project Workspace - Overview

The overview should answer the project manager's first question: are we on track, how much budget is used, and where is time going?

Project status

3294-00 Aqeel Test Project

In Progress | Client: Example Company | Responsible: Project Lead
Export Add Time
Overview Setup Work Plan Time Detail Associations Reports
320 Approved baseline
186 From timesheets
134 Available hours
58% On track
OK No major overrun

Budget by Work Package

Drill down
WP-001 Design
72%
WP-002 Analysis
48%
WP-003 Cert
91%
WP-004 Training
25%

Recent Time

Last 7 days

Presentation note: this replaces a dashboard that behaves like another edit page with a clearer status-first workspace.

03. Desktop wireframe

Project Workspace - Setup

Project setup should contain project details and associations, with clear grouping. This removes confusion between Project Update and Project Dashboard.

Project edit flow

Project Setup

Update core project fields and related project records.
Cancel Save Changes
Overview Setup Work Plan Time Detail Associations Reports

Presentation note: show this as the replacement for multiple edit forms. Associations can be a separate tab if the lists are long.

04. Desktop wireframe

Project Workspace - Work Plan

The Work Plan brings Work Packages and Project Activities together. Users should set each activity budget in context instead of jumping to a separate Project Activity module.

Budget setup

Work Plan

Manage work packages and activity budget lines for this project.
Import Template Add Work Package
Overview Setup Work Plan Time Detail Associations Reports
320 Hours
186 Hours
134 Hours
2 Need review
4 Active
WP-001 Design Package Budget 110 Actual 79 Left 31 On Track
Design 80 hrs 52 hrs 28 hrs OK
Analysis 30 hrs 27 hrs 3 hrs Watch
WP-002 Certification Package Budget 90 Actual 96 Left -6 Over
Certification 70 hrs 78 hrs -8 hrs Over
Training 20 hrs 18 hrs 2 hrs OK

Presentation note: this screen should replace the confusing split between Work Packages and Project Activities for everyday users.

05. Mobile wireframe

Mobile Time Entry

The mobile form should prioritize speed. Most users need to enter a few required fields from a phone with minimal scrolling and clear save actions.

Phone-first workflow

Add Time

Today | Save quickly from the field

Mobile design notes

  • Keep the field order aligned with the data dependency: Project, Work Package, Activity, Task.
  • Default the date to today.
  • Make Hours a large numeric input.
  • Keep Notes optional and below required fields.
  • Use Save and Add Another for repeated daily entries.
  • Show recent entries below the form as compact cards, not a wide table.

06. Desktop wireframe

Reports - Preview First

Reports should be reviewed on screen before export. Users should filter, preview, then print or download.

Reporting workflow

Project Reports

Select filters, preview results, then export or print.
Save Filters Run Preview

Preview

Print PDF Excel
Project Work Package Activity Hours
3294-00 WP-001 Design 52
3294-00 WP-002 Certification 78
3294-00 WP-002 Training 18

Presentation note: this is a practical improvement over hardcoded PDF-only reporting.

07. Admin wireframe

Admin Dashboard - Portfolio Insights

The admin dashboard should surface exceptions and operational health across all projects, users, budgets, and time entries. The priority is actionable insight, not just totals.

Admin insight center

Admin Dashboard

Portfolio health, budget risk, time compliance, workload, and data quality.
This Month Export Review Alerts
42 Across all clients
6 Need review
1,284 Submitted time
9 This week
18% Above target

Budget Snapshot

Active projects
Budget View Budgeted Actual Remaining Status
Portfolio hours 8,600h 5,940h 2,660h 69% Used
Billable project hours 7,400h 5,180h 2,220h On Track
At-risk hours 920h 875h 45h Review
Budgeted labor value $1.24M $0.86M $0.38M If rates enabled

Budget Risk by Project

Top risks
3294-00
106%
3289-00
94%
3287-00
88%
3282-00
78%

Needs Attention

Action queue
Issue Area Status
Project over 100% budget 3294-00 / WP-002 High
Missing timesheets 9 users Medium
Actual hours with no budget 3 work packages Medium
Duplicate work package names 1 project Review

Weekly Time Trend

Billable vs non-billable
Week 1
312h
Week 2
284h
Week 3
352h
Week 4
336h

Workload by Team Member

This week
User Hours Billable Status
Engineer A 41 36 OK
Engineer B 52 45 High
Engineer C 18 12 Low

Activity Mix

Month to date
Design
420h
Analysis
280h
Certification
198h
Non-billable
116h

Presentation note: the most important admin widget is Needs Attention. It turns dashboard data into a practical action list.

08. Admin wireframe

Catalog setup moved away from daily project work

Activities, Tasks, and Allowed Tasks by Activity should be managed by admins or configured users, not mixed into the normal time tracking flow.

Reduce confusion

Activity Catalog

Reusable categories used across projects.

Design Analysis Certification

Task Catalog

Reusable task options.

3D Modeling Design Checking Training Session

Allowed Tasks by Activity

Formerly Activity Tasks.

Design -> 3D Modeling Design -> Design Checking Training -> Training Session

09. Implementation plan

Phased rollout for cost control

The wireframes are designed to support a low-cost first phase and a more capable future phase.

Phased delivery

Phase 1: Low-cost cleanup

  • Rename confusing labels.
  • Move Activities, Tasks, and Activity Task mappings into Admin.
  • Make Project Workspace the main project landing page.
  • Add Work Plan section using existing data.
  • Keep current database model.
  • Add duplicate work package title warning.

Phase 2: Better editing

  • Build inline Work Plan editor.
  • Set budget hours per activity row.
  • Replace bulk delete/recreate behavior with row updates.
  • Consolidate project create/update/dashboard logic.
  • Add dashboard drilldowns by work package and activity.

Phase-wise hours and cost estimate

Planning assumption: $25/hour.

Phase Scope Hours Cost
Phase 0 Review, final wireframes, client alignment 8-12 $200-$300
Phase 1 Low-cost UI cleanup, labels, navigation, mobile time entry polish 45-65 $1,125-$1,625
Phase 2 Project Workspace, Work Plan, budget tables, drilldowns 75-110 $1,875-$2,750
Phase 3 Admin Dashboard, portfolio KPIs, budget risk, compliance alerts 50-75 $1,250-$1,875
Phase 4 Reporting filters, preview-before-export, PDF/Excel flow 45-70 $1,125-$1,750
Phase 5 Cleanup, refactor, validation, permissions, QA 35-55 $875-$1,375
Minimum start Phase 1 only: 45-65 hrs, $1,125-$1,625.
Strong MVP Phases 1-3: 170-250 hrs, $4,250-$6,250.
Full package Phases 1-5: 250-375 hrs, $6,250-$9,375.
Recommended client message: TPMS does not need a full rebuild to become easier to use. The first improvement should be a clearer project workspace and work plan flow that reduces duplicate screens and improves budget visibility.