Sawline – Streamlining Orders for Sawest Sawmill
Interface design and design system
If you'd like to know more please get in contact
Context
Newly named Sawline is an order management tool built to help remove tension from Sawest Sawmill’s operations as their current setup of Trello (whilst an improvement on pen and paper) was causeing a few major pain points.
The Challenge
Trello had become the team’s operational backbone. It was flexible, visual and already understood—but it could not reliably enforce the commercial details behind every order.
Pain points
Delivery fees – Added inconsistently, or missed entirely, when a job moved quickly from quote to dispatch.
VAT – Relied on memory rather than a clear, repeatable step in the order flow.
Order visibility – Cards showed activity, but not a reliable picture of value, status or what needed attention next, with no way of filtering.
Integrated payment – whilst orders where becoming more consistent, the payment process for customers was fragmented.
Research & prioritisation
Research explored the team’s existing workflow, recurring errors and opportunities for a purpose-built tool. Potential features were assessed against business value for first MVP and usefulness for the sawmill.
Project KPI’s
1
Preserve the mental model staff already knew
2
Make default pricing additions visible by point of order creation
3
Prioritise the smallest build that could support a complete order
The Solution
The solution needed to create new orders from quote to invoice and order management, product management, and dashboard that would show key metrics of the overall orders, we also wanted to test showing which items where selling most and the most popular customers.
01 Commercial guardrails
Costs become part of the flow—not an afterthought. Product details bring dimensions, category, unit cost and VAT into a single, structured step. The interface makes incomplete information visible before an item can move forward. Designed to reduce preventable omissions before they reach the invoice.
02 A shared product language
Species, dimensions and products are separated into reusable records, helping the team find the right item quickly and apply consistent information across quotes, invoices and cutting lists.
03 Branding
A practical identity for a practical tool Built to feel at home in the sawmill. The visual direction balances the precision of production software with the character of the material itself. A utilitarian mono typeface gives data clarity, while confident colour creates clear status signals in a busy working environment.
The Outcome
A familiar workflow, rebuilt around the cost of getting it wrong. The first build translated an established way of working into a focused operational product. MUI provided a robust component foundation, enabling consistent interaction patterns while leaving room for a distinct sawmill identity.
Colour scale
Colour token set
Icon set
To support the use of the components I needed to create a flexible system that would help build consistency at speed and scale so that flows would easily be built with minimal risk of mistakes. Using a slot list component gave that speed and flexibility
There is (of course) a sample of one off components that don't use the slot component as they required a little more complexity. This is an example of which is an order card
Metrics
A familiar workflow, rebuilt around the cost of getting it wrong. The first build translated an established way of working into a focused operational product. MUI provided a robust component foundation, enabling consistent interaction patterns while leaving room for a distinct sawmill identity.
App impact
100% of orders sent out with mandatory fees
Clear quote and invoice states
Structured VAT and unit-cost capture
Shared products, species and dimensions
Cutting lists connected to customer orders
Reflection
This was a true startup sprint—fast, focused, and fun. I learned a lot about aligning design with business goals, shaping a simple go‑to‑market strategy, and shipping something scalable at high quality, quickly. The pace sharpened decision‑making; the constraints kept the work honest; and the result proved you can move fast without lowering the bar.
Branding
We took cues from industrial control panels—bold shapes, clear hierarchy, functional colour—and modernised the typography to Inter (sans) with a supporting mono face. The result: a robust, no‑nonsense feel that reads cleanly on screens and feels at home on the shop floor.
Design system
We used a component library design system (from MUI, called Joy) and themed it to fit Sawline. As all the components where built in React already it meant we could alocate more time to design and refinment then if everythign was built from scratch. To also help keep things stay lean and fast I built a list component using slots that was standardised and could be used in a number of different ways to stay flexible so new screens ship quickly and stay consistent, even scales neatly.
Colour scale
Colour token set
Icon set
To support the use of the components I needed to create a flexible system that would help build consistency at speed and scale so that flows would easily be built with minimal risk of mistakes. Using a slot list component gave that speed and flexibility
There is (of course) a sample of one off components that don't use the slot component as they required a little more complexity. This is an example of which is an order card
Product
Sawline standardises orders and makes the essentials unavoidable: required fields for delivery costs, consistent pricing, and customer details that stay in sync. Customer name inputs automatically search the database to avoid doubling up, pull up past orders instantly, and process new ones without second‑guessing. It’s fast, tidy, and built to reduce mistakes (by design). Also, we considered press states size and made elements slightly bigger in places as we found people are most likely wearing gloves when using the app.
