Task details were spread across columns
The old dashboard separated priority, assignment, and next steps across multiple columns, making them difficult to review together.
Selected work Enterprise product UX
Work Order System Redesign
Internal redesign · release not disclosed
I led a three-month UX redesign of an internal maintenance dashboard: grouping work-order details for triage, moving chat beside the task, and designing cards for mobile use.
Project / Davies role · 2023-presentEnterprise product UX
- Role
- UX design lead (project scope)
- Context
- Davies North America · Internal dashboard
- Timeline
- 3-month redesign
01 / Overview
My contribution
Workflow analysis, responsive UX and interface design
The original dashboard spread priority, owner, status, and next actions across multiple columns. On mobile, the table required horizontal scrolling to see those details.
I reorganized the information for scanning and updating work orders, designed a mobile card view, and brought chat into the detail panel. I worked with the in-house product and IT teams.
- Working with
- In-house product and IT collaboration
- Scope
- Workflow comparison, dashboard UX, responsive QA, support-theme review
- Tools
- Figma, HTML/CSS, JavaScript
Compared
Workflow hierarchy
Existing and redesigned paths were compared for the placement of status, ownership, and next actions.
QA
Responsive field workflow
Desktop table and mobile card behavior were reviewed separately across target breakpoints.
Themes
Support review
Recurring questions about status, ownership, and next steps informed the interface problem definition.
EvidenceDirectional findings come from workflow comparison, responsive QA, and support-theme review; no production analytics are claimed.
02 / Problem
The dashboard hid the next action.
Mobile was treated like a smaller desktop
On a phone, users had to scroll sideways to reach work-order details and actions.
Chat was separate from work-order details
Reading a conversation alongside its work-order status required switching between views.
Project context
Work changed hands
Work orders moved between people, statuses, and locations. Each handoff needed a visible owner and next action.
Different priorities on desktop and mobile
Desktop needed a dense overview of work orders. Mobile needed the details and controls for updating a task without repeatedly scrolling sideways.
Communication was part of the workflow
Notes and chat explained why a work order changed and what needed to happen next.
03 / Design decisions
Designing the list and detail views.
A consistent order for task details
I kept priority, status, location, owner and due signals in a consistent row order so people can compare work orders. Notes, files and full history stay in the detail view to preserve room for triage.
The dashboard groups the information needed to scan, decide, update, and review a work order.
Chat beside the work order
Messages often explain a status change. I placed the conversation beside the selected work order so the message and the task it refers to can be read together, while the list remains available for context.
Chat appears beside the work-order details, keeping messages and task status in view together.
Tabbed detail structure
Tabs separate the summary, tasks, notes, files, and activity within each work order. Each area stays available without lengthening a single detail screen.
Mobile card mode
A mobile card gives up some desktop density to keep status, priority, location, due date and the next action visible. Opening the work order provides the remaining detail without requiring sideways scrolling.
The mobile cards present the details and actions selected for work in the field.
Design process
Decide what belongs in the list
I mapped the information needed to scan work orders, make an update and review the full task. That determined which fields stayed in the list and which moved into the detail view.
Keep the list focused on triage
The list shows the information needed to prioritize work. Notes, files, chat, and history sit in the detail view.
Treat mobile as a different interface
Mobile screens use cards with grouped fields. Responsive QA checked those cards separately from the desktop table.
Reusable patterns
Status and priority tokens
Color and label rules were used to distinguish urgency and progress without relying on color alone.
Reusable work order cards
Cards share spacing, label, and action rules across desktop summary areas and mobile views.
Detail panel patterns
Notes, summary, chat, and files each have a defined area within a consistent detail-panel layout.
Tables on desktop, cards on mobile
The desktop view uses structured rows. Smaller breakpoints switch to cards.
04 / Gallery
Project images
Detail view
Tabs organize the summary, notes, details, and related tasks within the work order.
05 / Outcomes
Work-order details and actions in one view.
Task details grouped for triage
The redesigned workflow groups priority, ownership, status, and the next action so they can be reviewed together.
Cards for mobile work
Cards keep status, priority, location, due date and the next action visible on a phone.
Clearer status and ownership
The redesigned screens spell out status meaning, ownership, and the next action. Production impact has not been measured.
How the work was reviewed
Workflow comparison
I compared where priority, ownership, status and next actions appeared in the original and redesigned flows.
Responsive QA
I checked the desktop table and mobile cards separately, including which details and controls remained visible at each size.
Review of recurring support questions
I used recurring support questions about status and next steps to review the proposed labels and actions.
Looking back
The mobile card needed enough information for someone to decide what to do next. Keeping five fields visible meant moving notes, files and history into the detail view.
Workflow comparison and responsive QA helped me review that tradeoff. Testing with users or production data would be needed to determine whether it saves time.