Johanna K. Design is a company focusing on designing and manufacturing clothes from ecological materials. The company sells it's products to consumers and companies via resellers and own website https://www.johannakdesign.fi/.
The project started in February 2023 when I was visiting Johanna K. Design factory in Taivassalo, Finland. The goal of the project was to find new ways to input illustrations into knitting machine. The primary focus was to replace previous Excel-based tool used to translate illustrations to knitting machine.
Knitting translates very well to technical context. Each loop on the fabric is defined on the knitting machine by zeros and ones. The values for the design are entered line by line manually into the machine. We spent some time to investigate whether it would be possible to automate the input to automatically start knitting process based on transmitted input, but the connections of the machine were not that well documented. It is also too risky to start testing and modifying the main production machine. The main machine is from the 90's and it is one of the only ones currently in use in Finland.
The knitting machine expects loop configurations per row. The figure is manually entered to the machine. We aimed for solution that would print out the loops per row in readable format based on illustration. This was basically what the Excel-based tool was already doing, though an accurate visual representation of illustration was rather challenging to do in excel. We wanted to make the drawing part more intuitive and explore possibilities for the end users to make their own illustrations to be knitted. This would require a UI for drawing and convert the input into machine compliant format.
To summarise, the aim was to design and implement UI for drawing knit patterns and to encode the output so that the machine user can proceed with entering the instructions to start the machine. In order to engage customers the interface would need to be part of Johanna K. Design's existing web platform.
Objective: The purpose was to explore new approaches to use technology to ease configuration of illustrations to the knitting machine as well as find ways to engage end customers to submit their own illustrations.
Benefits: The main benefit is to have a tool that can be used to create knit designs. The process of converting the illustration to "pixelated" illustration takes time and anything that can be done to improve that helps. This was considered as a major cost saving opportunity. It was expected that some subset of the customers would like to see their own illustrations on the end-product. This would make it purchase more personal and special. By providing the option to customise it would widen the product offering. This was expected to increase revenue growth.
Solution Overview: Web-based tool that enables sketching and working on illustrations. The tool outputs knitting machine compliant format of the pattern, which makes it easy for the machine user to start working on the knitting task. The UI of the tool is available for consumers via existing web platform, embedded as iFrame.
Risks: The tool may end up being difficult to use. There might not be enough customer demand for custom illustrations. It is also possible that the whole process cannot be made financially feasible. For example, if the customer makes a mistake to the figure it is not suistainable to offer returns for the purchase.
Mitigations: The solution should be designed so that it can be always used internally for own illustration purposes. In order to ensure the feasibility for internal use the usability of the solution is continuously reviewed. This ensures the efforts used to develop the tool are not relying solely on the consumer demand.
Financials: The selected approach focused on finding the easiest and low-cost approach to implement useful, yet simplest version of the tool. This was in order to keep the development costs down and see if the project would return profit on the investment.
In order get initial feedback and comments we reached out to customers through social media (Instagram) to get few volunteer participants to provide feedback for the initial version. Received feedback was positive and encouraging. Improvement proposals focused on providing more details and instructions about the actual fabric that will be made. In addition, more information was needed for the UI element functionality e.g. how some of the tools – such as "magic wand" -button – actually work.
Once we were ready with finalising the functionalities and making the most important fixes we decided to publish the functionality. We added user instructions page as well as added a link to the Johanna K. Design's home page: https://www.johannakdesign.fi/page/11/knit-designer
The main idea was to split the flow into distinct sections: selections, drawing, preview and send.
We also wanted a functionality to backup unfinished drawings. This was implemented by providing an option to copy "code" into clipboard. The work could be continued by pasting the "code" into the tool. Although the illustration was stored into localStorage this was considered useful to avoid loss of work.
The actual drawing supported the common actions such as drawing, erasing, undo and redo. In addition, the input shape could also be changed into different shapes.
Once the illustration is ready it is possible to preview how it would look like when the shape is repeated.
Before submitting the order the drawing is linked to the order based on the order number (tilausnumero).
The UI was written in React and D3. The app was included to the website as iFrame. The chrome and dialogs of the UI was done in React and the drawing functionality was implemented with D3 inside web component. Illustrations are sent to the Netlify backend as form data, so no actual backend was needed.
The project offered a great opportunity to get familiar with manufacturing and product design in detail. We were able iterate, test and verify different ideas rapidly. From the client side the investment was rather modest yet we were still able to create additional revenue. The project deepened the understanding on how to productise the utilisation of manufacturing resources as well as how to improve the product development pipeline in everyday operations.