Cases User Experience (UX)

Brother | Launch Sales App


The client wanted a tool with which their sales team could approach potential clients. The tool should showcase the possible production lines of their new industrial direct-to-garment printer for mass production. And highlight the benefits in the financial input and potential output.


So we came up with the idea to create a website, that could easily used via tablet. The side would showcase different production scenarios in 3D. The scenarios would be based on the production outcome the client wanted. It would show what machinery would be needed. Additional to the 3D production planer, we would integrate a cross margin calculator.

3D production planer
Cross margin calculator


Production process

Since the client did not have a written down process by hand, I watched their tutorial video. While I did that, I wrote down every single step of the process, and also grouped the steps into a top level flow, for a easier understanding.

Production setup

After I clarified the production process with the client, we created a table together. The table included the different setups and what kind of machinery, how many of those machines are necessary and how big the capacity per hour is.

Gross margin calculation

Based on the price lists and the estimated consumption I created a interactive prototype of the calculator in Microsoft Excel. With the calculator we could check with the client, if all calculation are going right, before we started programming them.

The calculator was build in a way, that the sales team could adjust the cost and put in the clients production information, to see how high the costs are, how high the output would be and whats the calculated gross margin is. Additional we showed after how many month the investment will be amortized.


With the conceptual backbone done I could start wireframing. I designed a 3D interactive production line configurator. The user could change the set up via the drop down, while having a overview of machines needed and what the output will be.

We integrated helpful messages to guide the user, pro or beginner, through the process of finding the perfect setup for their production.

The 3D configurator is followed by the calculator. Both are directly connected to each other. If the user changes a attribute, that has implications to the other. It will change it there to. When conflicts appears the user is notified.

For users that are more comfortable with step-by-step we integrated the option on the button of the application.  But this view is also seen, when the user activate an input field. So the user is enabled to switch between the two entry methods as they please.

Web App

Together with our developers we decided to program the website as an progressive web app. With that, we could easily prepare the tablets of their sales people as well as tablets at their both at the trade fair.

Like what you see? Let’s talk about how to make your digital experience better, faster, easier and more fun to use!