Designed web app and design system for startup Sawline
Sawline is a sales and workflow app for sawmills. Tailored to help manage orders from quote to invoice, fulfilment and delivery. This case studies shows how I went about designing the app.
01 Foundations
Problem
Saw mills have been left behind in the tech world, they either have to carry on with old school process link pen and paper or make do with whats out there which would require someone skilled or time to understand and build out functionality in task management software like lucid chart, Salesforce, Trello or Notion. Even then it would require API’s or plugins to deliver to their needs.
Why help sawmills
There a over 35,000 sawmills in Europe, who may use a varying bits of software to manage there workflow and sales. This is arguable a large enough industry to build a service tailored to their needs. After all the supply of wood is a sustainable material that almost everyone has in their own home as a start.
Outcome
Sawline’s first MVP helps miller keep account for their product listing including details in species, weight, volume and cost. Gives users the ability to send quote and invoices, tracking there status and help through the fulfilment process through to delivery.
It’s worth noting I didn’t have direct access to the user base and went of learnings gathered for me from original Trello product. Sign off was from the main stack holder and project manager in the project. I worked closely with the developer in constant dialog to make sure design and development aligned quickly and consistently.
A version of a Code injected Trello was used before I started work
02 Visual appearance
Control panel
Early on we decided that Sawline would taken on the look and feel a control panel seen on large machinery in a saw mill, giving users a familiar environment.
Branding
The branding was very much a iterative process throughout building Sawline.
Many concepts where looked at for the logo, to shapes found in a saw mill. We settled on a literal approach of visualising ‘saw’ and ‘line’ for the logo mark. Accompanying that with the colours from the design system and a utilitarian visual look and feel.
03 Design System
As Sawline is a startup we decided early on to use a component library from MUI JOY for a few reasons. Firstly it was built using design tokens and allowed build to happen inline with design and aesthetic changes be pain free. The large built component set, with Autocomplete being extremely useful, more on that later.
A full case study of the design system can be seen here.
04 Discovery & Research
Initial observations
Streamline business operations. Automate tasks to free up employees for value-added activities.
Improve visibility and insights. By providing real-time data on sales, customer orders, and inventory levels can improve visibility and insights into their business. This data can be used for better pricing, marketing, and inventory management.
Reduce costs. Eliminate manual data entry and automate tasks. This can free up employees to focus on more value-added activities, such as sales and customer service.
In addition to these 3 observations, there are a number of other benefits that a sales and workflow app can offer sawmills, including:
User and business assumptions
To make sure we where pointing the gun in the right direction looked at both the users goals of using the app as an individual employee and the the business overall. Looking at both the negatives and positives to see if there where any opportunities there.
User
Positive
Increased productivity. App automates tasks, frees up employees for value-added activities.
Improved customer satisfaction. App tracks orders, payments, and feedback. Improves customer satisfaction and loyalty
Negative
Time spent learning new tech. Learning of new app could take time and cost company money
Belief. Belief in new tech that would help their business and drive a smoother running business.
Business
Positive
Increased sales. App provides efficient, streamlined sales process. Customers can browse, place orders, and pay.
Reduced costs. App eliminates manual data entry and automates tasks. Frees up employees for value-added activities.
Negative
Data migration. Time spent moving data over to new platform
Time spent learning new tech. Learning of new app could take time and cost company money
Overall, an app can be a valuable tool for sawmills that are looking to improve their business operations and achieve their goals. A well-designed app can help sawmills to increase productivity, improve customer satisfaction, increase sales, and reduce costs.
The negatives can be addressed in making sure migrating data over is not a heavy lift and learning the platform is as low as we can possible make it.
How might we
Since specific problems started to arise from the initial observations and user and business assumptions we put them into ‘how might we’ phrases so that these area’s are clearly highlighted and tackled in the right way.
How might we...
...Set up users as quickly as possible without feeling cumbersome.
...Show productivity in a clear way to see how the week is setup.
...Keep an organised list of products so that they can not only be added to quotes easily but used as a list to keep consistent and updated with the latest incoming costs.
...Easily setup a Team with Leader view and member view.
With an overall idea of the direction for Sawline, a problem statement could be formed to refer back to summarising the information above and making sure that any further steps taken where heading in the right direction and solving the problem in the manner we intended.
Problem statement
When sawmill owners want to manage their orders, they have to store order information in notebooks, duplicate that several times to share with the team, and create invoices using templates in MS word. This is unacceptable because they reach a point when that system no long functions, at which point revenue hits a ceiling, stress increases and mistakes become frequent. We envision a world where sawmill owners are free to do what they do best: sell wood, and cut wood - no time wasted on admin. We are bringing this world about through applying popular technology to this neglected industry.
Studying how Trello was used, some pages became clear from mapping these out. Products and orders and a place to organise orders aka Backlog. A dashboard wasn’t necessary for the first push but we had the time and capacity and realised it would be a great step from Trello to show why a tailored app would be beneficial to new customers..
User flows
This flow is used as a starting point for creating a consistent and positive user experience for team leaders, members and also the customer.
As the app starts to take shape and problems arise I plan to map specific sections of the app to gain more granular detail and insight into how past to navigate through the app.
Information architecture
Mapping the architecture of the site helped me see the full scope of the app and uncovered areas I hadn’t thought of.
The Team member state of the app is a work in progress and hasn’t been taken any further than the preliminary attempt at mapping out the information architecture.
05 Design
Onboarding
When first talks begin with Sawline, we wanted the onboarding feel effortless throughout the app, avoiding the burden of inputting potentially hundreds of different products.
To do this we needed the onboarding to have some specific steps to avoid heavy input letter in the app.
We did this by mapping out key areas that needed to be applied through initial onboarding, and some additional learning.
More on how we address not having to implement a long list of items later.
Design
Onboarding
When first talks begin with Sawline, we wanted the onboarding feel effortless throughout the app, avoiding the burden of inputting potentially hundreds of different products.
To do this we needed the onboarding to have some specific steps to avoid heavy input letter in the app.
We did this by mapping out key areas that needed to be applied through initial onboarding, and some additional learning.
More on how we address not having to implement a long list of items later.
05 Design
Navigation
Whilst designing the pages to create a new order we noticed the action to do so was either a Fab button or in the top bar of the orders page, this felt clunky and frustrating early on and also decided the best place for this would be the new orders page.
Having an understanding over the pages needed within the app I mapped each page in a flow chart which formed the bases of the app to move into the design phase and was also iterated on throughout.
Initial wires of each page transformed from rapid pencil sketches to quickly understand if elements would have the potential work.
Home/Dahsboard
The home dashboard gives people an insight into the business and how it is performing with sales, revenue and order management.
Home/Dahsboard
The home dashboard gives people an insight into the business and how it is performing with sales, revenue and order management.
Products
Product listings was an integral part of making a custom app. The ability to collate a concise list of products for millers to consistency charge the right prices.
A product listing shows the main information of the product title which could be the dimensions or a named title along with its price, then the category and species underneath.
These are editable using a draw card which is a common feature within the app.
Products
Product listings was an integral part of making a custom app. The ability to collate a concise list of products for millers to consistency charge the right prices.
A product listing shows the main information of the product title which could be the dimensions or a named title along with its price, then the category and species underneath.
These are editable using a draw card which is a common feature within the app.
Backlog
Management of orders through fulfilment to the order being shipped.
Each order is assigned a colour, each item within an order can be disrupted within the week to be cut, or made ready in anyway for delivery.
Items that are complete can be seen in the done column to either wait for the rest of the items or delivered individually.
Backlog
Management of orders through fulfilment to the order being shipped.
Each order is assigned a colour, each item within an order can be disrupted within the week to be cut, or made ready in anyway for delivery.
Items that are complete can be seen in the done column to either wait for the rest of the items or delivered individually.
Orders
A list of all orders created can be viewed here in date order. Orders can also be seen by any particular state by using the filter.
An order has a ‘status bar’ indicating what stage the order is in and any steps taken with a time stamp. For example a new order can be created and left as a draft, a time status of ‘created just now’ will be given. Once the quote is sent the status will change to ‘Sent 3 days ago’ giving the user an understanding of what tasks where taken previously.
Orders
A list of all orders created can be viewed here in date order. Orders can also be seen by any particular state by using the filter.
An order has a ‘status bar’ indicating what stage the order is in and any steps taken with a time stamp. For example a new order can be created and left as a draft, a time status of ‘created just now’ will be given. Once the quote is sent the status will change to ‘Sent 3 days ago’ giving the user an understanding of what tasks where taken previously.
New order
A key feature in sawline was to lighten the load of onboarding and data migration. When creating a new order for a new customer their details would be stored automatically to use for a feature orders. The same was done for any items created in the order.
This was done by using a powerful the autocomplete component, which was the main factor in choosing MUI Joy as the basis to our design system.
A new order is automatically saved as a Quote once the details have been completed. If the order was to be left before hand a prompt will appear that the order would be deleted.
New order
A key feature in sawline was to lighten the load of onboarding and data migration. When creating a new order for a new customer their details would be stored automatically to use for a feature orders. The same was done for any items created in the order.
This was done by using a powerful the autocomplete component, which was the main factor in choosing MUI Joy as the basis to our design system.
A new order is automatically saved as a Quote once the details have been completed. If the order was to be left before hand a prompt will appear that the order would be deleted.
06 Next steps
The app is built in react as a web app. Whilst people can use the app on larger devices than mobile, the UI isn't yet optimised to any larger screens, below are the start points of that process. The intention is to best use the space available but keep the functionality similar at every breakpoint.
Tablet
Desktop