rodion prokhortsev
ru
All work

Role
UX/UI designer
Team
PM, UX/UI designer, 3 developers
Platform
Desktop → web
Year
2021–2022

A redesign of a sawmill line’s sawing pattern system and its move from a Qt desktop app to the web.

Context

A redesign and migration from Qt 5 (C++) to the web (Node.js and Vue). The system receives scanner data for every log, picks the sawing pattern — how the log is cut into boards — and calculates the volumes at the input and output of the line.

Problem

The application only ran on Linux Ubuntu.

The interface was uncomfortable to use: some functions were only available through console commands. As a result, shift and section operators needed longer training.

Goals

Keep all the operator's data and scenarios, and at the same time:

— put the state of the line and the equipment in plain sight

— cut tables down to what a decision needs, with the rest on demand

— build the interface from ready-made components so the web version is faster to develop

Process

Studying the product and analysing feedback

Mapping every case and interface state

Designing the screens on the Ant Design system

01

Sawmill dashboard

The main shift screen: what is on the line now, equipment connection, totals and feed parameters

User task

In a second the operator sees whether the line is running, which log is going to the saw and whether the equipment is fine — without switching tabs

Design decisions

  • Lost connection to the scanner and the controller is a red alert above the screen with a “Reconnect” button, not a line in the log and a red mark in the status bar
  • The log's path in steps: before the scanner → scanner → last sawn. A failure is shown at the step where it happened
  • Shift totals are three large numbers: logs in, log volume and board output with its share of the volume (24.271 / 41.441 = 58.6%)
  • Line parameters have their own card with “Apply” and “Reset”: changes take effect from the next log
Before. The patterns page
After. A pattern library: the sawing scheme for each top diameter

02

Sawing patterns

User task

The technologist picks and checks a pattern for a log diameter: which boards and beams this scheme yields

Design decisions

  • Search by name or ID above the list: the right pattern is found without scrolling a table of diameters
  • A summary above the list, “10 patterns · ⌀ 34–46”, shows what the library covers
Before. The 3D model
After. An abstract 3D model with key cross-sections. The exact scanner render is still available

03

3D model

User task

Check how the scanner saw the log — its shape, diameters along the length and curvature — when the cut looks doubtful

Design decisions

  • The diameters 328.3 / 348.8 / 400.0 mm from a line of small print became the “Top”, “Middle” and “Butt” sections on the profile and circles drawn to scale
  • The taper is calculated and labelled: 17.1 mm per 1 m = (400.0 − 328.3) / 4.182 m — no mental arithmetic
  • The model is linked to the history: “Open in history” leads to this log's row
Before. Side boards
After. Which boards fit into the sides of the log and how much of the volume they use

04

Side boards

User task

See how fully the wood at the sides of the log is used and find the boards that lose the most

Design decisions

  • The labels Full volume, Fit in, Flat and Offset are translated and put in one line: board size, face (the wide side of the board), offset
  • Volume use is a bar with a percentage: green from 70%, amber below, so weak boards stand out at once
  • Totals on top: left 86% (41,216.4 of 47,901.2 cm³), right 77% (39,142.8 of 50,619.8 cm³), best board 89%, worst 61%
Before. History
After. Logs sawn during the shift: an optimisation filter and expandable rows

05

History

User task

Find a specific log or the logs without optimisation and work out why the cut came out that way

Design decisions

  • Of the 18 columns, the key ones stay in the table; the pattern scheme and volumes are in an expandable row, not a popup over the table
  • Tabs “All · 12”, “Optimised · 9”, “Not optimised · 3” — problem logs in one click
  • Sorting by time and pagination instead of a long table
  • “Export” in the header and a link to the 3D model from the expanded row

06

Side board settings

Which side board sections to look for and with what limits

User task

The technologist sets the sections the system tries to fit into the sides of the log and switches off the unneeded ones without deleting them

Design decisions

  • The set of settings is a hypothesis based on the “Side boards” screen: the screen says so in a banner, and it has to be checked with the technologist
  • Each section is a row with a switch: a disabled row is dimmed but stays in the list

07

Log

Before: a console. After: an event log in a drawer over any screen

User task

Find out what happened to the equipment without leaving the current screen

Design decisions

  • Repeats of the same message are folded into one row with a counter (× 61) instead of long “+++++” lines
  • Filters “Problems”, “Connections”, “Database” and a search through the messages
  • Entries are grouped by time, problems are marked in red

08

End shift

Before: a button that closed the shift. After: a dialog with the shift statistics and a confirmation

User task

Close the shift deliberately: check the totals and not close it by accident when the equipment fails

Design decisions

  • The button moved from the left panel to the header, next to the shift status
  • Before closing, a dialog shows the totals: start, operator, logs, log volume → board volume, 58.6% yield
  • If the scanner or the controller is offline, the dialog warns about it before closing

Result

All the operator and technologist scenarios of the Qt desktop version were moved into the web interface designs: data and functions are kept, and what used to take console commands became buttons, forms and confirmations.

  • 3 → 1.5 daysto train a new shift operator
  • 8–25%operator productivity growth, depending on the number of nodes in the production chain
  • −37%requests to developers about how the interface works

Reflection

A ready-made design system sped the work up but did not replace knowledge of the production: the set of side board settings remained a hypothesis that has to be checked with the technologist.

This site uses cookies for analytics